Replace the username button by a dropdown menu

customize.dist/main.css

@@ -376,7 +376,7 @@
   background: #bbb;
 }
 .dropdown-bar .dropdown-bar-content p {
-  width: 210px;
+  min-width: 160px;
   padding: 5px;
   margin: 0;
   white-space: normal;

customize.dist/src/less/dropdown.less

@@ -63,7 +63,7 @@
         }
 
         p {
-            width: 210px;
+            min-width: 160px;
             padding: 5px;
             margin: 0;
             white-space: normal;

customize.dist/src/less/toolbar.less

@@ -26,6 +26,8 @@
     box-sizing: border-box;
     padding: 0px 6px;
 
+    .fa {font-family: FontAwesome;}
+
     .unselectable;
 
     font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
@@ -287,10 +289,17 @@
     font-weight: bold;
     text-transform: uppercase;
 }
-.cryptpad-toolbar-username {
+        .fa-user {
-    line-height: 32px;
+            margin-right: 5px;
-    button {
+        }
-        line-height: initial;
+.cryptpad-user {
+    .buttonTitle {
+        .fa-user {
+            margin-right: 5px;
+        }
+        .cryptpad-toolbar-username {
+            margin-right: 5px;
+        }
     }
 }
 .lag {

customize.dist/toolbar.css

@@ -45,7 +45,7 @@
   background: #bbb;
 }
 .dropdown-bar .dropdown-bar-content p {
-  width: 210px;
+  min-width: 160px;
   padding: 5px;
   margin: 0;
   white-space: normal;
@@ -103,6 +103,9 @@
   width: 100%;
   z-index: 9001;
 }
+.cryptpad-toolbar .fa {
+  font-family: FontAwesome;
+}
 .cryptpad-toolbar a {
   float: right;
 }
@@ -357,11 +360,14 @@
   font-weight: bold;
   text-transform: uppercase;
 }
-.cryptpad-toolbar-username {
+.fa-user {
-  line-height: 32px;
+  margin-right: 5px;
 }
-.cryptpad-toolbar-username button {
+.cryptpad-user .buttonTitle .fa-user {
-  line-height: initial;
+  margin-right: 5px;
+}
+.cryptpad-user .buttonTitle .cryptpad-toolbar-username {
+  margin-right: 5px;
 }
 .lag {
   height: 15px !important;

www/code/main.js

@@ -366,6 +366,14 @@ define([
 
              var onInit = config.onInit = function (info) {
                 userList = info.userList;
+
+                module.userName = {};
+                // The lastName is stored in an object passed to the toolbar so that when the user clicks on
+                // the "change display name" button, the prompt already knows his current name
+                getLastName(function (err, lastName) {
+                    module.userName.lastName = lastName;
+                });
+
                 var config = {
                     userData: userData,
                     readOnly: readOnly,
@@ -375,6 +383,10 @@ define([
                         defaultName: defaultName,
                         suggestName: suggestName
                     },
+                    userName: {
+                        setName: setName,
+                        lastName: module.userName
+                    },
                     common: Cryptpad
                 };
                 if (readOnly) {delete config.changeNameID; }
@@ -392,15 +404,6 @@ define([
                     editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
                 }
 
-                // Store the object sent for the "change username" button so that we can update the field value correctly
-                var userNameButtonObject = module.userName = {};
-                /* add a "change username" button */
-                getLastName(function (err, lastName) {
-                    userNameButtonObject.lastName = lastName;
-                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-                    $userBlock.append($username);
-                });
-
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, exportText);
                 $rightside.append($export);

www/common/cryptpad-common.js

@@ -984,7 +984,9 @@ define([
         return $container;
     };
 
-    var createLanguageSelector = common.createLanguageSelector = function ($container, $block) {
+    // Provide $container if you want to put the generated block in another element
+    // Provide $initBlock if you already have the menu block and you want the content inserted in it
+    var createLanguageSelector = common.createLanguageSelector = function ($container, $initBlock) {
         var options = [];
         var languages = Messages._languages;
         for (var l in languages) {
@@ -1002,7 +1004,7 @@ define([
             text: Messages.language, // Button initial text
             options: options, // Entries displayed in the menu
             left: true, // Open to the left of the button
-            container: $block // optional
+            container: $initBlock // optional
         };
         var $block = createDropdown(dropdownConfig);
         $block.attr('id', 'language-selector');

www/common/toolbar.js

@@ -233,16 +233,18 @@ define([
         var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
         $userElement.show();
         if (readOnly === 1) {
-            $userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
+            //$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
+            $userElement.addClass('ro').text(Messages.readonly);
         }
         else {
             var name = userData[myUserName] && userData[myUserName].name;
-            var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>';
+            //var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>';
             if (!name) {
                 name = Messages.anonymous;
             }
-            $userElement.find("button").show();
+            // $userElement.find("button").show();
-            $userElement.find("button").html(icon + ' ' + name);
+            // $userElement.find("button").html(icon + ' ' + name);
+            $userElement.removeClass('ro').text(name);
         }
     };
 
@@ -318,8 +320,9 @@ define([
         $linkContainer.append($aTagSmall).append($aTagBig);
     };
 
-    var createUserAdmin = function ($topContainer, lagElement, Cryptpad) {
+    var createUserAdmin = function ($topContainer, config, lagElement, Cryptpad) {
         var $lag = $(lagElement);
+        //TODO check if we should displayed that button and if we can (userName.setName, userName.lastName and userdata required)
 
         var $userContainer = $('<span>', {
             'class': USER_CLS
@@ -334,7 +337,57 @@ define([
         // Dropdown language selector
         Cryptpad.createLanguageSelector($userContainer);
 
-        var $usernameElement = $('<span>', {'class': USERNAME_CLS}).appendTo($userContainer);
+        // User dropdown
+        var $displayedName = $('<span>', {'class': USERNAME_CLS});
+        var accountName = null; //TODO Cryptpad.getStore().getAccountName()
+        var account = typeof accountName === "string";
+        var $userAdminContent = $('<p>');
+        if (account) {
+            var $userAccount = $('<span>', {'class': 'userAccount'}).append('Account: ' + accountName);
+            $userAdminContent.append($userAccount);
+            $userAdminContent.append($('<br>'));
+        }
+        var $userName = $('<span>', {'class': 'userDisplayName'}).append('Display name: ').append($displayedName.clone());
+        $userAdminContent.append($userName);
+        var options = [{
+            tag: 'p',
+            content: $userAdminContent.html()
+        }, {
+            tag: 'a',
+            attributes: {'class': 'changeUserName'},
+            content: 'Change username'
+        }, {
+            tag: 'a',
+            attributes: {'class': 'login'}, //TODO
+            content: 'Login'
+        }, {
+            tag: 'a',
+            attributes: {'class': 'logout'}, //TODO
+            content: 'Logout'
+        }];
+        var $icon = $('<span>', {'class': 'fa fa-user'});
+        var $button = $('<div>').append($icon).append($displayedName.clone());
+        if (account) {
+            $button.append('(' + accountName + ')');
+        }
+        var dropdownConfig = {
+            text: $button.html(), // Button initial text
+            options: options, // Entries displayed in the menu
+            left: true, // Open to the left of the button
+        };
+        var $userAdmin = Cryptpad.createDropdown(dropdownConfig);
+        $userContainer.append($userAdmin);
+
+        $userAdmin.find('a.logout').click(function (e) {
+            Cryptpad.logout();
+        });
+        if (config.userName && config.userName.setName && config.userName.lastName) {
+            $userAdmin.find('a.changeUserName').click(function (e) {
+                Cryptpad.prompt(Messages.changeNamePrompt, config.userName.lastName.lastName || '', function (newName) {
+                    config.userName.setName(newName);
+                });
+            });
+        }
 
         return $userContainer;
     };
@@ -427,7 +480,7 @@ define([
         var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
         var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
         var lagElement = createLagElement();
-        var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), lagElement, Cryptpad);
+        var $userAdminElement = createUserAdmin(toolbar.find('.' + TOP_CLS), config, lagElement, Cryptpad);
         var spinner = createSpinner($userAdminElement);
         var userData = config.userData;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
@@ -465,14 +518,11 @@ define([
         }
 
         // Update user list
-        if (config.userData) {
+        if (userData) {
             userList.change.push(function (newUserData) {
                 var users = userList.users;
                 if (users.indexOf(myUserName) !== -1) { connected = true; }
                 if (!connected) { return; }
-                /*if (newUserData) { // Someone has changed his name/color
-                    userData = newUserData;
-                }*/
                 checkSynchronizing(users, myUserName, $stateElement);
                 updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement);
             });

www/drive/main.js

@@ -152,40 +152,16 @@ define([
             });
         };
 
-        var setName = APP.setName = function (newName) {
-            if (typeof(newName) !== 'string') { return; }
-            var myUserNameTemp = Cryptpad.fixHTML(newName.trim());
-            if(myUserNameTemp.length > 32) {
-                myUserNameTemp = myUserNameTemp.substr(0, 32);
-            }
-            var myUserName = myUserNameTemp;
-            Cryptpad.setAttribute('username', myUserName, function (err, data) {
-                if (err) {
-                    logError("Couldn't set username", err);
-                    return;
-                }
-                APP.userName.lastName = myUserName;
-                var $button = APP.$userNameButton;
-                var $span = $('<div>').append($button.find('span').clone()).html();
-                $button.html($span + myUserName);
-            });
-        };
-
-        var $userBlock = APP.$bar.find('.' + Toolbar.constants.username);
-
         // Store the object sent for the "change username" button so that we can update the field value correctly
         var userNameButtonObject = APP.userName = {};
         /* add a "change username" button */
         if (!APP.readOnly) {
             getLastName(function (err, lastName) {
-                userNameButtonObject.lastName = lastName;
+                APP.userName.lastName = lastName;
-                var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
+                APP.$displayName.text(lastName);
-                $userBlock.append($username);
-                $username.append(lastName);
-                $username.show();
             });
         } else {
-            $userBlock.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
+            APP.$displayName.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
         }
 
         // FILE MANAGER
@@ -1703,6 +1679,23 @@ define([
         refresh();
     };
 
+    var setName = APP.setName = function (newName) {
+        if (typeof(newName) !== 'string') { return; }
+        var myUserNameTemp = Cryptpad.fixHTML(newName.trim());
+        if(myUserNameTemp.length > 32) {
+            myUserNameTemp = myUserNameTemp.substr(0, 32);
+        }
+        var myUserName = myUserNameTemp;
+        Cryptpad.setAttribute('username', myUserName, function (err, data) {
+            if (err) {
+                logError("Couldn't set username", err);
+                return;
+            }
+            APP.userName.lastName = myUserName;
+            APP.$displayName.text(myUserName);
+        });
+    };
+
     // don't initialize until the store is ready.
     Cryptpad.ready(function () {
         var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy ? Cryptpad.getStore().getProxy() : undefined;
@@ -1752,17 +1745,23 @@ define([
             });
 
             var userList = APP.userList = info.userList;
+            APP.userName = {};
             var config = {
                 readOnly: readOnly,
                 ifrw: window,
                 common: Cryptpad,
+                userName: {
+                    setName: setName,
+                    lastName: APP.userName
+                },
                 hideShare: true
             };
             var toolbar = APP.toolbar = info.realtime.toolbar = Toolbar.create(APP.$bar, info.myID, info.realtime, info.getLag, userList, config);
 
             var $bar = APP.$bar;
             var $rightside = $bar.find('.' + Toolbar.constants.rightside);
-            var $userBlock = $bar.find('.' + Toolbar.constants.username);
+            var $userBlock = $bar.find('.' + Toolbar.constants.userAdmin);
+            APP.$displayName = $bar.find('.' + Toolbar.constants.username);
 
             if (APP.homePageIframe) {
                 var $linkToMain = $bar.find('.cryptpad-link a');

www/pad/main.js

@@ -559,6 +559,14 @@ define([
 
             var onInit = realtimeOptions.onInit = function (info) {
                 userList = info.userList;
+
+                module.userName = {};
+                // The lastName is stored in an object passed to the toolbar so that when the user clicks on
+                // the "change display name" button, the prompt already knows his current name
+                getLastName(function (err, lastName) {
+                    module.userName.lastName = lastName;
+                });
+
                 var config = {
                     userData: userData,
                     readOnly: readOnly,
@@ -568,6 +576,10 @@ define([
                         defaultName: defaultName,
                         suggestName: suggestName
                     },
+                    userName: {
+                        setName: setName,
+                        lastName: module.userName
+                    },
                     common: Cryptpad
                 };
                 if (readOnly) {delete config.changeNameID; }
@@ -585,14 +597,7 @@ define([
                     editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
                 }
 
-                // Store the object sent for the "change username" button so that we can update the field value correctly
+
-                var userNameButtonObject = module.userName = {};
-                /* add a "change username" button */
-                getLastName(function (err, lastName) {
-                    userNameButtonObject.lastName = lastName;
-                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-                    $userBlock.append($username);
-                });
 
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, exportFile);

www/poll/main.js

@@ -643,6 +643,14 @@ define([
         });
 
         userList = APP.userList = info.userList;
+
+        APP.userName = {};
+        // The lastName is stored in an object passed to the toolbar so that when the user clicks on
+        // the "change display name" button, the prompt already knows his current name
+        getLastName(function (err, lastName) {
+            APP.userName.lastName = lastName;
+        });
+
         var config = {
             userData: userData,
             readOnly: readOnly,
@@ -651,6 +659,10 @@ define([
                 defaultName: defaultName,
                 suggestName: suggestName
             },
+            userName: {
+                setName: setName,
+                lastName: APP.userName
+            },
             ifrw: window,
             common: Cryptpad,
         };
@@ -662,15 +674,6 @@ define([
         var $editShare = $bar.find('.' + Toolbar.constants.editShare);
         var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
 
-        // Store the object sent for the "change username" button so that we can update the field value correctly
-        var userNameButtonObject = APP.userName = {};
-        /* add a "change username" button */
-        getLastName(function (err, lastName) {
-            userNameButtonObject.lastName = lastName;
-            var $username = APP.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-            $userBlock.append($username);
-        });
-
         /* add a forget button */
         var forgetCb = function (err, title) {
             if (err) { return; }

www/slide/main.js

@@ -409,6 +409,14 @@ define([
 
             var onInit = config.onInit = function (info) {
                 userList = info.userList;
+
+                module.userName = {};
+                // The lastName is stored in an object passed to the toolbar so that when the user clicks on
+                // the "change display name" button, the prompt already knows his current name
+                getLastName(function (err, lastName) {
+                    module.userName.lastName = lastName;
+                });
+
                 var config = {
                     userData: userData,
                     readOnly: readOnly,
@@ -418,6 +426,10 @@ define([
                         defaultName: defaultName,
                         suggestName: suggestName
                     },
+                    userName: {
+                        setName: setName,
+                        lastName: module.userName
+                    },
                     common: Cryptpad
                 };
                 if (readOnly) {delete config.changeNameID; }
@@ -435,15 +447,6 @@ define([
                     editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
                 }
 
-                // Store the object sent for the "change username" button so that we can update the field value correctly
-                var userNameButtonObject = module.userName = {};
-                /* add a "change username" button */
-                getLastName(function (err, lastName) {
-                    userNameButtonObject.lastName = lastName;
-                    var $username = module.$userNameButton = Cryptpad.createButton('username', false, userNameButtonObject, setName).hide();
-                    $userBlock.append($username);
-                });
-
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, exportText);
                 $rightside.append($export);