Add a pencil icon when hovering the title

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 {
+                    .yourself, .anonymous, .viewer {
-                        font-style: italic;
-                    }
-                    .anonymous {
                         font-style: italic;
                     }
                 }

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 {
+.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 .viewer {
-.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous {
   font-style: italic;
 }
 .cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 {

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";

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";

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);
                 });
             };

www/common/toolbar.js

@@ -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);
+        var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
-        $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
+        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);

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);
                 });
             };

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);
                 });
             };