Select what we want to display in the toolbar

customize.dist/main.css

@@ -380,6 +380,7 @@
   padding: 5px;
   margin: 0;
   white-space: normal;
+  text-align: left;
 }
 .dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
   text-align: baseline;

customize.dist/src/less/dropdown.less

@@ -67,6 +67,7 @@
             padding: 5px;
             margin: 0;
             white-space: normal;
+            text-align: left;
             &.cryptpad-dropdown-users {
                 text-align:baseline;
                 .yourself, .anonymous, .viewer {

customize.dist/toolbar.css

@@ -49,6 +49,7 @@
   padding: 5px;
   margin: 0;
   white-space: normal;
+  text-align: left;
 }
 .dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
   text-align: baseline;

www/code/main.js

@@ -375,6 +375,7 @@ define([
                 });
 
                 var config = {
+                    displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
                     userData: userData,
                     readOnly: readOnly,
                     ifrw: ifrw,

www/common/toolbar.js

@@ -39,10 +39,6 @@ define([
     var TITLE_CLS = Bar.constants.title = "cryptpad-title";
     var USER_CLS = Bar.constants.userAdmin = "cryptpad-user";
 
-    /** Key in the localStore which indicates realtime activity should be disallowed. */
-    // TODO remove? will never be used in cryptpad
-    var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
-
     var SPINNER_DISAPPEAR_TIME = 3000;
 
     var uid = function () {
@@ -79,16 +75,19 @@ define([
         return $toolbar;
     };
 
-    var createSpinner = function ($container) {
+    var createSpinner = function ($container, config) {
+        if (config.displayed.indexOf('spinner') !== -1) {
             var $spinner = $('<span>', {
                 id: uid(),
                 'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse',
             }).hide();
             $container.prepend($spinner);
             return $spinner[0];
+        }
     };
 
     var kickSpinner = function (spinnerElement) {
+        if (!spinnerElement) { return; }
         $(spinnerElement).show();
         if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); }
         spinnerElement.timeout = setTimeout(function () {
@@ -96,8 +95,12 @@ define([
         }, SPINNER_DISAPPEAR_TIME);
     };
 
-    var createUserButtons = function ($userlistElement, readOnly, Cryptpad) {
+    var createUserButtons = function ($userlistElement, config, readOnly, Cryptpad) {
         // User list button
+        if (config.displayed.indexOf('userlist') !== -1) {
+            if (!config.userData) {
+                throw new Error("You must provide a `userData` object to display the userlist");
+            }
             var dropdownConfig = {
                 options: [{
                     tag: 'p',
@@ -107,8 +110,10 @@ define([
             var $block = Cryptpad.createDropdown(dropdownConfig);
             $block.attr('id', 'userButtons');
             $userlistElement.append($block);
+        }
 
         // Share button
+        if (config.displayed.indexOf('share') !== -1) {
             var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
             var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton);
             var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
@@ -119,14 +124,16 @@ define([
             var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
             $userlistElement.append($shareBlock);
+        }
     };
 
-    var createUserList = function ($container, readOnly, Cryptpad) {
+    var createUserList = function ($container, config, readOnly, Cryptpad) {
+        if (config.displayed.indexOf('userlist') === -1 && config.displayed.indexOf('share') === -1) { return; }
         var $userlist = $('<div>', {
             'class': USER_LIST_CLS,
             id: uid(),
         });
-        createUserButtons($userlist, readOnly, Cryptpad);
+        createUserButtons($userlist, config, readOnly, Cryptpad);
         $container.append($userlist);
         return $userlist[0];
     };
@@ -167,11 +174,12 @@ define([
         $stateElement.text('');
     };
 
-    var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) {
+    var updateUserList = function (config, myUserName, userlistElement, userList, userData, readOnly, $userAdminElement) {
         // Make sure the elements are displayed
         var $userButtons = $(userlistElement).find("#userButtons");
         $userButtons.attr('display', 'inline');
 
+        if (config.displayed.indexOf('userlist') !== -1) {
             var numberOfUsers = userList.length;
 
             // If we are using old pads (readonly unavailable), only editing users are in userList.
@@ -223,28 +231,25 @@ define([
             var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
             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);
             var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
-        // $userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
             var $spansmall = $('<span>', {'class': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
             $userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
+        }
 
-        // Change username button
+        if (config.displayed.indexOf('useradmin') !== -1) {
+            // Change username in useradmin dropdown
             var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
             $userElement.show();
             if (readOnly === 1) {
-            //$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
+                $userElement.addClass(READONLY_CLS).text(Messages.readonly);
-            $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>';
                 if (!name) {
                     name = Messages.anonymous;
                 }
-            // $userElement.find("button").show();
+                $userElement.removeClass(READONLY_CLS).text(name);
-            // $userElement.find("button").html(icon + ' ' + name);
+            }
-            $userElement.removeClass('ro').text(name);
         }
     };
 
@@ -321,6 +326,7 @@ define([
     };
 
     var createUserAdmin = function ($topContainer, config, lagElement, Cryptpad) {
+        if (config.displayed.indexOf('useradmin') === -1 && config.displayed.indexOf('share') === -1) { return; }
         var $lag = $(lagElement);
         //TODO check if we should displayed that button and if we can (userName.setName, userName.lastName and userdata required)
 
@@ -328,16 +334,27 @@ define([
             'class': USER_CLS
         }).appendTo($topContainer);
 
+        if (config.displayed.indexOf('state') !== -1) {
             var $state = $('<span>', {
                 'class': STATE_CLS
             }).text(Messages.synchronizing).appendTo($userContainer);
+        }
 
+        if (config.displayed.indexOf('lag') !== -1) {
             $userContainer.append($lag);
+        }
 
+        if (config.displayed.indexOf('language') !== -1) {
             // Dropdown language selector
             Cryptpad.createLanguageSelector($userContainer);
+        }
 
         // User dropdown
+        if (config.displayed.indexOf('useradmin') !== -1) {
+            if (!config.userName || !config.userName.setName || !config.userName.lastName) {
+                throw new Error("You must provide a `userName` object containing `setName` (function) " +
+                                "and `lastName` (object) if you want to display the user admin menu.")
+            }
             var $displayedName = $('<span>', {'class': USERNAME_CLS});
             var accountName = null; //TODO Cryptpad.getStore().getAccountName()
             var account = typeof accountName === "string";
@@ -388,6 +405,7 @@ define([
                     });
                 });
             }
+        }
 
         return $userContainer;
     };
@@ -474,19 +492,20 @@ define([
         config = config || {};
         var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
         var Cryptpad = config.common;
+        config.displayed = config.displayed || [];
 
         var toolbar = createRealtimeToolbar($container);
-        var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly, Cryptpad) : undefined;
+        var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), config, readOnly, Cryptpad);
         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), config, lagElement, Cryptpad);
-        var spinner = createSpinner($userAdminElement);
+        var spinner = createSpinner($userAdminElement, config);
         var userData = config.userData;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
         var saveElement;
         var loadElement;
-        var $stateElement = $userAdminElement.find('.' + STATE_CLS);
+        var $stateElement = toolbar.find('.' + STATE_CLS);
 
         var connected = false;
 
@@ -524,7 +543,7 @@ define([
                 if (users.indexOf(myUserName) !== -1) { connected = true; }
                 if (!connected) { return; }
                 checkSynchronizing(users, myUserName, $stateElement);
-                updateUserList(myUserName, userListElement, users, userData, readOnly, $userAdminElement);
+                updateUserList(config, myUserName, userListElement, users, userData, readOnly, $userAdminElement);
             });
         } else {
             userList.change.push(function () {

www/drive/main.js

@@ -1747,6 +1747,7 @@ define([
             var userList = APP.userList = info.userList;
             APP.userName = {};
             var config = {
+                displayed: ['useradmin', 'language', 'spinner', 'lag', 'state'],
                 readOnly: readOnly,
                 ifrw: window,
                 common: Cryptpad,

www/pad/main.js

@@ -568,6 +568,7 @@ define([
                 });
 
                 var config = {
+                    displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
                     userData: userData,
                     readOnly: readOnly,
                     ifrw: ifrw,

www/poll/main.js

@@ -652,6 +652,7 @@ define([
         });
 
         var config = {
+            displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
             userData: userData,
             readOnly: readOnly,
             title: {

www/slide/main.js

@@ -418,6 +418,7 @@ define([
                 });
 
                 var config = {
+                    displayed: ['useradmin', 'language', 'spinner', 'lag', 'state', 'share', 'userlist'],
                     userData: userData,
                     readOnly: readOnly,
                     ifrw: ifrw,