Add a pencil icon when hovering the title

2016-10-26 17:49:16 +02:00 · 2016-10-26 17:49:16 +02:00 · ab1d3958ce
commit ab1d3958ce
parent 64346b72d8
8 changed files with 108 additions and 30 deletions
--- 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;
                    }
                }
--- 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 {
--- 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";
--- 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";
--- 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);
                });
            };
--- 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('<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);
--- 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);
                });
            };
--- 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);
                });
            };