reorganize packages, start converting overall app to react (very broken at the moment)

Packages/ohif-viewerbase/client/components/themeSelectorModal/index.js

@@ -0,0 +1,3 @@
+import './themeSelectorModal/themeSelectorModal.html';
+import './themeSelectorModal/themeSelectorModal.styl';
+import './themeSelectorModal/themeSelectorModal.js';

Packages/ohif-viewerbase/client/components/themeSelectorModal/themeSelectorModal.html

@@ -0,0 +1,17 @@
+<template name="themeSelectorModal">
+    {{#dialogForm (extend this
+        id='themeSelectorModal' dialogClass='themed 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>

Packages/ohif-viewerbase/client/components/themeSelectorModal/themeSelectorModal.js

@@ -0,0 +1,80 @@
+import { Template } from 'meteor/templating';
+import { ReactiveDict } from 'meteor/reactive-dict';
+
+const DEFAULT_THEME = 'tide';
+
+const getCurrentTheme = () => sessionStorage.getItem('theme');
+
+const setActualTheme = theme => sessionStorage.setItem('theme', theme);
+
+const addThemeToBody = theme => document.body.classList.add('theme-' + theme);
+
+const removeThemesFromBody = () => {
+    const classList = document.body.classList;
+
+    for (let i = classList.length - 1; i >= 0; i--) {
+        if (classList[i].search('theme-') !== -1) {
+            document.body.classList.remove(classList[i]);
+        }
+    }
+};
+
+Template.themeSelectorModal.onCreated(() => {
+    const instance = Template.instance();
+    let currentTheme = getCurrentTheme();
+    if (!currentTheme) {
+        currentTheme = DEFAULT_THEME;
+        setActualTheme(currentTheme);
+    }
+
+    instance.state = new ReactiveDict();
+    instance.state.set('selectedTheme', currentTheme);
+
+    addThemeToBody(currentTheme);
+
+    instance.container = {
+        currentTheme,
+
+        previewTheme(theme, state) {
+            state.set('selectedTheme', theme);
+            removeThemesFromBody();
+            addThemeToBody(theme);
+        },
+
+        applyTheme(state) {
+            setActualTheme(state.get('selectedTheme'));
+        },
+
+        resetState(state) {
+            const theme = getCurrentTheme();
+
+            state.set('selectedTheme', theme);
+            removeThemesFromBody();
+            addThemeToBody(theme);
+        }
+    };
+
+    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);
+    },
+
+    printClassIfSelected(theme) {
+        const instance = Template.instance();
+
+        return theme === instance.state.get('selectedTheme') ? 'selected' : '';
+    }
+});
+
+Template.themeSelectorModal.events({
+    'click .preview-theme'(event, instance) {
+        instance.container.previewTheme(event.currentTarget.dataset.theme, instance.state);
+    }
+});

Packages/ohif-viewerbase/client/components/themeSelectorModal/themeSelectorModal.styl

@@ -0,0 +1,36 @@
+@import "{ohif:viewerbase}/app.styl"
+
+#themeSelectorModal
+  .theme-list
+    list-style: none
+    padding: 0
+
+    li
+      display: inline-block
+      cursor: pointer
+      margin-right: 10px
+      margin-bottom: 10px
+      padding: 10px
+      width: 110px
+      theme('border', '1px solid $uiBorderColorDark')
+
+      &:hover
+        background-color: rgba(21, 25, 30, 0.7)
+
+      &:last-child
+        margin-right: 0
+
+      &.selected
+        theme('border', '3px solid $uiBorderColorActive')
+        padding: 7px;
+
+      .icon-wrapper
+        height: 64px
+        width: 64px
+        margin: 0 auto
+        line-height: 6.5
+
+      .theme-title
+        font-weight: normal
+        font-size: 1.1em
+        margin-bottom: 0