feat(user preferences) Add User Preferences & Theming to Standalone Viewer (closes #117). Update Standalone to Meteor 1.7

2018-07-04 17:43:50 +02:00
1 parent 7090b4f3e0
commit de7135f3b8
@@ -0,0 +1,20 @@
+<template name="userPreferencesDialog">
+    {{#dialogSimple (extend this class='themed' dialogClass='dialog-user-preferences modal-lg' title='User Preferences')}}
+        <div class="dialog-separator-after">
+            <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/Levels</a>
+                </li>
+            </ul>
+        </div>
+        <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>
@@ -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' : '';
+    }
+});
@@ -0,0 +1,18 @@
+@require '{ohif:design}/app'
+
+.dialog-user-preferences
+
+  .modal-body
+    overflow: hidden
+
+  .form-content
+    border-bottom: 3px solid #000000
+    margin-bottom: 20px
+    margin-left: -22px
+    margin-right: -22px
+    max-height: 70vh
+    overflow-y: auto
+    padding: 22px
+
+  .popover
+    width: 300px