Adding user preferences to LT and Viewer

LesionTracker/client/components/app/app.js

@@ -26,6 +26,11 @@ Template.app.onCreated(() => {
         iconClasses: 'server',
         iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#server',
         separatorAfter: true
+    }, {
+        action: () => OHIF.ui.showDialog('userPreferencesDialog'),
+        text: 'Preferences',
+        icon: 'fa fa-user',
+        separatorAfter: true
     }, {
         action: OHIF.user.changePassword,
         text: 'Change Password',

LesionTracker/client/components/userPreferences/dialog.html

@@ -0,0 +1,18 @@
+<template name="userPreferencesDialog">
+    {{#dialogSimple (extend this class='themed' dialogClass='dialog-user-preferences modal-lg' title='User Preferences')}}
+        <ul class="nav nav-tabs">
+            <li role="presentation" class="{{tabClasses 'hotkeys'}}">
+                <a href="#" data-id="hotkeys">Keyboard Shortcuts</a>
+            </li>
+            <li role="presentation" class="{{tabClasses 'wwwc'}}">
+                <a href="#" data-id="wwwc">Window W/L</a>
+            </li>
+        </ul>
+        <div class="{{#unless eq instance.activeTab.get 'hotkeys'}}hidden{{/unless}}">
+            {{>hotkeysForm (extend contextName='viewer')}}
+        </div>
+        <div class="{{#unless eq instance.activeTab.get 'wwwc'}}hidden{{/unless}}">
+            {{>windowLevelPresetsForm}}
+        </div>
+    {{/dialogSimple}}
+</template>

LesionTracker/client/components/userPreferences/dialog.js

@@ -0,0 +1,22 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+Template.userPreferencesDialog.onCreated(() => {
+    const instance = Template.instance();
+    instance.activeTab = new ReactiveVar('hotkeys');
+});
+
+Template.userPreferencesDialog.events({
+    'click .nav-tabs li a'(event, instance) {
+        const tabId = $(event.currentTarget).attr('data-id');
+        instance.activeTab.set(tabId);
+    }
+});
+
+Template.userPreferencesDialog.helpers({
+    tabClasses(tabId) {
+        const instance = Template.instance();
+        const activeTab = instance.activeTab.get();
+        return tabId === activeTab ? 'active' : '';
+    }
+});

LesionTracker/client/components/userPreferences/dialog.styl

@@ -0,0 +1,14 @@
+@require '{ohif:design}/app'
+
+.dialog-user-preferences
+
+  .form-content
+    margin-bottom: 10px
+    margin-left: -15px
+    margin-right: -15px
+    max-height: 70vh
+    overflow-y: auto
+    padding: 15px
+
+  .popover
+    width: 300px

OHIFViewer/client/components/ohifViewer/ohifViewer.js

@@ -13,6 +13,11 @@ Template.ohifViewer.onCreated(() => {
         text: 'Server Information',
         icon: 'fa fa-server fa-lg',
         separatorAfter: true
+    }, {
+        action: () => OHIF.ui.showDialog('userPreferencesDialog'),
+        text: 'Preferences',
+        icon: 'fa fa-user',
+        separatorAfter: true
     }, {
         action: () => OHIF.ui.showDialog('aboutModal'),
         text: 'About',

OHIFViewer/client/components/userPreferences/dialog.html

@@ -0,0 +1,18 @@
+<template name="userPreferencesDialog">
+    {{#dialogSimple (extend this class='themed' dialogClass='dialog-user-preferences modal-lg' title='User Preferences')}}
+        <ul class="nav nav-tabs">
+            <li role="presentation" class="{{tabClasses 'hotkeys'}}">
+                <a href="#" data-id="hotkeys">Keyboard Shortcuts</a>
+            </li>
+            <li role="presentation" class="{{tabClasses 'wwwc'}}">
+                <a href="#" data-id="wwwc">Window W/L</a>
+            </li>
+        </ul>
+        <div class="{{#unless eq instance.activeTab.get 'hotkeys'}}hidden{{/unless}}">
+            {{>hotkeysForm (extend contextName='viewer')}}
+        </div>
+        <div class="{{#unless eq instance.activeTab.get 'wwwc'}}hidden{{/unless}}">
+            {{>windowLevelPresetsForm}}
+        </div>
+    {{/dialogSimple}}
+</template>

OHIFViewer/client/components/userPreferences/dialog.js

@@ -0,0 +1,22 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+Template.userPreferencesDialog.onCreated(() => {
+    const instance = Template.instance();
+    instance.activeTab = new ReactiveVar('hotkeys');
+});
+
+Template.userPreferencesDialog.events({
+    'click .nav-tabs li a'(event, instance) {
+        const tabId = $(event.currentTarget).attr('data-id');
+        instance.activeTab.set(tabId);
+    }
+});
+
+Template.userPreferencesDialog.helpers({
+    tabClasses(tabId) {
+        const instance = Template.instance();
+        const activeTab = instance.activeTab.get();
+        return tabId === activeTab ? 'active' : '';
+    }
+});

OHIFViewer/client/components/userPreferences/dialog.styl

@@ -0,0 +1,14 @@
+@require '{ohif:design}/app'
+
+.dialog-user-preferences
+
+  .form-content
+    margin-bottom: 10px
+    margin-left: -15px
+    margin-right: -15px
+    max-height: 70vh
+    overflow-y: auto
+    padding: 15px
+
+  .popover
+    width: 300px

Packages/ohif-hotkeys/client/classes/HotkeysManager.js

@@ -86,7 +86,9 @@ export class HotkeysManager {
                     return reject();
                 }
 
-                context.extend(definitions);
+                context.destroy();
+                context.definitions = definitions;
+                context.initialize();
                 this.changeObserver.changed();
                 resolve(definitions);
             }).catch(reject);