Add a spinner for the history and update history buttons

customize.dist/src/less/toolbar.less

@@ -304,7 +304,6 @@ body {
         }
         // Bootstrap 4 colors (btn-secondary)
         border: 1px solid transparent;
-        border-radius: .25rem;
         color: inherit;
         font: @toolbar-button-font;
         * {
@@ -918,9 +917,22 @@ body {
     .gotoInput {
         vertical-align: middle;
     }
+    button {
+        color: inherit;
+        background-color: rgba(0,0,0,0.2);
+        &:hover {
+            background-color: rgba(0,0,0,0.4);
+        }
+    }
     .closeHistory {
         background: white;
         color: black;
+        &:hover {
+            background-color: #e6e6e6;
+        }
+    }
+    .fa-spinner {
+        font-size: 66px;
     }
 }
 .cke_toolbox .cryptpad-toolbar-history {

www/common/common-history.js

@@ -132,6 +132,13 @@ define([
         var $right = $toolbar.find('.cryptpad-toolbar-rightside');
         var $cke = $toolbar.find('.cke_toolbox_main');
 
+        $hist.html('').show();
+        $left.hide();
+        $right.hide();
+        $cke.hide();
+
+        common.spinner($hist).get().show();
+
         var onUpdate;
 
         var update = function () {
@@ -165,10 +172,7 @@ define([
 
         // Create the history toolbar
         var display = function () {
-            $hist.html('').show();
+            $hist.html('');
-            $left.hide();
-            $right.hide();
-            $cke.hide();
             var $prev =$('<button>', {
                 'class': 'previous fa fa-step-backward buttonPrimary',
                 title: Messages.history_prev
@@ -194,7 +198,7 @@ define([
             var $close = $('<button>', {
                 'class':'closeHistory',
                 title: Messages.history_closeTitle
-            }).text(Messages.history_close).appendTo($nav);
+            }).text(Messages.history_closeTitle).appendTo($nav);
             var $rev = $('<button>', {
                 'class':'revertHistory buttonSuccess',
                 title: Messages.history_restoreTitle

www/common/cryptpad-common.js

@@ -1130,15 +1130,14 @@ define([
                     button = $('<span>');
                     break;
                 }
-                var $text = $('<span>', {'class': 'drawer'}).text(Messages.historyText);
                 button = $('<button>', {
                     title: Messages.historyButton,
                     'class': "fa fa-history history",
-                }).append($text);
+                }).append($('<span>', {'class': 'drawer'}).text(Messages.historyText));
                 if (data.histConfig) {
                     button
                     .click(prepareFeedback(type))
-                    .click(function () {
+                    .on('click', function () {
                         common.getHistory(data.histConfig);
                     });
                 }

www/drive/main.js

@@ -1629,7 +1629,9 @@ define([
             $('<div>', {'class': 'leftside'}).appendTo($toolbar);
             $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
             var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
-            if (APP.$hist) { $rightside.append(APP.$hist); }
+            var $hist = Cryptpad.createButton('history', true, {histConfig: APP.histConfig});
+            $hist.addClass('element');
+            $rightside.append($hist);
             return $toolbar;
         };
 
@@ -2737,7 +2739,7 @@ define([
             }, true);
 
             /* add a history button */
-            var histConfig = {
+            APP.histConfig = {
                 onLocal: function () {
                     proxy.drive = history.currentObj.drive;
                 },
@@ -2751,9 +2753,6 @@ define([
                 $toolbar: APP.$bar,
                 href: window.location.origin + window.location.pathname + '#' + APP.hash
             };
-            APP.$hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
-            APP.$hist.addClass('element');
-            //if (APP.loggedIn) { $rightside.append($hist); } TODO
 
             if (!readOnly && !APP.loggedIn) {
                 var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');