Add file menu

customize.dist/src/less2/include/toolbar.less

@@ -1027,7 +1027,9 @@ color: var(--toolbar-bg-color);
         button {
             margin: 0px;
             border-radius: 0;
-            height: 100%;
+            height: @toolbar_line-height;
+            display: inline-flex;
+            align-items: center;
             .fa {
                 margin-right: 5px;
             }
@@ -1053,6 +1055,82 @@ color: var(--toolbar-bg-color);
             #cp-toolbar-chat-drawer-open { order: 0; }
             #cp-toolbar-userlist-drawer-open { order: 1; }
         }
+
+        .cp-toolbar-bottom-left {
+            .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
+                display: none;
+            }
+            .cp-toolbar-drawer-content {
+                box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+                position: absolute;
+                left: 0px;
+                margin-top: @toolbar_line-height;
+                min-width: 50px;
+                background: @colortheme_dropdown-bg;
+                display: flex;
+                flex-flow: column;
+                z-index: 10000; //Z cp-toolbar-drawer-content
+                color: black;
+                .fa {
+                    font-size: 17px;
+                }
+                &> span {
+                    order: 8;
+                    box-sizing: border-box;
+                    min-width: 150px;
+                    height: @toolbar_line-height;
+                    border-radius: 0;
+                    border: 0;
+                }
+                button {
+                    padding: 5px 16px;
+                    text-align: left;
+                    margin: 0;
+                    border-radius: 0;
+                    border: 0;
+                    width: 100%;
+                    line-height: 1em;
+                    &.cp-toolbar-button-active {
+                        background-color: inherit;
+                    }
+                    .cp-toolbar-drawer-element {
+                        margin-left: 10px;
+                        display: inline;
+                        vertical-align: baseline;
+                    }
+                    &.fa-info-circle, &.fa-history, &.fa-cog {
+                        .cp-toolbar-drawer-element {
+                            margin-left: 11px;
+                        }
+                    }
+                    &.fa-unlock-alt {
+                        .cp-toolbar-drawer-element {
+                            margin-left: 15px;
+                        }
+                    }
+                    &.fa-question {
+                        .cp-toolbar-drawer-element {
+                            margin-left: 16px;
+                        }
+                    }
+                    &:hover {
+                        background-color: @colortheme_dropdown-bg-hover !important;
+                        color: @colortheme_dropdown-color;
+                    }
+                    order: 8;
+                    &.fa-history { order: 1; }
+                    &.fa-clone { order: 1; }
+                    &.fa-download { order: 2; }
+                    &.fa-upload { order: 3; }
+                    &.fa-print { order: 4; }
+                    &.fa-arrows-h { order: 5; }
+                    &.fa-cog { order: 5; }
+                    &.fa-paint-brush { order: 5; }
+                    &.fa-info-circle { order: 6; }
+                    &.fa-help { order: 7; }
+                }
+            }
+        }
     }
 
     .cp-toolbar-leftside {
@@ -1131,79 +1209,6 @@ color: var(--toolbar-bg-color);
 
         }
 
-        .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
-            display: none;
-        }
-        .cp-toolbar-drawer-content {
-            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
-            position: absolute;
-            right: 0px;
-            margin-top: @toolbar_line-height;
-            min-width: 50px;
-            background: @colortheme_dropdown-bg;
-            display: flex;
-            flex-flow: column;
-            z-index: 10000; //Z cp-toolbar-drawer-content
-            color: black;
-            .fa {
-                font-size: 17px;
-            }
-            &> span {
-                order: 8;
-                box-sizing: border-box;
-                min-width: 150px;
-                height: @toolbar_line-height;
-                border-radius: 0;
-                border: 0;
-            }
-            button {
-                padding: 5px 16px;
-                text-align: left;
-                margin: 0;
-                border-radius: 0;
-                border: 0;
-                width: 100%;
-                line-height: 1em;
-                &.cp-toolbar-button-active {
-                    background-color: inherit;
-                }
-                .cp-toolbar-drawer-element {
-                    margin-left: 10px;
-                    display: inline;
-                    vertical-align: baseline;
-                }
-                &.fa-info-circle, &.fa-history, &.fa-cog {
-                    .cp-toolbar-drawer-element {
-                        margin-left: 11px;
-                    }
-                }
-                &.fa-unlock-alt {
-                    .cp-toolbar-drawer-element {
-                        margin-left: 15px;
-                    }
-                }
-                &.fa-question {
-                    .cp-toolbar-drawer-element {
-                        margin-left: 16px;
-                    }
-                }
-                &:hover {
-                    background-color: @colortheme_dropdown-bg-hover !important;
-                    color: @colortheme_dropdown-color;
-                }
-                order: 8;
-                &.fa-history { order: 1; }
-                &.fa-clone { order: 1; }
-                &.fa-download { order: 2; }
-                &.fa-upload { order: 3; }
-                &.fa-print { order: 4; }
-                &.fa-arrows-h { order: 5; }
-                &.fa-cog { order: 5; }
-                &.fa-paint-brush { order: 5; }
-                &.fa-info-circle { order: 6; }
-                &.fa-help { order: 7; }
-            }
-        }
     }
     .cp-toolbar-spinner {
         color: @cryptpad_text_col;

www/common/common-ui-elements.js

@@ -1554,12 +1554,6 @@ define([
                     }
                 }
                 break;
-            case 'more':
-                button = $('<button>', {
-                    title: Messages.moreActions,
-                    'class': "cp-toolbar-drawer-button fa fa-ellipsis-h",
-                });
-                break;
             case 'mediatag':
                 button = $('<button>', {
                     'class': 'fa fa-picture-o cp-toolbar-icon-mediatag',
@@ -1616,17 +1610,6 @@ define([
                 });
                 updateIcon(data.element.is(':visible'));
                 break;
-            case 'access':
-                button = $('<button>', {
-                    'class': 'fa fa-unlock-alt cp-toolbar-icon-access',
-                    title: Messages.accessButton,
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
-                .text(Messages.accessButton))
-                .click(common.prepareFeedback(type))
-                .click(function () {
-                    sframeChan.event('EV_ACCESS_OPEN');
-                });
-                break;
             case 'properties':
                 button = $('<button>', {
                     'class': 'fa fa-info-circle cp-toolbar-icon-properties',

www/common/toolbar.js

@@ -81,12 +81,6 @@ MessengerUI, Messages) {
         $('<span>', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
         $('<span>', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
 
-        /*
-        $toolbar.append($topContainer)
-        .append($('<div>', {'class': LEFTSIDE_CLS}))
-        .append($('<div>', {'class': RIGHTSIDE_CLS}))
-        .append($('<div>', {'class': HISTORY_CLS}));
-        */
         $toolbar.append($topContainer);
         var $bottom = $(h('div.'+BOTTOM_CLS, [
             h('div.'+BOTTOM_LEFT_CLS),
@@ -95,13 +89,18 @@ MessengerUI, Messages) {
         ])).appendTo($toolbar);
         $toolbar.append(h('div.'+HISTORY_CLS));
 
-        var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
+        var $file = $toolbar.find('.'+BOTTOM_LEFT_CLS);
+
+        Messages.toolbar_file = "File"; // XXX
         if (!config.hideDrawer) {
             var $drawerContent = $('<div>', {
                 'class': DRAWER_CLS,
                 'tabindex': 1
-            }).appendTo($rightside).hide();
+            }).appendTo($file).hide();
-            var $drawer = Common.createButton('more', true).appendTo($rightside);
+            var $drawer = $(h('button', [
+                h('i.fa.fa-file-o'),
+                h('span.cp-button-name', Messages.toolbar_file)
+            ])).appendTo($file);
             $drawer.click(function () {
                 $drawerContent.toggle();
                 $drawer.removeClass('cp-toolbar-button-active');