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,15 +12,23 @@ 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',
         'styles/imports/mixins.styl',
         'styles/imports/spacings.styl',
         'styles/imports/variables.styl',
         'styles/imports/theming.styl',
-        'styles/imports/theme-tide.styl',
-        'styles/imports/theme-tigerlilly.styl'
+        'styles/imports/theme-icons.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/theme-tide.styl → 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
-  $uiBorderColor: #436270
+  $activeColor: #20A5D6
+  $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/theme-tigerlilly.styl → 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
-  $uiBorderColor: #744b71
+  $activeColor: #fa8947
+  $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 "./theme-tigerlilly.styl"
+@import "./themes/theme-tide.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>