(js,css) Improve display of keyboard shortcuts

NEWS

@@ -3,6 +3,7 @@
 
 Enhancements
  - [web] show source addressbook of matching contacts in appointment editor (#4579)
+ - [web] improve display of keyboard shortcuts
 
 4.0.4 (2018-10-23)
 ------------------

UI/Common/English.lproj/Localizable.strings

@@ -143,6 +143,8 @@
 /* Toggle visibility (ex: mail account in left navigation menu) */
 "Toggle visibility" = "Toggle visibility";
 
+"Keyboard Shortcuts" = "Keyboard Shortcuts";
+
 /* Toggle multiple items at the same time (hotkeys cheatsheet) */
 "Toggle range of items" = "Toggle range of items";
 
@@ -152,6 +154,9 @@
 /* Space key */
 "key_space" = "space";
 
+/* Delete key */
+"key_delete" = "delete";
+
 /* Shift and space key */
 "key_shift+space" = "shift + space";
 
@@ -174,7 +179,7 @@
 "key_shift+down" = "shift + ↓";
 
 /* Backspace key */
-"key_backspace" = "backspace";
+"key_backspace" = "⌫";
 
 /* Hotkey to start a search */
 "hotkey_search" = "s";

UI/WebServerResources/js/Common/sgHotkeys.service.js

@@ -421,13 +421,18 @@
               escapeToClose: true,
               template: [
                 '<md-dialog>',
+                '  <md-toolbar class="md-hue-2">',
+                '    <div class="md-toolbar-tools">',
+                '      <div ng-bind="::\'Keyboard Shortcuts\' | loc"></div>',
+                '    </div>',
+                '  </md-toolbar>',
                 '  <md-dialog-content>',
                 '    <md-list>',
                 '      <md-list-item ng-repeat="(hotkey, keys) in hotkeys">',
-                '        <div class="sg-hotkey-container">',
+                '        {{keys[0].description}}',
+                '        <div class="md-secondary sg-hotkey-container">',
                 '          <sg-hotkey>{{keys[0].lkey || hotkey}}</sg-hotkey>',
                 '        </div>',
-                '        {{keys[0].description}}',
                 '      </md-list-item>',
                 '    </md-list>',
                 '  </md-dialog-content>',

UI/WebServerResources/scss/components/hotkeys/hotkeys.scss

@@ -2,7 +2,6 @@
 
 .sg-hotkey-container {
   display: inline;
-  margin-right: 1em;
   text-align: right;
   min-width: 7em;
 }
@@ -14,7 +13,6 @@ sg-hotkey {
   box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
   color: #fff;
   display: inline-block;
-  margin-right: 5px;
   padding: 5px 9px;
   text-align: center;
 }