diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index f3cba1d92..d8f7b6a6c 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -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; } } diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 3279dcf22..cfde957a3 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -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; + 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: 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 { diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 44a35ea05..03c3a59b4 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -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"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 89ec12f95..dd3b9c623 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -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"; diff --git a/www/code/main.js b/www/code/main.js index a5d7af164..cf9864eb1 100644 --- a/www/code/main.js +++ b/www/code/main.js @@ -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); }); }; diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 1a5b9bde1..2fc0c112d 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -238,9 +238,20 @@ define([ var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers; editUsersNames.push('' + anonymous + ' ' + text + ''); } + if (numberOfViewUsers > 0) { + var viewText = ''; + if (numberOfEditUsers > 0) { + editUsersNames.push(''); + viewText += Messages.and + ' '; + } + var viewerText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer; + viewText += numberOfViewUsers + ' ' + viewerText + ''; + editUsersNames.push(viewText); + } if (editUsersNames.length > 0) { editUsersList += editUsersNames.join('
'); } + var $usersTitle = $('

').text(Messages.users); var $editUsers = $userButtons.find('.' + USERLIST_CLS); $editUsers.html('').append($usersTitle).append(editUsersList); @@ -249,8 +260,10 @@ define([ var fa_caretdown = ''; var fa_editusers = ''; var fa_viewusers = ''; - $userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + '   ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown); - $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + '   ' + 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 + '   ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText + ' ' + fa_caretdown); + $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + numberOfEditUsers + '   ' + 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 = $('', { id: 'toolbarTitle', 'class': TITLE_CLS }).appendTo($container); var $text = $('', { - title: Messages.clickToEdit + 'class': 'title' }).appendTo($titleContainer); + var $pencilIcon = $('', { + 'class': 'pencilIcon' + }); if (readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; } var $input = $('', { type: 'text', placeholder: placeholder }).appendTo($titleContainer).hide(); + if (readOnly !== 1) { + $text.attr("title", Messages.clickToEdit); + $text.addClass("editable"); + var $icon = $('', { + '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); diff --git a/www/pad/main.js b/www/pad/main.js index 96489bc7a..04df6d47b 100644 --- a/www/pad/main.js +++ b/www/pad/main.js @@ -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); }); }; diff --git a/www/slide/main.js b/www/slide/main.js index 711280624..91a174d0f 100644 --- a/www/slide/main.js +++ b/www/slide/main.js @@ -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); }); };