Add a pencil icon when hovering the title

pull/1/head
yflory 8 years ago
parent 64346b72d8
commit ab1d3958ce

@ -114,15 +114,37 @@
height: 67px;
}
.cryptpad-title {
span {
.title, .pencilIcon {
font-size: 1.5em;
vertical-align: middle;
line-height: 32px;
}
.pencilIcon {
display: none;
&:hover {
color: #999;
}
span {
cursor: pointer;
}
}
&:not(input):hover {
.editable {
border: 1px solid #888;
border-radius: 2px;
border-radius: 2px 0px 0px 2px;
background: white;
padding: 5px;
border-collapse: collapse;
}
.pencilIcon {
cursor: pointer;
border: 1px solid #888;
border-radius: 0px 2px 2px 0px;
background: white;
padding: 5px;
display: inline;
margin-left: -1px;
border-collapse: collapse;
}
}
input {
@ -227,10 +249,7 @@
white-space: normal;
&.cryptpad-dropdown-users {
text-align:baseline;
.yourself {
font-style: italic;
}
.anonymous {
.yourself, .anonymous, .viewer {
font-style: italic;
}
}

@ -14,8 +14,6 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*color: #666;*/
/*font-weight: bold;*/
font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
color: #000;
display: inline-block;
@ -115,16 +113,37 @@
height: 67px;
}
}
.cryptpad-toolbar-top .cryptpad-title span {
.cryptpad-toolbar-top .cryptpad-title .title,
.cryptpad-toolbar-top .cryptpad-title .pencilIcon {
font-size: 1.5em;
vertical-align: middle;
line-height: 32px;
}
.cryptpad-toolbar-top .cryptpad-title span:hover {
.cryptpad-toolbar-top .cryptpad-title .pencilIcon {
display: none;
}
.cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover {
color: #999;
}
.cryptpad-toolbar-top .cryptpad-title .pencilIcon span {
cursor: pointer;
}
.cryptpad-toolbar-top .cryptpad-title:not(input):hover .editable {
border: 1px solid #888;
border-radius: 2px 0px 0px 2px;
background: white;
padding: 5px;
border-collapse: collapse;
}
.cryptpad-toolbar-top .cryptpad-title:not(input):hover .pencilIcon {
cursor: pointer;
border: 1px solid #888;
border-radius: 2px;
border-radius: 0px 2px 2px 0px;
background: white;
padding: 5px;
display: inline;
margin-left: -1px;
border-collapse: collapse;
}
.cryptpad-toolbar-top .cryptpad-title input {
font-size: 1.5em;
@ -240,10 +259,9 @@
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users {
text-align: baseline;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous {
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself,
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous,
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .viewer {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 {

@ -30,7 +30,12 @@ define(function () {
out.anonymousUser = "utilisateur anonyme";
out.shareView = "URL de lecture seule";
out.shareEdit = "URL d'édition";
out.users = "Éditeurs";
out.users = "Utilisateurs";
out.and = "Et";
out.viewer = "lecteur";
out.viewers = "lecteurs";
out.editor = "éditeur";
out.editors = "éditeurs";
out.greenLight = "Tout fonctionne bien";
out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
@ -83,8 +88,6 @@ define(function () {
out.readonlyUrl = 'Document en lecture seule';
out.copyReadOnly = "Copier l'URL dans le presse-papiers";
out.openReadOnly = "Ouvrir dans un nouvel onglet";
out.editing = "éditeur(s)";
out.viewing = "lecteur(s)";
out.editShare = "Partager l'URL d'édition";
out.editShareTitle = "Copier l'URL d'édition dans le presse-papiers";
out.viewShare = "Partager l'URL de lecture";

@ -30,7 +30,12 @@ define(function () {
out.anonymousUser = "anonymous user";
out.shareView = "Read-only URL";
out.shareEdit = "Edit URL";
out.users = "Editing users";
out.users = "Users";
out.and = "And";
out.viewer = "viewer";
out.viewers = "viewers";
out.editor = "editor";
out.editors = "editors";
out.greenLight = "Everything is working fine";
out.orangeLight = "Your slow connection may impact your experience";
@ -83,8 +88,6 @@ define(function () {
out.readonlyUrl = 'Read only document';
out.copyReadOnly = "Copy URL to clipboard";
out.openReadOnly = "Open in a new tab";
out.editing = "editor(s)";
out.viewing = "viewer(s)";
out.editShare = "Share edit URL";
out.editShareTitle = "Copy the edit URL to clipboard";
out.viewShare = "Share view URL";

@ -331,7 +331,7 @@ define([
return;
}
document.title = data;
$bar.find('.' + Toolbar.constants.title).find('span').text(data);
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
$bar.find('.' + Toolbar.constants.title).find('input').val(data);
});
};

@ -238,9 +238,20 @@ define([
var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
}
if (numberOfViewUsers > 0) {
var viewText = '<span class="viewer">';
if (numberOfEditUsers > 0) {
editUsersNames.push('');
viewText += Messages.and + ' ';
}
var viewerText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
editUsersNames.push(viewText);
}
if (editUsersNames.length > 0) {
editUsersList += editUsersNames.join('<br>');
}
var $usersTitle = $('<h2>').text(Messages.users);
var $editUsers = $userButtons.find('.' + USERLIST_CLS);
$editUsers.html('').append($usersTitle).append(editUsersList);
@ -249,8 +260,10 @@ define([
var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>';
var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
$userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown);
$userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor;
$userButtons.find('.userlist.edit').html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText + ' ' + fa_caretdown);
$userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
// Change username button
var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
@ -381,18 +394,33 @@ define([
var placeholder = config.defaultName;
var suggestName = config.suggestName;
// Buttons
var $titleContainer = $('<span>', {
id: 'toolbarTitle',
'class': TITLE_CLS
}).appendTo($container);
var $text = $('<span>', {
title: Messages.clickToEdit
'class': 'title'
}).appendTo($titleContainer);
var $pencilIcon = $('<span>', {
'class': 'pencilIcon'
});
if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
var $input = $('<input>', {
type: 'text',
placeholder: placeholder
}).appendTo($titleContainer).hide();
if (readOnly !== 1) {
$text.attr("title", Messages.clickToEdit);
$text.addClass("editable");
var $icon = $('<span>', {
'class': 'fa fa-pencil readonly',
style: 'font-family: FontAwesome;'
});
$pencilIcon.append($icon).appendTo($titleContainer);
}
// Events
$input.on('mousedown', function (e) {
if (!$input.is(":focus")) {
$input.focus();
@ -412,20 +440,26 @@ define([
callback(null, newtitle);
$input.hide();
$text.show();
$pencilIcon.css('display', '');
});
}
else if (e.which === 27) {
$input.hide();
$text.show();
$pencilIcon.css('display', '');
}
});
$text.on('click', function () {
var displayInput = function () {
$text.hide();
$pencilIcon.css('display', 'none');
var inputVal = suggestName() || "";
$input.val(inputVal);
$input.show();
$input.focus();
});
};
$text.on('click', displayInput);
$pencilIcon.on('click', displayInput);
return $titleContainer;
};
@ -461,7 +495,8 @@ define([
return;
}
$titleElement.find('input').hide();
$titleElement.find('span').show();
$titleElement.find('span.title').show();
$titleElement.find('span.pencilIcon').css('display', '');
};
$(config.ifrw).on('click', removeDropdowns);
$(config.ifrw).on('click', cancelEditTitle);

@ -406,7 +406,7 @@ define([
return;
}
document.title = data;
$bar.find('.' + Toolbar.constants.title).find('span').text(data);
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
$bar.find('.' + Toolbar.constants.title).find('input').val(data);
});
};

@ -354,7 +354,7 @@ define([
}
APP.title = data;
setTabTitle();
$bar.find('.' + Toolbar.constants.title).find('span').text(data);
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
$bar.find('.' + Toolbar.constants.title).find('input').val(data);
});
};

Loading…
Cancel
Save