PWV-15: Removing themeSelectorModal from DOM
This commit is contained in:
Bruno Alves de Faria
parent
0153354004
commit
02a97d4aa6
@ -33,5 +33,4 @@
|
||||
{{>lastLoginModal}}
|
||||
{{>progressDialog}}
|
||||
{{>viewSeriesDetailsModal}}
|
||||
{{>themeSelectorModal}}
|
||||
</template>
|
||||
|
||||
@ -10,7 +10,10 @@
|
||||
data-dismiss='modal' aria-label='Close'
|
||||
)
|
||||
}}<span aria-hidden="true">×</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}}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,28 +1,17 @@
|
||||
<template name="themeSelectorModal">
|
||||
<div class="modal" id="themeSelectorModal" tabindex="-1" role="dialog" aria-labelledby="themeSelectorModalLabel">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="themeSelectorModalLabel"><i class="fa fa-sliders"></i> Themes</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="theme-list text-center">
|
||||
{{#each theme in themes}}
|
||||
<li class="text-center preview-theme {{addClassIfSelected theme}}" data-theme="{{theme}}">
|
||||
<div class="icon-wrapper">
|
||||
<span class="theme-icon-{{theme}}"></span>
|
||||
</div>
|
||||
<h4 class="theme-title">{{ucFirst theme}}</h4>
|
||||
</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>
|
||||
{{#dialogForm (extend this
|
||||
id='themeSelectorModal' dialogClass='modal-lg' confirmLabel='Apply theme'
|
||||
title='Themes' titleIcon='fa fa-sliders'
|
||||
)}}
|
||||
<ul class="theme-list text-center">
|
||||
{{#each theme in themes}}
|
||||
<li class="text-center preview-theme {{printClassIfSelected theme}}" data-theme="{{theme}}">
|
||||
<div class="icon-wrapper">
|
||||
<span class="theme-icon-{{theme}}"></span>
|
||||
</div>
|
||||
<h4 class="theme-title">{{ucFirst theme}}</h4>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/dialogForm}}
|
||||
</template>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
@ -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() {
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user