CORD-582, CORD-734 Registering events listeners for keyboard shortcuts
and displaying them in the side panel
Change-Id: Ifbb227b3a425be5c33d1fe211abd473209414896
diff --git a/src/app/core/key-binding/key-binding-panel.html b/src/app/core/key-binding/key-binding-panel.html
new file mode 100644
index 0000000..7ce982a
--- /dev/null
+++ b/src/app/core/key-binding/key-binding-panel.html
@@ -0,0 +1,25 @@
+<div class="row">
+ <div class="col-xs-12">
+ <h3>Active Key Bindings</h3>
+ </div>
+</div>
+<div class="row" ng-repeat="(k, v) in vm.bindings">
+ <div class="col-xs-12" ng-if="v.length > 0">
+ <h5>{{k | capitalize}}</h5>
+ </div>
+ <div class="col-xs-12" ng-repeat="binding in v" ng-if="binding.description">
+ <div class="row">
+ <div class="col-xs-5">
+ <code class="text-center">
+ <span ng-repeat="m in binding.modifiers">
+ {{m}} +
+ </span>
+ {{binding.key}}
+ </code>
+ </div>
+ <div class="col-xs-7">
+ <p>{{binding.description}}</p>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/core/key-binding/key-binding-panel.scss b/src/app/core/key-binding/key-binding-panel.scss
new file mode 100644
index 0000000..0fde571
--- /dev/null
+++ b/src/app/core/key-binding/key-binding-panel.scss
@@ -0,0 +1,7 @@
+@import './../../style/vars.scss';
+
+xos-key-binding-panel {
+ code {
+ background: $background-light-color;
+ }
+}
\ No newline at end of file
diff --git a/src/app/core/key-binding/key-binding-panel.ts b/src/app/core/key-binding/key-binding-panel.ts
new file mode 100644
index 0000000..4ee31eb
--- /dev/null
+++ b/src/app/core/key-binding/key-binding-panel.ts
@@ -0,0 +1,19 @@
+import {IXosKeyboardShortcutService, IXosKeyboardShortcutMap} from '../services/keyboard-shortcut';
+import './key-binding-panel.scss';
+
+class XosKeyBindingPanelController {
+ static $inject = ['$scope', 'XosKeyboardShortcut'];
+ public bindings: IXosKeyboardShortcutMap;
+ constructor (
+ private $scope: ng.IScope,
+ private XosKeyboardShortcut: IXosKeyboardShortcutService
+ ) {
+ this.bindings = this.XosKeyboardShortcut.keyMapping;
+ }
+}
+
+export const xosKeyBindingPanel: angular.IComponentOptions = {
+ template: require('./key-binding-panel.html'),
+ controllerAs: 'vm',
+ controller: XosKeyBindingPanelController
+};