Move help button in drawer and fix drawer style

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

@@ -855,6 +855,7 @@
                 font-size: 17px;
             }
             &> span {
+                order: 8;
                 box-sizing: border-box;
                 min-width: 150px;
                 height: @toolbar_line-height;
@@ -869,15 +870,36 @@
                 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: top;
+                    vertical-align: baseline;
+                }
+                &.fa-info-circle, &.fa-history, &.fa-cog {
+                    .cp-toolbar-drawer-element {
+                        margin-left: 11px;
+                    }
+                }
+                &.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-download { order: 2; }
+                &.fa-upload { order: 3; }
+                &.fa-print { order: 4; }
+                &.fa-cog { order: 5; }
+                &.fa-info-circle { order: 6; }
+                &.fa-help { order: 7; }
             }
         }
     }

customize.dist/translations/messages.fr.js

@@ -218,6 +218,10 @@ define(function () {
     out.cancelButton = 'Annuler (Échap)';
     out.doNotAskAgain = "Ne plus demander (Échap)";
 
+    out.show_help_button = "Afficher l'aide";
+    out.hide_help_button = "Cacher l'aide";
+    out.help_button = "Aide";
+
     out.historyText = "Historique";
     out.historyButton = "Afficher l'historique du document";
     out.history_next = "Voir la version suivante";
@@ -278,9 +282,6 @@ define(function () {
     out.poll_locked = "Verrouillé";
     out.poll_unlocked = "Déverrouillé";
 
-    out.poll_show_help_button = "Afficher l'aide";
-    out.poll_hide_help_button = "Cacher l'aide";
-
     out.poll_bookmark_col = "Marquer cette colonne comme favorite pour qu'elle soit toujours déverouillée et affichée en première position.";
     out.poll_bookmarked_col = "Voici votre colonne favorite; elle sera toujours dévérouillée et affichée en première position.";
     out.poll_total = 'TOTAL';

customize.dist/translations/messages.js

@@ -220,6 +220,10 @@ define(function () {
     out.cancelButton = 'Cancel (esc)';
     out.doNotAskAgain = "Don't ask me again (Esc)";
 
+    out.show_help_button = "Show help";
+    out.hide_help_button = "Hide help";
+    out.help_button = "Help";
+
     out.historyText = "History";
     out.historyButton = "Display the document history";
     out.history_next = "Go to the next version";
@@ -280,9 +284,6 @@ define(function () {
     out.poll_locked = "Locked";
     out.poll_unlocked = "Unlocked";
 
-    out.poll_show_help_button = "Show help";
-    out.poll_hide_help_button = "Hide help";
-
     out.poll_bookmark_col = 'Bookmark this column so that it is always unlocked and displayed at the beginning for you';
     out.poll_bookmarked_col = 'This is your bookmarked column. It will always be unlocked and displayed at the beginning for you.';
     out.poll_total = 'TOTAL';

www/code/inner.js

@@ -86,7 +86,7 @@ define([
 
         $(helpMenu.text).html(DiffMd.render(Messages.codeInitialState));
 
-        framework._.toolbar.$rightside.append(helpMenu.button);
+        framework._.toolbar.$drawer.append(helpMenu.button);
     };
     var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {
         var $previewContainer = $('#cp-app-code-preview');

www/common/common-ui-elements.js

@@ -657,6 +657,11 @@ define([
                     data.element.toggle();
                     var isVisible = data.element.is(':visible');
                     if (callback) { callback(isVisible); }
+                    if (isVisible) {
+                        button.addClass('cp-toolbar-button-active');
+                    } else {
+                        button.removeClass('cp-toolbar-button-active');
+                    }
                     updateIcon(isVisible);
                 });
                 updateIcon(data.element.is(':visible'));
@@ -681,7 +686,6 @@ define([
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
-                    style: 'font:'+size+' FontAwesome'
                 })
                 .click(common.prepareFeedback(type));
         }
@@ -861,6 +865,9 @@ define([
         var text = h('p.cp-help-text');
         var closeButton = h('span.cp-help-close.fa.fa-window-close');
         var $toolbarButton = common.createButton('', true).addClass('cp-toolbar-button-active');
+        $toolbarButton.attr('title', Messages.hide_help_button);
+        $toolbarButton
+            .append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.help_button));
         var help = h('div.cp-help-container', [
             closeButton,
             text
@@ -871,9 +878,11 @@ define([
                 if (forceClose) { return; }
                 common.setAttribute(['hideHelp', type], false);
                 $toolbarButton.addClass('cp-toolbar-button-active');
+                $toolbarButton.attr('title', Messages.hide_help_button);
                 return void $(help).removeClass('cp-help-hidden');
             }
             $toolbarButton.removeClass('cp-toolbar-button-active');
+            $toolbarButton.attr('title', Messages.show_help_button);
             $(help).addClass('cp-help-hidden');
             common.setAttribute(['hideHelp', type], true);
         };

www/pad/inner.js

@@ -143,7 +143,7 @@ define([
 
         $(helpMenu.text).html(Messages.initialState);
 
-        framework._.toolbar.$rightside.append(helpMenu.button);
+        framework._.toolbar.$drawer.append(helpMenu.button);
     };
 
     var mkDiffOptions = function (cursor, readOnly) {

www/poll/inner.js

@@ -1200,7 +1200,7 @@ define([
 
         var helpMenu = common.createHelpMenu();
         $('#cp-app-poll-form').prepend(helpMenu.menu);
-        $rightside.append(helpMenu.button);
+        $drawer.append(helpMenu.button);
         var setHTML = function (e, html) {
             e.innerHTML = html;
             return e;

www/slide/inner.js

@@ -435,7 +435,7 @@ define([
 
         $(helpMenu.text).html(DiffMd.render(Messages.slideInitialState));
 
-        framework._.toolbar.$rightside.append(helpMenu.button);
+        framework._.toolbar.$drawer.append(helpMenu.button);
     };
 
     var activateLinks = function ($content, framework) {