LT 281: Users shall be able to switch between themes (#45)

* LT-281: Users shall be able to switch between themes

* Avoiding compatibility issues

* Typo fixing

LesionTracker/client/components/app/app.html

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

Packages/ohif-design/app.styl

@@ -2,3 +2,4 @@
 @import "{design}/styles/imports/mixins"
 @import "{design}/styles/imports/spacings"
 @import "{design}/styles/imports/variables"
+@import "{design}/styles/imports/theme-icons"

Packages/ohif-design/package.js

@@ -12,6 +12,8 @@ Package.onUse(function(api) {
     api.use('jquery');
     api.use('stylus');
 
+    api.addAssets('assets/theme-icons.png', 'client');
+
     // Importable colors / typography settings
     api.addFiles([
         'app.styl',
@@ -19,8 +21,14 @@ Package.onUse(function(api) {
         'styles/imports/spacings.styl',
         'styles/imports/variables.styl',
         'styles/imports/theming.styl',
-        'styles/imports/theme-tide.styl',
+        'styles/imports/theme-icons.styl',
-        'styles/imports/theme-tigerlilly.styl'
+        'styles/imports/themes/theme-tide.styl',
+        'styles/imports/themes/theme-tigerlily.styl',
+        'styles/imports/themes/theme-crickets.styl',
+        'styles/imports/themes/theme-honeycomb.styl',
+        'styles/imports/themes/theme-mint.styl',
+        'styles/imports/themes/theme-overcast.styl',
+        'styles/imports/themes/theme-quartz.styl'
     ], 'client', {
         isImport: true
     });

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

@@ -0,0 +1,47 @@
+.theme-icon-crickets
+.theme-icon-tide
+.theme-icon-tigerlily
+.theme-icon-quartz
+.theme-icon-overcast
+.theme-icon-mint
+.theme-icon-honeycomb
+  display: inline-block
+  background: url('/packages/design/assets/theme-icons.png') no-repeat
+  overflow: hidden
+  text-indent: -9999px
+  text-align: left
+
+.theme-icon-crickets
+  background-position: -0px -0px
+  width: 64px
+  height: 56px
+
+.theme-icon-tide
+  background-position: -0px -56px
+  width: 64px
+  height: 54px
+
+.theme-icon-tigerlily
+  background-position: -0px -110px
+  width: 62px
+  height: 61px
+
+.theme-icon-quartz
+  background-position: -0px -171px
+  width: 59px
+  height: 64px
+
+.theme-icon-overcast
+  background-position: -0px -235px
+  width: 58px
+  height: 37px
+
+.theme-icon-mint
+  background-position: -0px -272px
+  width: 57px
+  height: 61px
+
+.theme-icon-honeycomb
+  background-position: -0px -333px
+  width: 50px
+  height: 58px

Packages/ohif-design/styles/imports/themes/theme-crickets.styl

@@ -0,0 +1,35 @@
+$themes['crickets'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
+
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
+  $uiGrayLight: #516873
+  $uiGray: #263340
+  $uiGrayDark: #2B141B
+  $uiGrayDarker: #231C1E
+  $uiGrayDarkest: #14191E
+
+  // Interface UI Colors
+  $defaultColor: #92C2DA
+  $hoverColor: #ffffff
+  $activeColor: #D4C3C1
+  $uiBorderColor: #537B76
+  $uiBorderColorDark: #3C5D80
+  $uiBorderColorActive: #d4aaa5
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #344a61
+
+  // Text Colors
+  $textColorActive: black
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #8BE7B5
+  $largeNumbersColor: #D47C66
+
+  // Other Colors
+  $imageSliderColor: #163239
+}

Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl

@@ -0,0 +1,35 @@
+$themes['honeycomb'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
+
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
+  $uiGrayLight: #516873
+  $uiGray: #263340
+  $uiGrayDark: #252228
+  $uiGrayDarker: #18161A
+  $uiGrayDarkest: #14191E
+
+  // Interface UI Colors
+  $defaultColor: #B5B5B5
+  $hoverColor: #ffffff
+  $activeColor: #CDA56B
+  $uiBorderColor: #623337
+  $uiBorderColorDark: #3C5D80
+  $uiBorderColorActive: #ce9e59
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #344a61
+
+  // Text Colors
+  $textColorActive: black
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #FAB797
+  $largeNumbersColor: #D47C66
+  
+  // Other Colors
+  $imageSliderColor: #163239
+}

Packages/ohif-design/styles/imports/themes/theme-mint.styl

@@ -0,0 +1,35 @@
+$themes['mint'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
+
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
+  $uiGrayLight: #516873
+  $uiGray: #263340
+  $uiGrayDark: #1D232A
+  $uiGrayDarker: #15191E
+  $uiGrayDarkest: #14191E
+
+  // Interface UI Colors
+  $defaultColor: #A7E9B3
+  $hoverColor: #ffffff
+  $activeColor: #31B166
+  $uiBorderColor: #214529
+  $uiBorderColorDark: #3C5D80
+  $uiBorderColorActive: #23b15d
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #344a61
+
+  // Text Colors
+  $textColorActive: black
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #A7E9B3
+  $largeNumbersColor: #76D27D
+
+  // Other Colors
+  $imageSliderColor: #163239
+}

Packages/ohif-design/styles/imports/themes/theme-overcast.styl

@@ -0,0 +1,35 @@
+$themes['overcast'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
+
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
+  $uiGrayLight: #516873
+  $uiGray: #263340
+  $uiGrayDark: #252228
+  $uiGrayDarker: #15191E
+  $uiGrayDarkest: #14191E
+
+  // Interface UI Colors
+  $defaultColor: #9CBECF
+  $hoverColor: #ffffff
+  $activeColor: #507D80
+  $uiBorderColor: #404040
+  $uiBorderColorDark: #3C5D80
+  $uiBorderColorActive: #467c80
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #344a61
+
+  // Text Colors
+  $textColorActive: black
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #73F2FC
+  $largeNumbersColor: #74F1FA
+
+  // Other Colors
+  $imageSliderColor: #163239
+}

Packages/ohif-design/styles/imports/themes/theme-quartz.styl

@@ -0,0 +1,35 @@
+$themes['quartz'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
+
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
+  $uiGrayLight: #516873
+  $uiGray: #263340
+  $uiGrayDark: #2B2E3F
+  $uiGrayDarker: #151A1F
+  $uiGrayDarkest: #14191E
+
+  // Interface UI Colors
+  $defaultColor: #8EA2A4
+  $hoverColor: #ffffff
+  $activeColor: #7858CE
+  $uiBorderColor: #885B86
+  $uiBorderColorDark: #3C5D80
+  $uiBorderColorActive: #6843cc
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #344a61
+
+  // Text Colors
+  $textColorActive: black
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #D7E8FE
+  $largeNumbersColor: #ABCDF6
+
+  // Other Colors
+  $imageSliderColor: #163239
+}

Packages/ohif-design/styles/imports/themes/theme-tide.styl

@@ -15,19 +15,20 @@ $themes['tide'] = {
   $uiGrayDarkest: #14191E
 
   // Interface UI Colors
-  $defaultColor: #9cd0fe
+  $defaultColor: #9CCEF9
   $hoverColor: #ffffff
-  $activeColor: #00a4d9
+  $activeColor: #20A5D6
-  $uiBorderColor: #436270
+  $uiBorderColor: #44626F
   $uiBorderColorDark: #3C5D80
   $uiBorderColorActive: #00a4d9
   $primaryBackgroundColor: #000000
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black //#89bae5
+  $textColorActive: black
   $textPrimaryColor: #ffffff
-  $textSecondaryColor: #6a8fb1
+  $textSecondaryColor: #91B9CD
+  $largeNumbersColor: #6FBDE2
 
   // Other Colors
   $imageSliderColor: #163239

Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl

@@ -1,4 +1,4 @@
-$themes['tigerlilly'] = {
+$themes['tigerlily'] = {
   // Common pallete
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
@@ -10,15 +10,15 @@ $themes['tigerlilly'] = {
 
   $uiGrayLight: #516873
   $uiGray: #263340
-  $uiGrayDark: #16202B
+  $uiGrayDark: #26333F
   $uiGrayDarker: #151A1F
   $uiGrayDarkest: #14191E
 
   // Interface UI Colors
-  $defaultColor: #98ceff
+  $defaultColor: #9ACFFD
   $hoverColor: #ffffff
-  $activeColor: #ff8a3d
+  $activeColor: #fa8947
-  $uiBorderColor: #744b71
+  $uiBorderColor: #875a86
   $uiBorderColorDark: #744b71
   $uiBorderColorActive: #ff8a3d
   $primaryBackgroundColor: #000000
@@ -27,7 +27,8 @@ $themes['tigerlilly'] = {
   // Text Colors
   $textColorActive: black
   $textPrimaryColor: #ffffff
-  $textSecondaryColor: #6a8fb1
+  $textSecondaryColor: #9CCDF8
+  $largeNumbersColor: #D47C66
 
   // Other Colors
   $imageSliderColor: #4b2c3c //#163239

Packages/ohif-design/styles/imports/theming.styl

@@ -2,8 +2,13 @@ $themes = {}
 $defaultTheme = 'tide'
 
 // Import the theme variables
-@import "./theme-tide.styl"
+@import "./themes/theme-tide.styl"
-@import "./theme-tigerlilly.styl"
+@import "./themes/theme-tigerlily.styl"
+@import "./themes/theme-crickets.styl"
+@import "./themes/theme-honeycomb.styl"
+@import "./themes/theme-mint.styl"
+@import "./themes/theme-overcast.styl"
+@import "./themes/theme-quartz.styl"
 
 /*
  * Process each theme variable in the given value, splitting it by space

Packages/ohif-study-list/client/components/index.js

@@ -3,3 +3,4 @@ import './seriesDetailsModal';
 import './serverInformation';
 import './studyContextMenu';
 import './studylist';
+import './themeSelector';

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl

@@ -30,7 +30,7 @@ $bodyCellHeight = 40px
     line-height: $studyListToolbarHeight
 
   .studyCount
-    theme('color', '$uiSkyBlue')
+    theme('color', '$largeNumbersColor')
     font-size: 40px
     font-weight: 100
     line-height: $studyListToolbarHeight
@@ -54,7 +54,7 @@ $bodyCellHeight = 40px
     z-index: 1
 
   &:after
-    theme('background-color', '$uiSkyBlue')
+    theme('background-color', '$largeNumbersColor')
     bottom: -1px
     height: 1px
     z-index: 3

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

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

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

@@ -0,0 +1,28 @@
+<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">&times;</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>
+</template>

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

@@ -0,0 +1,69 @@
+const DEFAULT_THEME = 'tide';
+
+const getActualTheme = () => 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 actualTheme = getActualTheme();
+    if(!actualTheme) {
+        actualTheme = DEFAULT_THEME;
+        setActualTheme(actualTheme);
+    }
+
+    instance.state = new ReactiveDict();
+    instance.state.set('selectedTheme', actualTheme);
+
+    addThemeToBody(actualTheme);
+
+    instance.container = {
+        actualTheme,
+        previewTheme(theme, state) {
+            state.set('selectedTheme', theme);
+            removeThemesFromBody();
+            addThemeToBody(theme);
+        },
+        applyTheme(state) {
+            setActualTheme(state.get('selectedTheme'));
+        },
+        resetState(state) {
+            const theme = getActualTheme();
+
+            state.set('selectedTheme', theme);
+            removeThemesFromBody();
+            addThemeToBody(theme);
+        }
+    };
+
+});
+
+Template.themeSelectorModal.helpers({
+    themes: [ 'crickets', 'honeycomb', 'mint', 'overcast', 'quartz', 'tide', 'tigerlily' ],
+    ucFirst(text) {
+        return text.charAt(0).toUpperCase() + text.slice(1);
+    },
+    addClassIfSelected(theme) {
+        const instance = Template.instance();
+
+        return theme === instance.state.get('selectedTheme') ? 'selected' : '';
+    }
+});
+
+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)
+});

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

@@ -0,0 +1,36 @@
+@import "{design}/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

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

@@ -22,6 +22,12 @@
                     </li>
                 {{/if}}
                 <li role="separator" class="divider"></li>
+                <li>
+                    <a id="themeSelector">
+                        <i class="fa fa-sliders fa-lg"></i> Themes
+                    </a>
+                </li>
+                <li role="separator" class="divider"></li>
                 <li>
                     <a id="serverInformation">
                         <i class="fa fa-server fa-lg"></i> Server Information

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

@@ -35,6 +35,9 @@ Template.userAccountMenu.events({
     'click #serverInformation': function() {
         $('#serverInformationModal').modal('show');
     },
+    'click #themeSelector': function() {
+        $('#themeSelectorModal').modal('show');
+    },
     'click #logoutButton': function() {
         Meteor.logout(function() {
             Router.go('/entrySignIn');