Toolbar improvements

customize.dist/src/less/dropdown.less

@@ -26,7 +26,7 @@
     .dropdown-bar-content {
         display: none;
         position: absolute;
-        background-color: #f9f9f9;
+        background-color: @dropdown-bg;
         min-width: 250px;
         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
         z-index: 1000;
@@ -45,7 +45,7 @@
         }
 
         a {
-            color: black;
+            color: @dropdown-color;
             padding: 5px 16px;
             text-decoration: none;
             display: flex;
@@ -56,8 +56,7 @@
             user-select: none;
             float: none;
             text-align: left;
-            font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-            font-size: 16px;
+            font: @dropdown-font;
             line-height: 1em;
 
 
@@ -68,13 +67,13 @@
             }
 
             &:hover {
-                background-color: #f1f1f1;
-                color: black;
+                background-color: @dropdown-bg-hover;
+                color: @dropdown-color;
             }
 
             &.active {
-                background-color: #e8e8e8;
-                color: black;
+                background-color: @dropdown-bg-active;
+                color: @dropdown-color;
             }
         }
 

customize.dist/src/less/toolbar.less

@@ -12,15 +12,6 @@
     user-select: none;
 }
 
-.toolbar-container {
-    font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
-    .two-part-gradient(@toolbar-gradient-start, @toolbar-gradient-end);
-    .cryptpad-toolbar {
-        select {
-            box-sizing: border-box;
-        }
-    }
-}
 .cke_reset_all * {
     color: inherit;
 }
@@ -132,10 +123,21 @@ body {
                     color: @color;
                 }
             }
+            .cryptpad-spinner, .cryptpad-state {
+                color: @color;
+            }
             .cryptpad-limit {
                 text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
             }
-            .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
+            .cryptpad-lag {
+                .bars {
+                    span {
+                        background: @color;
+                        border: 1px solid darken(@bgcolor, 20%);
+                    }
+                }
+            }
+            .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
                 background-color: lighten(@bgcolor, 8%);
                 button:hover, button.active {
                     background-color: @bgcolor;
@@ -263,7 +265,7 @@ body {
 
     .unselectable;
 
-    font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    font: @toolbar-button-font;
     width: 100%;
     z-index: 9001;
 
@@ -294,43 +296,12 @@ body {
     button {
         transition: all 0.15s;
         .unselectable();
-        &#shareButton, &.buttonSuccess {
-            // Bootstrap 4 colors
-            color: #fff;
-            background: @toolbar-green;
-            border-color: @toolbar-green;
-            &:hover {
-                color: #fff;
-                background: #449d44;
-                border: 1px solid #419641;
-            }
-            span {
-                color: #fff;
-            }
-            .large {
-                margin-left: 5px;
-            }
-        }
-        &#newdoc, &.buttonPrimary {
-            // Bootstrap 4 colors
-            color: #fff;
-            background: #0275d8;
-            border-color: #0275d8;
-            &:hover {
-                color: #fff;
-                background: #025aa5;
-                border: 1px solid #01549b;
-            }
-            span {
-                color: #fff;
-            }
-            .large {
-                margin-left: 5px;
-            }
-        }
         &.hidden {
             display: none;
         }
+        .drawer {
+            display: none;
+        }
         // Bootstrap 4 colors (btn-secondary)
         border: 1px solid transparent;
         border-radius: .25rem;
@@ -359,8 +330,7 @@ body {
         width: 26px;
         display: inline-block;
         padding: 3px;
-        margin: 0px;
-        margin-right: 3px;
+        margin: 0px 3px 0 6px;
         vertical-align: middle;
         line-height: @toolbar-top-height;
         span {
@@ -377,6 +347,11 @@ body {
 
     .cryptpad-state {
         line-height: @toolbar-top-height;
+        padding: 0 5px;
+        color: inherit;
+        &:empty {
+            display: none;
+        }
     }
     .cryptpad-lag {
         display: inline-block;
@@ -429,38 +404,29 @@ body {
         &.lag0 {
             span span {
                 .clag();
-                //border-color: red;
             }
         }
         &.lag1 {
             .bar2, .bar3, .bar4 { .clag(); }
             span span {
                 visibility: visible;
-                //background-color: orange;
-                //border-color: orange;
             }
         }
         &.lag2 {
             .bar3, .bar4 { .clag(); }
             span span {
                 visibility: visible;
-                //background-color: orange;
-                //border-color: orange;
             }
         }
         &.lag3 {
             .bar4 { .clag(); }
             span span {
                 visibility: visible;
-                //background-color: @toolbar-green;
-                //border-color: @toolbar-green;
             }
         }
         &.lag4 {
             span span {
                 visibility: visible;
-                //background-color: @toolbar-green;
-                //border-color: @toolbar-green;
             }
         }
     }
@@ -644,10 +610,27 @@ body {
         align-items: center;
         line-height: @toolbar-top-height;
         margin: 0 10px;
-        .title, .pencilIcon, .saveIcon {
+        .title {
             font-size: 25px;
             vertical-align: middle;
             line-height: 25px;
+            white-space: nowrap;
+        }
+        .pencilIcon, .saveIcon {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            vertical-align: middle;
+            line-height: 20px;
+            .fa {
+                font-size: 20px;
+            }
+        }
+        .readOnly {
+            margin-left: 10px;
+            font-size: 25px;
+            font-style: italic;
+            white-space: nowrap;
         }
         .hoverable {
             display: inline-flex;
@@ -659,7 +642,6 @@ body {
             padding: 5px;
             border-collapse: collapse;
             span {
-                font-size: 25px;
                 cursor: pointer;
             }
         }
@@ -668,7 +650,6 @@ body {
             padding: 5px;
             border-collapse: collapse;
             span {
-                font-size: 25px;
                 cursor: pointer;
             }
         }
@@ -875,44 +856,42 @@ body {
         display: none;
     }
     .drawer-content {
+        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
         position: absolute;
         right:0px;
         margin-top: 32px;
         min-width: 50px;
-        background: white;
-        border: 1px solid black;
+        background: @dropdown-bg;
         display: flex;
         flex-flow: column;
         z-index:1000;
+        color: black;
         .fa {
             font-size: 17px;
         }
         &> span {
             box-sizing: border-box;
-            width: 150px;
+            min-width: 150px;
             height: 26px;
             border-radius: 0;
             border: 0;
-            &:not(:last-child) {
-                border-bottom: 1px solid rgba(0,0,0,0.2);
-            }
-            button {
-                border: 0;
-            }
         }
         button {
-            width: 100%;
-        }
-        &> button {
-            text-align: center;
+            padding: 5px 16px;
+            text-align: left;
             margin: 0;
             border-radius: 0;
-            border: 1px solid transparent;
-            &:hover {
-                border: 1px solid transparent;
+            border: 0;
+            width: 100%;
+            line-height: 1em;
+            .drawer {
+                margin-left: 10px;
+                display: inline;
+                vertical-align: top;
             }
-            &:not(:last-child) {
-                border-bottom: 1px solid rgba(0,0,0,0.2);
+            &:hover {
+                background-color: @dropdown-bg-hover !important;
+                color: @dropdown-color;
             }
         }
     }
@@ -951,12 +930,12 @@ body {
 }
 .cryptpad-spinner {
     line-height: @toolbar-top-height;
-    &> span {
-        height: 16px;
-        width: 16px;
+    &> span.fa {
+        height: 20px;
+        width: 20px;
         margin: 8px;
-        line-height: 16px;
-        font-size: 16px;
+        line-height: 20px;
+        font-size: 20px;
         text-align: center;
     }
 }

customize.dist/src/less/variables.less

@@ -70,11 +70,19 @@
 @media-narrow-screen: 400px;
 @media-medium-screen: 600px;
 
-@toolbar-gradient-start: #f5f5f5;
-@toolbar-gradient-end: #DDDDDD;
-@toolbar-button-font: 12px Ubuntu, Arial, sans-serif;
+
+// Dropdown
+
+@dropdown-font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+@dropdown-bg: #f9f9f9;
+@dropdown-color: black;
+@dropdown-bg-hover: #f1f1f1;
+@dropdown-bg-active: #e8e8e8;
 
 // Toolbar
+
+@toolbar-button-font: @dropdown-font;
+
 @toolbar-pad-bg: #1c4fa0;
 @toolbar-pad-color: #fff;
 @toolbar-slide-bg: #e57614;

customize.dist/translations/messages.fr.js

@@ -86,8 +86,12 @@ define(function () {
     out.pinLimitDrive = out.pinLimitReached+ ".<br>" +
                         "Vous ne pouvez pas créer de nouveaux pads.";
 
+    out.moreActions = "Autres actions";
+
+    out.importButton = "Importer";
     out.importButtonTitle = 'Importer un pad depuis un fichier local';
 
+    out.exportButton = "Exporter";
     out.exportButtonTitle = 'Exporter ce pad vers un fichier local';
     out.exportPrompt = 'Comment souhaitez-vous nommer ce fichier ?';
 
@@ -99,6 +103,7 @@ define(function () {
     out.clickToEdit = 'Cliquer pour modifier';
     out.saveTitle = "Enregistrer le titre (Entrée)";
 
+    out.forgetButton = "Supprimer";
     out.forgetButtonTitle = 'Déplacer ce pad vers la corbeille';
     out.forgetPrompt = 'Cliquer sur OK déplacera ce pad vers la corbeille de votre CryptDrive, êtes-vous sûr ?';
     out.movedToTrash = 'Ce pad a été déplacé vers la corbeille.<br><a href="/drive/">Accéder à mon Drive</a>';
@@ -124,6 +129,7 @@ define(function () {
     out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation';
     out.colorButtonTitle = 'Changer la couleur du texte en mode présentation';
 
+    out.printText = "Imprimer";
     out.printButton = "Imprimer (Entrée)";
     out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
     out.printOptions = "Options de mise en page";
@@ -139,6 +145,7 @@ define(function () {
     out.filePicker_filter = "Filtrez les fichiers par leur nom";
     out.or = 'ou';
 
+    out.slideOptionsText = "Options";
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";
 
@@ -165,6 +172,7 @@ define(function () {
     out.cancel = "Annuler";
     out.cancelButton = 'Annuler (Echap)';
 
+    out.historyText = "Historique";
     out.historyButton = "Afficher l'historique du document";
     out.history_next = "Voir la version suivante";
     out.history_prev = "Voir la version précédente";

customize.dist/translations/messages.js

@@ -88,8 +88,12 @@ define(function () {
     out.pinLimitDrive = "You've reached your storage limit.<br>" +
                         "You can't create new pads.";
 
+    out.moreActions = "More actions";
+
+    out.importButton = "Import";
     out.importButtonTitle = 'Import a pad from a local file';
 
+    out.exportButton = "Export";
     out.exportButtonTitle = 'Export this pad to a local file';
     out.exportPrompt = 'What would you like to name your file?';
 
@@ -101,6 +105,7 @@ define(function () {
     out.clickToEdit = "Click to edit";
     out.saveTitle = "Save the title (enter)";
 
+    out.forgetButton = "Delete";
     out.forgetButtonTitle = 'Move this pad to the trash';
     out.forgetPrompt = 'Clicking OK will move this pad to your trash. Are you sure?';
     out.movedToTrash = 'That pad has been moved to the trash.<br><a href="/drive/">Access my Drive</a>';
@@ -126,6 +131,7 @@ define(function () {
     out.backgroundButtonTitle = 'Change the background color in the presentation';
     out.colorButtonTitle = 'Change the text color in presentation mode';
 
+    out.printText = "Print";
     out.printButton = "Print (enter)";
     out.printButtonTitle = "Print your slides or export them as a PDF file";
     out.printOptions = "Layout options";
@@ -141,6 +147,7 @@ define(function () {
     out.filePicker_filter = "Filter files by name";
     out.or = 'or';
 
+    out.slideOptionsText = "Options";
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";
 
@@ -167,6 +174,7 @@ define(function () {
     out.cancel = "Cancel";
     out.cancelButton = 'Cancel (esc)';
 
+    out.historyText = "History";
     out.historyButton = "Display the document history";
     out.history_next = "Go to the next version";
     out.history_prev = "Go to the previous version";

www/code/main.js

@@ -161,6 +161,7 @@ define([
                         if (e) { return void console.error(e); }
                         if (data !== false) {
                             $previewContainer.show();
+                            APP.$previewButton.addClass('active');
                             $codeMirror.removeClass('fullPage');
                         }
                     });
@@ -168,6 +169,7 @@ define([
                 }
                 APP.$previewButton.hide();
                 $previewContainer.hide();
+                APP.$previewButton.removeClass('active');
                 $codeMirror.addClass('fullPage');
             };
 
@@ -272,8 +274,10 @@ define([
                         Cryptpad.setPadAttribute('previewMode', true, function (e) {
                             if (e) { return console.log(e); }
                         });
+                        $previewButton.addClass('active');
                     } else {
                         $codeMirror.addClass('fullPage');
+                        $previewButton.removeClass('active');
                         Cryptpad.setPadAttribute('previewMode', false, function (e) {
                             if (e) { return console.log(e); }
                         });

www/common/cryptpad-common.js

@@ -942,9 +942,11 @@ define([
         var size = "17px";
         switch (type) {
             case 'export':
+                var $text = $('<span>', {'class': 'drawer'}).text(Messages.exportButton);
                 button = $('<button>', {
+                    'class': 'fa fa-download',
                     title: Messages.exportButtonTitle,
-                }).append($('<span>', {'class':'fa fa-download', style: 'font:'+size+' FontAwesome'}));
+                }).append($text);
 
                 button.click(prepareFeedback(type));
                 if (callback) {
@@ -952,9 +954,11 @@ define([
                 }
                 break;
             case 'import':
+                var $text = $('<span>', {'class': 'drawer'}).text(Messages.importButton);
                 button = $('<button>', {
+                    'class': 'fa fa-upload',
                     title: Messages.importButtonTitle,
-                }).append($('<span>', {'class':'fa fa-upload', style: 'font:'+size+' FontAwesome'}));
+                }).append($text);
                 if (callback) {
                     button
                     .click(prepareFeedback(type))
@@ -1104,10 +1108,11 @@ define([
                     button = $('<span>');
                     break;
                 }
+                var $text = $('<span>', {'class': 'drawer'}).text(Messages.historyText);
                 button = $('<button>', {
                     title: Messages.historyButton,
                     'class': "fa fa-history history",
-                });
+                }).append($text);
                 if (data.histConfig) {
                     button
                     .click(prepareFeedback(type))

www/common/toolbar2.js

@@ -85,6 +85,10 @@ define([
             var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
             $drawer.click(function () {
                 $drawerContent.toggle();
+                $drawer.removeClass('active');
+                if ($drawerContent.is(':visible')) {
+                    $drawer.addClass('active');
+                }
             });
         }
 
@@ -463,6 +467,10 @@ define([
             'class': 'saveIcon',
             'title': Messages.saveTitle
         }).hide();
+        if (config.readOnly === 1) {
+            $titleContainer.append($('<span>', {'class': 'readOnly'})
+                .text('('+Messages.readonly+')'));
+        }
         if (config.readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; }
         var $input = $('<input>', {
             type: 'text',

www/drive/file.less

@@ -630,6 +630,9 @@ span {
             font-size: 17px;
             color: @toolbar-drive-color;
             transition: all 0.15s;
+            .drawer {
+                display: none;
+            }
             .fa, span {
                 font-size: 17px;
             }

www/slide/main.js

@@ -440,12 +440,14 @@ define([
                         Cryptpad.setPadAttribute('previewMode', false, function (e) {
                             if (e) { return console.log(e); }
                         });
+                        $previewButton.removeClass('active');
                         return void $c.removeClass('preview');
                     }
                     Cryptpad.setPadAttribute('previewMode', true, function (e) {
                         if (e) { return console.log(e); }
                     });
                     $c.addClass('preview');
+                    $previewButton.addClass('active');
                     Slide.updateFontSize();
                 });
                 $rightside.append($previewButton);
@@ -464,7 +466,7 @@ define([
                         }
                     }, {ok: Messages.printButton});
                     //$('body').append(createPrintDialog());
-                });
+                }).append($('<span>', {'class': 'drawer'}).text(Messages.printText));
                 $drawer.append($printButton);
 
                 var $slideOptions = $('<button>', {
@@ -473,7 +475,7 @@ define([
                     style: 'font-size: 17px'
                 }).click(function () {
                     $('body').append(createPrintDialog());
-                });
+                }).append($('<span>', {'class': 'drawer'}).text(Messages.slideOptionsText));
                 $drawer.append($slideOptions);
 
                 var $present = Cryptpad.createButton('present', true)

www/slide/slide.less

@@ -118,6 +118,9 @@ body {
                 max-width: 177.78vh; // 16/9 = 1.778
             }
         }
+        #button_exit {
+            visibility: hidden;
+        }
     }
 }
 .cp {