Toolbar improvements

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 {