othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* Avoiding compatibility issues

* Typo fixing
This commit is contained in:
Eloízio Salgado 2016-10-31 19:36:51 -02:00 committed by Erik Ziegler
parent 0ba77cd0b1
commit 20a2a8e453
21 changed files with 402 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
LesionTracker/client/components/app/app.html
View File

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

1
Packages/ohif-design/app.styl
View File

@ -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"

BIN
Packages/ohif-design/assets/theme-icons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

12
Packages/ohif-design/package.js
View File

@ -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
});

47
Packages/ohif-design/styles/imports/theme-icons.styl Normal file
View File

@ -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

35
Packages/ohif-design/styles/imports/themes/theme-crickets.styl Normal file
View File

@ -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
}

35
Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl Normal file
View File

@ -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
}

35
Packages/ohif-design/styles/imports/themes/theme-mint.styl Normal file
View File

@ -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
}

35
Packages/ohif-design/styles/imports/themes/theme-overcast.styl Normal file
View File

@ -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
}

35
Packages/ohif-design/styles/imports/themes/theme-quartz.styl Normal file
View File

@ -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
}

11
Packages/ohif-design/styles/imports/theme-tide.styl → Packages/ohif-design/styles/imports/themes/theme-tide.styl
View File

@ -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

13
Packages/ohif-design/styles/imports/theme-tigerlilly.styl → Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl
View File

@ -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

9
Packages/ohif-design/styles/imports/theming.styl
View File

@ -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

1
Packages/ohif-study-list/client/components/index.js
View File

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

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

@ -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

3
Packages/ohif-study-list/client/components/themeSelector/index.js Normal file
View File

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

28
Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.html Normal file
View File

@ -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>

69
Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.js Normal file
View File

@ -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)
});

36
Packages/ohif-study-list/client/components/themeSelector/themeSelectorModal/themeSelectorModal.styl Normal file
View File

@ -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

6
Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html
View File

@ -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

3
Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js
View File

@ -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');