Use the new dropdown for userlist and share

customize.dist/main.css

@@ -334,10 +334,12 @@
   position: relative;
   display: inline-block;
 }
-.dropdown-bar button .fa {
+.dropdown-bar .fa {
-  margin-left: 5px;
   font-family: FontAwesome;
 }
+.dropdown-bar button .fa-caret-down {
+  margin-left: 5px;
+}
 .dropdown-bar .dropdown-bar-content {
   display: none;
   position: absolute;
@@ -373,6 +375,29 @@
   height: 1px;
   background: #bbb;
 }
+.dropdown-bar .dropdown-bar-content p {
+  width: 210px;
+  padding: 5px;
+  margin: 0;
+  white-space: normal;
+}
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
+  text-align: baseline;
+}
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .yourself,
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .anonymous,
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .viewer {
+  font-style: italic;
+}
+.dropdown-bar .dropdown-bar-content p h2 {
+  font-weight: bold;
+  text-align: center;
+  background-color: #EEEEEE;
+  padding: 5px 0px;
+  margin: 5px 0px;
+  font-size: 16px;
+  white-space: normal;
+}
 html.cp,
 .cp body {
   font-size: .875em;

customize.dist/src/less/dropdown.less

@@ -12,11 +12,14 @@
         }
     }
 
-    button {
+    .fa {
-        .fa{
-            margin-left: 5px;
         font-family: FontAwesome;
     }
+
+    button {
+        .fa-caret-down{
+            margin-left: 5px;
+        }
     }
 
     .dropdown-bar-content {
@@ -58,6 +61,28 @@
             height: 1px;
             background: #bbb;
         }
+
+        p {
+            width: 210px;
+            padding: 5px;
+            margin: 0;
+            white-space: normal;
+            &.cryptpad-dropdown-users {
+                text-align:baseline;
+                .yourself, .anonymous, .viewer {
+                    font-style: italic;
+                }
+            }
+            h2 {
+                font-weight: bold;
+                text-align: center;
+                background-color: #EEEEEE;
+                padding: 5px 0px;
+                margin: 5px 0px;
+                font-size: 16px;
+                white-space: normal;
+            }
+        }
     }
 }
 

customize.dist/src/less/toolbar.less

@@ -65,6 +65,11 @@
         margin: 3px 2px;
     }
 
+    .dropdown-bar-content {
+        margin-top: -3px;
+        margin-right: 2px;
+    }
+
     button {
         background-color: inherit;
         background-image: linear-gradient(to bottom,#fff,#e4e4e4);
@@ -74,14 +79,17 @@
         &:hover {
             background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
         }
-        &.userlist {
+    }
+
+    .large {
         @media screen and (max-width: 800px) {
             display: none;
         }
         @media screen and (min-width: 801px) {
             display: inline-block;
         }
-            &.small {
+    }
+    .small {
         @media screen and (max-width: 800px) {
             display: inline-block;
         }
@@ -89,8 +97,6 @@
             display: none;
         }
     }
-        }
-    }
 
     .cryptpad-state {
         line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
@@ -262,54 +268,9 @@
     .cryptpad-user-list {
         float: right;
     }
-    .cryptpad-dropdown-container {
-        position: relative;
-        display: inline-block;
-        padding: 0px;
-        .cryptpad-dropdown {
-            z-index:1000;
-            display:none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            overflow: auto;
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-            height: auto;
-            padding: 5px;
-            white-space: normal;
-            p {
-                width: 210px;
-                padding: 0;
-                margin: 0;
-                white-space: normal;
-                &.cryptpad-dropdown-users {
-                    text-align:baseline;
-                    .yourself, .anonymous, .viewer {
-                        font-style: italic;
-                    }
-                }
-                h2 {
-                    font-weight: bold;
-                    text-align: center;
-                    background-color: #EEEEEE;
-                    padding: 5px 0px;
-                    margin: 5px 0px;
-                    font-size: 16px;
-                    white-space: normal;
-                }
-            }
-            button {
-                white-space: normal;
-                margin: 2px 0px;
-            }
-        }
-    }
     button {
         margin: 2px 4px 2px 0px;
     }
-    .cryptpad-userbuttons-container {
-        /*display: none;*/
-    }
 }
 .cryptpad-toolbar-rightside {
     text-align: right;

customize.dist/toolbar.css

@@ -3,10 +3,12 @@
   position: relative;
   display: inline-block;
 }
-.dropdown-bar button .fa {
+.dropdown-bar .fa {
-  margin-left: 5px;
   font-family: FontAwesome;
 }
+.dropdown-bar button .fa-caret-down {
+  margin-left: 5px;
+}
 .dropdown-bar .dropdown-bar-content {
   display: none;
   position: absolute;
@@ -42,6 +44,29 @@
   height: 1px;
   background: #bbb;
 }
+.dropdown-bar .dropdown-bar-content p {
+  width: 210px;
+  padding: 5px;
+  margin: 0;
+  white-space: normal;
+}
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users {
+  text-align: baseline;
+}
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .yourself,
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .anonymous,
+.dropdown-bar .dropdown-bar-content p.cryptpad-dropdown-users .viewer {
+  font-style: italic;
+}
+.dropdown-bar .dropdown-bar-content p h2 {
+  font-weight: bold;
+  text-align: center;
+  background-color: #EEEEEE;
+  padding: 5px 0px;
+  margin: 5px 0px;
+  font-size: 16px;
+  white-space: normal;
+}
 .unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -109,6 +134,10 @@
   padding-left: 5px;
   margin: 3px 2px;
 }
+.cryptpad-toolbar .dropdown-bar-content {
+  margin-top: -3px;
+  margin-right: 2px;
+}
 .cryptpad-toolbar button {
   background-color: inherit;
   background-image: linear-gradient(to bottom, #fff, #e4e4e4);
@@ -120,22 +149,22 @@
   background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
 }
 @media screen and (max-width: 800px) {
-  .cryptpad-toolbar button.userlist {
+  .cryptpad-toolbar .large {
     display: none;
   }
 }
 @media screen and (min-width: 801px) {
-  .cryptpad-toolbar button.userlist {
+  .cryptpad-toolbar .large {
     display: inline-block;
   }
 }
 @media screen and (max-width: 800px) {
-  .cryptpad-toolbar button.userlist.small {
+  .cryptpad-toolbar .small {
     display: inline-block;
   }
 }
 @media screen and (min-width: 801px) {
-  .cryptpad-toolbar button.userlist.small {
+  .cryptpad-toolbar .small {
     display: none;
   }
 }
@@ -310,56 +339,9 @@
 .cryptpad-toolbar-leftside .cryptpad-user-list {
   float: right;
 }
-.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
-  position: relative;
-  display: inline-block;
-  padding: 0px;
-}
-.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown {
-  z-index: 1000;
-  display: none;
-  position: absolute;
-  background-color: #f9f9f9;
-  min-width: 160px;
-  overflow: auto;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  height: auto;
-  padding: 5px;
-  white-space: normal;
-}
-.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p {
-  width: 210px;
-  padding: 0;
-  margin: 0;
-  white-space: normal;
-}
-.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 .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 {
-  font-weight: bold;
-  text-align: center;
-  background-color: #EEEEEE;
-  padding: 5px 0px;
-  margin: 5px 0px;
-  font-size: 16px;
-  white-space: normal;
-}
-.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button {
-  white-space: normal;
-  margin: 2px 0px;
-}
 .cryptpad-toolbar-leftside button {
   margin: 2px 4px 2px 0px;
 }
-.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
-  /*display: none;*/
-}
 .cryptpad-toolbar-rightside {
   text-align: right;
 }

www/common/cryptpad-common.js

@@ -850,9 +850,9 @@ define([
                 }
                 break;
             case 'editshare':
-                button = $('<button>', {
+                button = $('<a>', {
                     title: Messages.editShareTitle,
-                }).text(Messages.editShare);
+                }).html('<span class="fa fa-users" style="font-family:FontAwesome;"></span>').append(' ' + Messages.editShare);
                 if (data && data.editHash) {
                     var editHash = data.editHash;
                     button.click(function () {
@@ -868,9 +868,9 @@ define([
                 }
                 break;
             case 'viewshare':
-                button = $('<button>', {
+                button = $('<a>', {
                     title: Messages.viewShareTitle,
-                }).text(Messages.viewShare);
+                }).html('<span class="fa fa-eye" style="font-family:FontAwesome;"></span>').append(' ' + Messages.viewShare);
                 if (data && data.viewHash) {
                     button.click(function () {
                         var baseUrl = window.location.origin + window.location.pathname + '#';
@@ -885,9 +885,9 @@ define([
                 }
                 break;
             case 'viewopen':
-                button = $('<button>', {
+                button = $('<a>', {
                     title: Messages.viewOpenTitle,
-                }).text(Messages.viewOpen);
+                }).html('<span class="fa fa-eye" style="font-family:FontAwesome;"></span>').append(' ' + Messages.viewOpen);
                 if (data && data.viewHash) {
                     button.click(function () {
                         var baseUrl = window.location.origin + window.location.pathname + '#';
@@ -951,7 +951,7 @@ define([
         // Button
         var $button = $('<button>', {
             'class': ''
-        }).append($('<span>', {'class': 'buttonTitle'}).text(config.text || ""));
+        }).append($('<span>', {'class': 'buttonTitle'}).html(config.text || ""));
         $('<span>', {
             'class': 'fa fa-caret-down',
         }).appendTo($button);
@@ -969,7 +969,16 @@ define([
 
         $button.click(function (e) {
             e.stopPropagation();
-            $innerblock.toggle();
+            var state = $innerblock.is(':visible');
+            $('.dropdown-bar-content').hide();
+            $('iframe').each(function (idx, ifrw) {
+                $(ifrw).contents().find('.dropdown-bar-content').hide();
+            });
+            if (state) {
+                $innerblock.hide();
+                return;
+            }
+            $innerblock.show();
         });
 
         return $container;

www/common/toolbar.js

@@ -33,6 +33,7 @@ define([
     var USERLIST_CLS = Bar.constants.userlist = "cryptpad-dropdown-users";
     var EDITSHARE_CLS = Bar.constants.editShare = "cryptpad-dropdown-editShare";
     var VIEWSHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-viewShare";
+    var SHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-share";
     var DROPDOWN_CONTAINER_CLS = Bar.constants.dropdownContainer = "cryptpad-dropdown-container";
     var DROPDOWN_CLS = Bar.constants.dropdown = "cryptpad-dropdown";
     var TITLE_CLS = Bar.constants.title = "cryptpad-title";
@@ -95,75 +96,37 @@ define([
         }, SPINNER_DISAPPEAR_TIME);
     };
 
-    var createUserButtons = function ($userlistElement, readOnly) {
+    var createUserButtons = function ($userlistElement, readOnly, Cryptpad) {
-        var $listElement = $('<span>', {
-            id: 'userButtons',
-            'class': USERBUTTONS_CONTAINER_CLS
-        }).appendTo($userlistElement);
-
-        var createHandler = function ($elmt) {
-            return function () {
-                if ($elmt.is(':visible')) {
-                    $elmt.hide();
-                    return;
-                }
-                $userlistElement.find('.' + DROPDOWN_CLS).hide();
-                $elmt.show();
-            };
-        };
-
-        var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
-
         // User list button
-        var $editIcon = $('<button>', {
+        var dropdownConfig = {
-            'class': 'userlist dropbtn edit',
+            options: [{
-        });
+                tag: 'p',
-        var $editIconSmall = $editIcon.clone().addClass('small');
+                attributes: {'class': USERLIST_CLS},
-        var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
+            }] // Entries displayed in the menu
-        var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
+        };
-        var $dropdownEdit = $('<div>', {
+        var $block = Cryptpad.createDropdown(dropdownConfig);
-            id: "cryptpad-dropdown-edit",
+        $block.attr('id', 'userButtons');
-            'class': DROPDOWN_CLS
+        $userlistElement.append($block);
-        }).append($dropdownEditUsers); //.append($dropdownEditShare);
-        $editIcon.click(createHandler($dropdownEdit));
-        $editIconSmall.click(createHandler($dropdownEdit));
-        $dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit);
-        $listElement.append($dropdownEditContainer);
 
         // Share button
-        var fa_share = '<span class="fa fa-share-alt" style="font-family:FontAwesome;"></span>';
+        var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-        var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>';
+        var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton);
-        var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
+        var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
-        var $shareIcon = $('<button>', {
+        var dropdownConfigShare = {
-            'class': 'userlist dropbtn share',
+            text: $('<div>').append($span).append($spanSmall).html(),
-        }).html(fa_share + ' ' + Messages.shareButton + ' ' + fa_caretdown);
+            options: []
-        var $shareIconSmall = $shareIcon.clone().addClass('small').html(fa_share + ' ' + fa_caretdown);
+        };
-        var $shareTitle = $('<h2>').html(fa_editusers + ' ' + Messages.shareEdit);
+        var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
-        var $shareTitleView = $('<h2>').html(fa_viewusers + ' ' + Messages.shareView);
+        $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
-        var $dropdownShareP = $('<p>', {'class': EDITSHARE_CLS}).append($shareTitle);
+        $userlistElement.append($shareBlock);
-        var $dropdownSharePView = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitleView);
-        var $dropdownShareContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
-        var $dropdownShare = $('<div>', {
-            id: "cryptpad-dropdown-share",
-            'class': DROPDOWN_CLS
-        });
-        if (readOnly !== 1) {
-            // Hide the "Share edit URL" section when in read-only mode
-            $dropdownShare.append($dropdownShareP);
-        }
-        $dropdownShare.append($dropdownSharePView);
-        $shareIcon.click(createHandler($dropdownShare));
-        $shareIconSmall.click(createHandler($dropdownShare));
-        $dropdownShareContainer.append($shareIcon).append($shareIconSmall).append($dropdownShare);
-        $listElement.append($dropdownShareContainer);
     };
 
-    var createUserList = function ($container, readOnly) {
+    var createUserList = function ($container, readOnly, Cryptpad) {
         var $userlist = $('<div>', {
             'class': USER_LIST_CLS,
             id: uid(),
         });
-        createUserButtons($userlist, readOnly);
+        createUserButtons($userlist, readOnly, Cryptpad);
         $container.append($userlist);
         return $userlist[0];
     };
@@ -260,8 +223,11 @@ 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);
+        // $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);
+        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
         var $userElement = $userAdminElement.find('.' + USERNAME_CLS);
@@ -368,11 +334,6 @@ define([
         // Dropdown language selector
         Cryptpad.createLanguageSelector($userContainer);
 
-        /*$select.on('mousedown', function (e) {
-            e.stopPropagation();
-            return true;
-        });*/
-
         var $usernameElement = $('<span>', {'class': USERNAME_CLS}).appendTo($userContainer);
 
         return $userContainer;
@@ -462,7 +423,7 @@ define([
         var Cryptpad = config.common;
 
         var toolbar = createRealtimeToolbar($container);
-        var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly) : undefined;
+        var userListElement = config.userData ? createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly, Cryptpad) : undefined;
         var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
         var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
         var lagElement = createLagElement();
@@ -478,9 +439,6 @@ define([
 
         if (config.ifrw) {
             var removeDropdowns =  function (e) {
-                if ($(e.target).parents('.cryptpad-dropdown-container').length) {
-                    return;
-                }
                 $container.find('.cryptpad-dropdown').hide();
             };
             var cancelEditTitle = function (e) {

www/pad/main.js

@@ -618,6 +618,9 @@ define([
 
                 if (!readOnly) {
                     $editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
+                    if (viewHash) {
+                        $editShare.append($('<hr>'));
+                    }
                 }
                 if (viewHash) {
                     /* add a 'links' button */