PWV-15: Removing themeSelectorModal from DOM

LesionTracker/client/components/app/app.html

@@ -33,5 +33,4 @@
     {{>lastLoginModal}}
     {{>progressDialog}}
     {{>viewSeriesDetailsModal}}
-    {{>themeSelectorModal}}
 </template>

Packages/ohif-core/client/components/bootstrap/dialog/form.html

@@ -10,7 +10,10 @@
                             data-dismiss='modal' aria-label='Close'
                         )
                     }}<span aria-hidden="true">&times;</span>{{/button}}
-                    <h4 class="modal-title">{{this.title}}</h4>
+                    <h4 class="modal-title">
+                        {{#if this.titleIcon}}<i class="{{this.titleIcon}}"></i>{{/if}}
+                        <span>{{this.title}}</span>
+                    </h4>
                 </div>
                 <div class="modal-body">
                     {{>UI.contentBlock}}

Packages/ohif-core/client/ui/dialog/display.js

@@ -4,7 +4,7 @@ import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
 
-OHIF.ui.showDialog = (templateName, dialogData) => {
+OHIF.ui.showDialog = (templateName, dialogData={}) => {
     // Check if the given template exists
     const template = Template[templateName];
     if (!template) {

Packages/ohif-design/styles/imports/theme-icons.styl

@@ -6,7 +6,7 @@
 .theme-icon-mint
 .theme-icon-honeycomb
   display: inline-block
-  background: url('/packages/design/assets/theme-icons.png') no-repeat
+  background: url('/packages/ohif_design/assets/theme-icons.png') no-repeat
   overflow: hidden
   text-indent: -9999px
   text-align: left

Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html

@@ -1,28 +1,17 @@
 <template name="themeSelectorModal">
-    <div class="modal" id="themeSelectorModal" tabindex="-1" role="dialog" aria-labelledby="themeSelectorModalLabel">
+    {{#dialogForm (extend this
-        <div class="modal-dialog modal-lg" role="document">
+        id='themeSelectorModal' dialogClass='modal-lg' confirmLabel='Apply theme'
-            <div class="modal-content">
+        title='Themes' titleIcon='fa fa-sliders'
-                <div class="modal-header">
+    )}}
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <ul class="theme-list text-center">
-                    <h4 class="modal-title" id="themeSelectorModalLabel"><i class="fa fa-sliders"></i> Themes</h4>
+            {{#each theme in themes}}
-                </div>
+                <li class="text-center preview-theme {{printClassIfSelected theme}}" data-theme="{{theme}}">
-                <div class="modal-body">
+                    <div class="icon-wrapper">
-                    <ul class="theme-list text-center">
+                        <span class="theme-icon-{{theme}}"></span>
-                        {{#each theme in themes}}
+                    </div>
-                            <li class="text-center preview-theme {{addClassIfSelected theme}}" data-theme="{{theme}}">
+                    <h4 class="theme-title">{{ucFirst theme}}</h4>
-                                <div class="icon-wrapper">
+                </li>
-                                    <span class="theme-icon-{{theme}}"></span>
+            {{/each}}
-                                </div>
+        </ul>
-                                <h4 class="theme-title">{{ucFirst theme}}</h4>
+    {{/dialogForm}}
-                            </li>
-                        {{/each}}
-                    </ul>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default js-cancel" data-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary js-apply" data-dismiss="modal">Apply theme</button>
-                </div>
-            </div>
-        </div>
-    </div>
 </template>

Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js

@@ -1,6 +1,9 @@
+import { Template } from 'meteor/templating';
+import { ReactiveDict } from 'meteor/reactive-dict';
+
 const DEFAULT_THEME = 'tide';
 
-const getActualTheme = () => sessionStorage.getItem('theme');
+const getCurrentTheme = () => sessionStorage.getItem('theme');
 
 const setActualTheme = theme => sessionStorage.setItem('theme', theme);
 
@@ -10,7 +13,7 @@ const removeThemesFromBody = () => {
     const classList = document.body.classList;
 
     for (let i = classList.length - 1; i >= 0; i--) {
-        if(classList[i].search('theme-') !== -1) {
+        if (classList[i].search('theme-') !== -1) {
             document.body.classList.remove(classList[i]);
         }
     }
@@ -18,29 +21,32 @@ const removeThemesFromBody = () => {
 
 Template.themeSelectorModal.onCreated(() => {
     const instance = Template.instance();
-    let actualTheme = getActualTheme();
+    let currentTheme = getCurrentTheme();
-    if(!actualTheme) {
+    if (!currentTheme) {
-        actualTheme = DEFAULT_THEME;
+        currentTheme = DEFAULT_THEME;
-        setActualTheme(actualTheme);
+        setActualTheme(currentTheme);
     }
 
     instance.state = new ReactiveDict();
-    instance.state.set('selectedTheme', actualTheme);
+    instance.state.set('selectedTheme', currentTheme);
 
-    addThemeToBody(actualTheme);
+    addThemeToBody(currentTheme);
 
     instance.container = {
-        actualTheme,
+        currentTheme,
+
         previewTheme(theme, state) {
             state.set('selectedTheme', theme);
             removeThemesFromBody();
             addThemeToBody(theme);
         },
+
         applyTheme(state) {
             setActualTheme(state.get('selectedTheme'));
         },
+
         resetState(state) {
-            const theme = getActualTheme();
+            const theme = getCurrentTheme();
 
             state.set('selectedTheme', theme);
             removeThemesFromBody();
@@ -48,14 +54,19 @@ Template.themeSelectorModal.onCreated(() => {
         }
     };
 
+    const { promise } = instance.data;
+    promise.then(() => instance.container.applyTheme(instance.state));
+    promise.catch(() => instance.container.resetState(instance.state));
 });
 
 Template.themeSelectorModal.helpers({
     themes: [ 'crickets', 'honeycomb', 'mint', 'overcast', 'quartz', 'tide', 'tigerlily' ],
+
     ucFirst(text) {
         return text.charAt(0).toUpperCase() + text.slice(1);
     },
-    addClassIfSelected(theme) {
+
+    printClassIfSelected(theme) {
         const instance = Template.instance();
 
         return theme === instance.state.get('selectedTheme') ? 'selected' : '';
@@ -63,7 +74,7 @@ Template.themeSelectorModal.helpers({
 });
 
 Template.themeSelectorModal.events({
-    'click .js-cancel, click .close': (event, instance) => instance.container.resetState(instance.state),
+    'click .preview-theme'(event, instance) {
-    'click .js-apply': (event, instance) => instance.container.applyTheme(instance.state),
+        instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state);
-    'click .preview-theme': (event, instance) => instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state)
+    }
 });

Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js

@@ -1,6 +1,9 @@
+import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Session } from 'meteor/session';
+import { Router } from 'meteor/iron:router';
+import { OHIF } from 'meteor/ohif:core';
 
 // Display the last login modal as default
 Session.setDefault('displayLastLoginModal', true);
@@ -32,13 +35,15 @@ Template.userAccountMenu.helpers({
 });
 
 Template.userAccountMenu.events({
-    'click #serverInformation': function() {
+    'click #serverInformation'() {
         $('#serverInformationModal').modal('show');
     },
-    'click #themeSelector': function() {
+
-        $('#themeSelectorModal').modal('show');
+    'click #themeSelector'() {
+        OHIF.ui.showDialog('themeSelectorModal');
     },
-    'click #logoutButton': function() {
+
+    'click #logoutButton'() {
         Meteor.logout(function() {
             Router.go('/entrySignIn');
         });