Update edit and publish icon and change toggle icon to make it straightforward, and add shortcut key reminder in modes' title

2 files changed, 11 insertions, 11 deletions

diff --git a/public/js/index.js b/public/js/index.js
index d9e4955f..c800cd9d 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1197,16 +1197,16 @@ function changeMode(type) {
     ui.toolbar.edit.removeClass("active");
     ui.toolbar.view.removeClass("active");
     var modeIcon = ui.toolbar.mode.find('i');
-    modeIcon.removeClass('fa-toggle-on').removeClass('fa-toggle-off');
+    modeIcon.removeClass('fa-pencil').removeClass('fa-eye');
     if (ui.area.edit.is(":visible") && ui.area.view.is(":visible")) { //both
         ui.toolbar.both.addClass("active");
         modeIcon.addClass('fa-eye');
     } else if (ui.area.edit.is(":visible")) { //edit
         ui.toolbar.edit.addClass("active");
-        modeIcon.addClass('fa-toggle-off');
+        modeIcon.addClass('fa-eye');
     } else if (ui.area.view.is(":visible")) { //view
         ui.toolbar.view.addClass("active");
-        modeIcon.addClass('fa-toggle-on');
+        modeIcon.addClass('fa-pencil');
     }
     unlockNavbar();
 }
diff --git a/public/views/header.ejs b/public/views/header.ejs
index d2b1ec1e..bb4e3174 100644
--- a/public/views/header.ejs
+++ b/public/views/header.ejs
@@ -24,7 +24,7 @@
             <ul class="dropdown-menu list" role="menu" aria-labelledby="menu">
                 <li role="presentation"><a role="menuitem" class="ui-new" tabindex="-1" href="<%- url %>/new" target="_blank"><i class="fa fa-plus fa-fw"></i> <%= __('New') %></a>
                 </li>
-                <li role="presentation"><a role="menuitem" class="ui-publish" tabindex="-1" href="#" target="_blank"><i class="fa fa-print fa-fw"></i> <%= __('Publish') %></a>
+                <li role="presentation"><a role="menuitem" class="ui-publish" tabindex="-1" href="#" target="_blank"><i class="fa fa-share-square-o fa-fw"></i> <%= __('Publish') %></a>
                 </li>
                 <li class="divider"></li>
                 <li class="dropdown-header"><%= __('Extra') %></li>
@@ -75,22 +75,22 @@
                 </li>
             </ul>
             <a class="btn btn-link ui-mode">
-                <i class="fa fa-toggle-on"></i>
+                <i class="fa fa-pencil"></i>
             </a>
         </div>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav navbar-form navbar-left" style="padding:0;">
             <div class="btn-group" data-toggle="buttons">
-                <label class="btn btn-default ui-edit" title="<%= __('Edit') %>">
-                    <input type="radio" name="mode" autocomplete="off"><i class="fa fa-edit"></i>
-                </label>
-                <label class="btn btn-default ui-view" title="<%= __('View') %>">
+                <label class="btn btn-default ui-view" title="<%= __('View') %> (Ctrl+Alt+V)">
                     <input type="radio" name="mode" autocomplete="off"><i class="fa fa-eye"></i>
                 </label>
-                <label class="btn btn-default ui-both" title="<%= __('Both') %>">
+                <label class="btn btn-default ui-both" title="<%= __('Both') %> (Ctrl+Alt+B)">
                     <input type="radio" name="mode" autocomplete="off"><i class="fa fa-columns"></i>
                 </label>
+                <label class="btn btn-default ui-edit" title="<%= __('Edit') %> (Ctrl+Alt+E)">
+                    <input type="radio" name="mode" autocomplete="off"><i class="fa fa-pencil"></i>
+                </label>
             </div>
             <span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal">
                 <i class="fa fa-question-circle"></i>
@@ -116,7 +116,7 @@
             </li>
             <li>
                 <a href="#" target="_blank" class="ui-publish">
-                    <i class="fa fa-print"></i> <%= __('Publish') %>
+                    <i class="fa fa-share-square-o"></i> <%= __('Publish') %>
                 </a>
             </li>
             <li>