diff --git a/LesionTracker/client/components/app/app.html b/LesionTracker/client/components/app/app.html index 9669c60fb2e..56540f83119 100644 --- a/LesionTracker/client/components/app/app.html +++ b/LesionTracker/client/components/app/app.html @@ -37,4 +37,5 @@ {{ >lastLoginModal }} {{ >progressDialog }} {{ >viewSeriesDetailsModal }} + {{ >themeSelectorModal }} diff --git a/Packages/ohif-design/app.styl b/Packages/ohif-design/app.styl index 47040a535d2..86acfae54d7 100644 --- a/Packages/ohif-design/app.styl +++ b/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" diff --git a/Packages/ohif-design/assets/theme-icons.png b/Packages/ohif-design/assets/theme-icons.png new file mode 100644 index 00000000000..098f7ed5201 Binary files /dev/null and b/Packages/ohif-design/assets/theme-icons.png differ diff --git a/Packages/ohif-design/package.js b/Packages/ohif-design/package.js index 71f3051735a..d0b29c3f72a 100644 --- a/Packages/ohif-design/package.js +++ b/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-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 }); diff --git a/Packages/ohif-design/styles/imports/theme-icons.styl b/Packages/ohif-design/styles/imports/theme-icons.styl new file mode 100644 index 00000000000..853638f52ef --- /dev/null +++ b/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 diff --git a/Packages/ohif-design/styles/imports/themes/theme-crickets.styl b/Packages/ohif-design/styles/imports/themes/theme-crickets.styl new file mode 100644 index 00000000000..2ff8f593383 --- /dev/null +++ b/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 +} diff --git a/Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl b/Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl new file mode 100644 index 00000000000..c2099d1341b --- /dev/null +++ b/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 +} diff --git a/Packages/ohif-design/styles/imports/themes/theme-mint.styl b/Packages/ohif-design/styles/imports/themes/theme-mint.styl new file mode 100644 index 00000000000..450f01bf338 --- /dev/null +++ b/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 +} diff --git a/Packages/ohif-design/styles/imports/themes/theme-overcast.styl b/Packages/ohif-design/styles/imports/themes/theme-overcast.styl new file mode 100644 index 00000000000..3f9fc6e74e0 --- /dev/null +++ b/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 +} diff --git a/Packages/ohif-design/styles/imports/themes/theme-quartz.styl b/Packages/ohif-design/styles/imports/themes/theme-quartz.styl new file mode 100644 index 00000000000..92db4c1681a --- /dev/null +++ b/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 +} diff --git a/Packages/ohif-design/styles/imports/theme-tide.styl b/Packages/ohif-design/styles/imports/themes/theme-tide.styl similarity index 78% rename from Packages/ohif-design/styles/imports/theme-tide.styl rename to Packages/ohif-design/styles/imports/themes/theme-tide.styl index 98fc157dc4c..61ee1312498 100644 --- a/Packages/ohif-design/styles/imports/theme-tide.styl +++ b/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 diff --git a/Packages/ohif-design/styles/imports/theme-tigerlilly.styl b/Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl similarity index 75% rename from Packages/ohif-design/styles/imports/theme-tigerlilly.styl rename to Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl index 34ca407f1db..90b9291d4c5 100644 --- a/Packages/ohif-design/styles/imports/theme-tigerlilly.styl +++ b/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 diff --git a/Packages/ohif-design/styles/imports/theming.styl b/Packages/ohif-design/styles/imports/theming.styl index e3a3c083277..78abcf00bca 100644 --- a/Packages/ohif-design/styles/imports/theming.styl +++ b/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 diff --git a/Packages/ohif-study-list/client/components/index.js b/Packages/ohif-study-list/client/components/index.js index 64dc284094f..414b454e64b 100644 --- a/Packages/ohif-study-list/client/components/index.js +++ b/Packages/ohif-study-list/client/components/index.js @@ -3,3 +3,4 @@ import './seriesDetailsModal'; import './serverInformation'; import './studyContextMenu'; import './studylist'; +import './themeSelector'; diff --git a/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl b/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl index c56b4cf2dc7..7cba1526a08 100644 --- a/Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl +++ b/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 diff --git a/Packages/ohif-study-list/client/components/themeSelector/index.js b/Packages/ohif-study-list/client/components/themeSelector/index.js new file mode 100644 index 00000000000..f4bd17197ec --- /dev/null +++ b/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'; diff --git a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html new file mode 100644 index 00000000000..3d3886e66d5 --- /dev/null +++ b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html @@ -0,0 +1,28 @@ + diff --git a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js new file mode 100644 index 00000000000..928d7ed7dda --- /dev/null +++ b/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) +}); diff --git a/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.styl b/Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.styl new file mode 100644 index 00000000000..a37c3f4f11e --- /dev/null +++ b/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 \ No newline at end of file diff --git a/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html b/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html index 648bbb5b43f..5fc6684a8ff 100644 --- a/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html +++ b/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html @@ -22,6 +22,12 @@ {{/if}} +
  • + + Themes + +
    • +
  • Server Information diff --git a/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js b/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js index 6d75389fb3a..aea987bbd07 100644 --- a/Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js +++ b/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');