diff --git a/LesionTracker/client/components/app/app.html b/LesionTracker/client/components/app/app.html
index 0c6b0ef86..ec011ed1c 100644
--- a/LesionTracker/client/components/app/app.html
+++ b/LesionTracker/client/components/app/app.html
@@ -33,5 +33,4 @@
{{>lastLoginModal}}
{{>progressDialog}}
{{>viewSeriesDetailsModal}}
- {{>themeSelectorModal}}
diff --git a/Packages/ohif-core/client/components/bootstrap/dialog/form.html b/Packages/ohif-core/client/components/bootstrap/dialog/form.html
index 483d56297..04067c96e 100644
--- a/Packages/ohif-core/client/components/bootstrap/dialog/form.html
+++ b/Packages/ohif-core/client/components/bootstrap/dialog/form.html
@@ -10,7 +10,10 @@
data-dismiss='modal' aria-label='Close'
)
}}×{{/button}}
-
{{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/ui/dialog/display.js b/Packages/ohif-core/client/ui/dialog/display.js
index 2396a05eb..81eb52ad8 100644
--- a/Packages/ohif-core/client/ui/dialog/display.js
+++ b/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) {
diff --git a/Packages/ohif-design/styles/imports/theme-icons.styl b/Packages/ohif-design/styles/imports/theme-icons.styl
index 853638f52..b04418982 100644
--- a/Packages/ohif-design/styles/imports/theme-icons.styl
+++ b/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
diff --git a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html
index 3d3886e66..d3aafde80 100644
--- a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html
+++ b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html
@@ -1,28 +1,17 @@
-
-
-
-
-
-
- {{#each theme in themes}}
- -
-
-
-
- {{ucFirst theme}}
-
- {{/each}}
-
-
-
-
-
-
+ {{#dialogForm (extend this
+ id='themeSelectorModal' dialogClass='modal-lg' confirmLabel='Apply theme'
+ title='Themes' titleIcon='fa fa-sliders'
+ )}}
+
+ {{#each theme in themes}}
+ -
+
+
+
+ {{ucFirst theme}}
+
+ {{/each}}
+
+ {{/dialogForm}}
diff --git a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js
index 928d7ed7d..69986ff82 100644
--- a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js
+++ b/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();
- if(!actualTheme) {
- actualTheme = DEFAULT_THEME;
- setActualTheme(actualTheme);
+ let currentTheme = getCurrentTheme();
+ if (!currentTheme) {
+ currentTheme = DEFAULT_THEME;
+ 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 .js-apply': (event, instance) => instance.container.applyTheme(instance.state),
- 'click .preview-theme': (event, instance) => instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state)
+ 'click .preview-theme'(event, instance) {
+ instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state);
+ }
});
diff --git a/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js b/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js
index aea987bbd..2aaeb7c25 100644
--- a/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js
+++ b/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');
});
@@ -122,4 +127,4 @@ Template.userAccountMenu.onCreated(function userAccountMenuCreated() {
});
});
-});
\ No newline at end of file
+});