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

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