From c52a45e072c962dd6a5bf1f77964f149ffd07ae9 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 6 Nov 2018 10:23:37 -0500
Subject: [PATCH] (js,css) Improve display of keyboard shortcuts

---
 NEWS                                                     | 1 +
 UI/Common/English.lproj/Localizable.strings              | 7 ++++++-
 UI/WebServerResources/js/Common/sgHotkeys.service.js     | 9 +++++++--
 .../scss/components/hotkeys/hotkeys.scss                 | 2 --
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/NEWS b/NEWS
index ddd6f0a46..587530d08 100644
--- a/NEWS
+++ b/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)
 ------------------
diff --git a/UI/Common/English.lproj/Localizable.strings b/UI/Common/English.lproj/Localizable.strings
index 73a77956c..db19287cf 100644
--- a/UI/Common/English.lproj/Localizable.strings
+++ b/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";
diff --git a/UI/WebServerResources/js/Common/sgHotkeys.service.js b/UI/WebServerResources/js/Common/sgHotkeys.service.js
index 057681a8f..fe81c7089 100644
--- a/UI/WebServerResources/js/Common/sgHotkeys.service.js
+++ b/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>',
diff --git a/UI/WebServerResources/scss/components/hotkeys/hotkeys.scss b/UI/WebServerResources/scss/components/hotkeys/hotkeys.scss
index 1d9ae23f3..6f05d411c 100644
--- a/UI/WebServerResources/scss/components/hotkeys/hotkeys.scss
+++ b/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;
 }