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

feat(user preferences) Add User Preferences & Theming to Standalone Viewer (closes #117). Update Standalone to Meteor 1.7

Browse Source
This commit is contained in:
Erik Ziegler committed 2018-07-04 17:43:50 +02:00
1 parent 7090b4f3e0
commit de7135f3b8
32 files changed
+337 -250
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/ohif-design/components/roundedButtonGroup/roundedButtonGroup.styl
+1 -1
View File
@@ -32,7 +32,7 @@ $height = 25px
padding: 0 22px
position: relative
text-transform: uppercase
transition: transition($sidebarTransition)
transition($sidebarTransition)
z-index: 1
svg
Packages/ohif-design/styles/common/form.styl
+16
View File
@@ -76,3 +76,19 @@ label.wrapperLabel:not(.checkboxLabel)
&.select2-container--open span.select2-selection span.select2-selection__arrow
theme('background-color', '$uiGrayDark')
theme('color', '$textPrimaryColor')
.form-control
background-color: #FFFFFF
border: 0
border-radius(2px)
font-size: 14px
height: 30px
line-height: 16px
padding: 8px 9px 6px
&:focus
theme('box-shadow', '0 0 0 2px $activeColor !important')
.form-themed .form-control
theme('box-shadow', '0 0 0 1px $uiBorderColor')
Packages/ohif-design/styles/common/global.styl
+158 -3
View File
@@ -1,8 +1,10 @@
@require '{ohif:design}/app'
@import '{ohif:design}/app'
html body
theme('background-color', '$primaryBackgroundColor')
font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
-webkit-backface-visibility: hidden // Prevent Chrome from shifting parent elements on transform
font-family: Roboto
html body.stretch
height: 100%
@@ -105,15 +107,62 @@ body .select2-container--default .select2-results>.select2-results__options
.modal-dialog
.modal-content
theme('background', '$primaryBackgroundColor')
theme('background-color', '$uiGrayDarker')
theme('border-color', '$uiBorderColor')
theme('color', '$textSecondaryColor')
border-radius(6px)
border: 0
.modal-header, .modal-footer
theme('border-color', '$uiBorderColor')
&:hover
.dialog-separator,
.dialog-separator-before,
.dialog-separator-after
position: relative
.dialog-separator:before,
.dialog-separator:after,
.dialog-separator-before:before,
.dialog-separator-after:after
background-color: #000000
box-shadow(-50px 0 0 #000000\, 50px 0 0 #000000)
content: ' '
display: block
height: 3px
left: 0
position: absolute
width: 100%
.dialog-separator:before,
.dialog-separator-before:before
top: -3px
.dialog-separator:after,
.dialog-separator-after:after
bottom: -3px
.modal-body
theme('color', '$textPrimaryColor')
padding: 16px 22px 25px
position: relative
.modal-header
border-bottom-width: 3px
border-bottom-style: solid
border-bottom-color: #000000
padding: 19px 22px 17px
position: relative
h4
theme('color', '$textSecondaryColor')
font-size: 20px
font-weight: 500
line-height: 24px
padding-right: 24px
.modal-footer
border-top: 0
.card-round
theme('background-color', '$uiGrayDark')
@@ -199,3 +248,109 @@ body .select2-container--default .select2-results>.select2-results__options
.nowrap
white-space: nowrap
.themed
table
theme('color', '$textPrimaryColor')
th, td
font-size: 15px
font-weight: normal
th
line-height: 60px
td
line-height: 18px
.btn
border: 0
border-radius(4px)
font-size: 15px
font-weight: normal
height: 37px
line-height: 37px
padding: 0 12px
&.btn-primary, &.btn-secondary
color: #000000
&:hover, &:active, &:focus, &:focus:active
color: #000000
&.btn-primary, &.btn-secondary, &.btn-danger
transition(background-color 0.3s ease)
&.btn-primary
theme('background-color', '$activeColor')
&:hover, &:active, &:focus, &:focus:active
theme('background-color', '$activeColor', 0.8)
&.btn-secondary
theme('background-color', '$textSecondaryColor')
&:hover, &:active, &:focus, &:focus:active
theme('background-color', '$textSecondaryColor', 0.8)
&.btn-danger
theme('background-color', '$destructiveColor')
theme('color', '$textPrimaryColor')
&:hover, &:active, &:focus, &:focus:active
theme('color', '$textPrimaryColor')
theme('background-color', '$destructiveColor', 0.8)
&.active
box-shadow(inset 1px 1px 2px rgba(0, 0, 0, 0.5))
.wrapperLabel .wrapperText
theme('color', '$textPrimaryColor')
font-size: 14px
font-weight: bold
line-height: 16px
&:not(:empty)
margin-bottom: 13px
.nav-tabs
border-bottom: 0
margin-bottom: 3px
position: relative
z-index: 1
&>li
font-size: 14px
font-weight: normal
height: 40px
line-height: 40px
margin-bottom: 0
&>a
display: block
width: 100%
line-height: inherit
margin: 0
height: inherit
padding: 0 10px 0 10px
&:after
background-color: transparent
bottom: -3px
content: ' '
display: block
height: 3px
transition(background-color 0.3s ease)
width: 100%
&>a, &.active>a
&, &:hover, &:active, &:focus
theme('color', '$activeColor')
background-color: transparent
border: 0
&.active>a
font-weight: bold
&:after
theme('background-color', '$activeColor')
Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.styl
+2 -2
View File
@@ -42,14 +42,14 @@ $height = 20px
theme('background-color', '$uiGrayDark')
theme('border', '2px solid $uiBorderColorDark')
theme('color', '$textSecondaryColor')
transition: transition($sidebarTransition)
transition($sidebarTransition)
border-radius: $height
&.active a
theme('background-color', '$activeColor')
theme('border-color', '$uiBorderColorActive')
theme('color', '$textColorActive')
transition: transition($sidebarTransition)
transition($sidebarTransition)
p
h2
Packages/ohif-hotkeys/package.js
+1 -1
View File
@@ -19,7 +19,7 @@ Package.onUse(function(api) {
'reactive-var',
'session',
'iron:router',
'u2622:persistent-session'
'cultofcoders:persistent-session'
]);
// OHIF dependencies
Packages/ohif-themes-common/client/components/themeSelectorModal/themeSelectorModal.html
+1 -1
View File
@@ -1,6 +1,6 @@
<template name="themeSelectorModal">
{{#dialogForm (extend this
id='themeSelectorModal' dialogClass='modal-lg' confirmLabel='Apply theme'
id='themeSelectorModal' dialogClass='themed modal-lg' confirmLabel='Apply theme'
title='Themes' titleIcon='fa fa-sliders'
)}}
<ul class="theme-list text-center">
Packages/ohif-themes-common/themes/theme-tide.styl
+3 -2
View File
@@ -12,7 +12,7 @@ $ohifThemesCommon['tide'] = {
$uiGray: #263340
$uiGrayDark: #16202B
$uiGrayDarker: #151A1F
$uiGrayDarkest: #14191E
$uiGrayDarkest: #14202A
// Interface UI Colors
$defaultColor: #9CCEF9
@@ -22,13 +22,14 @@ $ohifThemesCommon['tide'] = {
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #00a4d9
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
$boxBackgroundColor: #3E5975
// Text Colors
$textColorActive: #000000
$textPrimaryColor: #ffffff
$textSecondaryColor: #91B9CD
$largeNumbersColor: #6FBDE2
$textDisabledColor: #878787
// Other Colors
$imageSliderColor: #163239
Packages/ohif-user-management/assets/user-menu-icons.svg
-26
View File
@@ -1,26 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="theme" viewBox="0 0 24 24">
<title>Theme</title>
<path d="M17.484 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM14.484 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM9.516 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM6.516 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM12 3c4.969 0 9 3.609 9 8.016 0 2.766-2.25 4.969-5.016 4.969h-1.734c-0.844 0-1.5 0.656-1.5 1.5 0 0.375 0.141 0.703 0.375 0.984s0.375 0.656 0.375 1.031c0 0.844-0.656 1.5-1.5 1.5-4.969 0-9-4.031-9-9s4.031-9 9-9z"></path>
</symbol>
<symbol id="log" viewBox="0 0 24 24">
<title>Log</title>
<path d="M9.516 14.016c2.484 0 4.5-2.016 4.5-4.5s-2.016-4.5-4.5-4.5-4.5 2.016-4.5 4.5 2.016 4.5 4.5 4.5zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281c-1.125 0.984-2.625 1.547-4.219 1.547-3.609 0-6.516-2.859-6.516-6.469s2.906-6.516 6.516-6.516 6.469 2.906 6.469 6.516c0 1.594-0.563 3.094-1.547 4.219l0.281 0.281h0.797z"></path>
</symbol>
<symbol id="server" viewBox="0 0 24 28">
<title>Server</title>
<path d="M12 12c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 24c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 18c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 0c6.625 0 12 1.797 12 4v2c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2c0-2.203 5.375-4 12-4z"></path>
</symbol>
<symbol id="study-list" viewBox="0 0 24 24">
<title>Study List</title>
<path d="M9 5.016h12v3.984h-12v-3.984zM9 18.984v-3.984h12v3.984h-12zM9 14.016v-4.031h12v4.031h-12zM3.984 9v-3.984h4.031v3.984h-4.031zM3.984 18.984v-3.984h4.031v3.984h-4.031zM3.984 14.016v-4.031h4.031v4.031h-4.031z"></path>
</symbol>
<symbol id="logout" viewBox="0 0 24 28">
<title>Logout</title>
<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
</symbol>
<symbol id="password" viewBox="0 0 18 28">
<title>Password</title>
<path d="M5 12h8v-3c0-2.203-1.797-4-4-4s-4 1.797-4 4v3zM18 13.5v9c0 0.828-0.672 1.5-1.5 1.5h-15c-0.828 0-1.5-0.672-1.5-1.5v-9c0-0.828 0.672-1.5 1.5-1.5h0.5v-3c0-3.844 3.156-7 7-7s7 3.156 7 7v3h0.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
</symbol>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

Packages/ohif-user-management/package.js
-3
View File
@@ -26,9 +26,6 @@ Package.onUse(function(api) {
api.use('ohif:user');
api.use('ohif:study-list');
// Load icons
api.addAssets('assets/user-menu-icons.svg', 'client');
api.addFiles('both/collections.js', ['client', 'server']);
//api.addFiles('both/schema/reviewers.js', ['client', 'server']);
Packages/ohif-viewerbase/assets/icons.svg
+24
View File
@@ -210,4 +210,28 @@
<path d="m26.695 2.992c-1.014-1.016-2.362-1.575-3.797-1.575 -0.001 0-0.001 0-0.002 0 -1.435 0-2.784 0.56-3.798 1.573l-7.551 7.553c-1.017 1.016-1.576 2.363-1.576 3.799 0 1.434 0.558 2.784 1.574 3.797l2.297 2.297 2.01-2.009 -2.298-2.297c-0.477-0.477-0.741-1.113-0.741-1.788 0-0.676 0.265-1.311 0.742-1.788l7.553-7.555c0.477-0.477 1.111-0.74 1.789-0.74 0 0 0 0 0.001 0 0.674 0 1.309 0.264 1.786 0.74l2.297 2.299c0.477 0.477 0.74 1.111 0.74 1.788 0 0.674-0.264 1.311-0.74 1.788l-3.776 3.777 2.009 2.009 3.776-3.777c1.014-1.013 1.573-2.363 1.574-3.797 0-1.435-0.56-2.784-1.574-3.797l-2.295-2.296z"/>
</g>
</symbol>
<symbol id="theme" viewBox="0 0 24 24">
<title>Theme</title>
<path d="M17.484 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM14.484 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM9.516 8.016c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM6.516 12c0.844 0 1.5-0.656 1.5-1.5s-0.656-1.5-1.5-1.5-1.5 0.656-1.5 1.5 0.656 1.5 1.5 1.5zM12 3c4.969 0 9 3.609 9 8.016 0 2.766-2.25 4.969-5.016 4.969h-1.734c-0.844 0-1.5 0.656-1.5 1.5 0 0.375 0.141 0.703 0.375 0.984s0.375 0.656 0.375 1.031c0 0.844-0.656 1.5-1.5 1.5-4.969 0-9-4.031-9-9s4.031-9 9-9z"></path>
</symbol>
<symbol id="log" viewBox="0 0 24 24">
<title>Log</title>
<path d="M9.516 14.016c2.484 0 4.5-2.016 4.5-4.5s-2.016-4.5-4.5-4.5-4.5 2.016-4.5 4.5 2.016 4.5 4.5 4.5zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281c-1.125 0.984-2.625 1.547-4.219 1.547-3.609 0-6.516-2.859-6.516-6.469s2.906-6.516 6.516-6.516 6.469 2.906 6.469 6.516c0 1.594-0.563 3.094-1.547 4.219l0.281 0.281h0.797z"></path>
</symbol>
<symbol id="server" viewBox="0 0 24 28">
<title>Server</title>
<path d="M12 12c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 24c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 18c4.703 0 9.422-0.844 12-2.656v2.656c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2.656c2.578 1.813 7.297 2.656 12 2.656zM12 0c6.625 0 12 1.797 12 4v2c0 2.203-5.375 4-12 4s-12-1.797-12-4v-2c0-2.203 5.375-4 12-4z"></path>
</symbol>
<symbol id="study-list" viewBox="0 0 24 24">
<title>Study List</title>
<path d="M9 5.016h12v3.984h-12v-3.984zM9 18.984v-3.984h12v3.984h-12zM9 14.016v-4.031h12v4.031h-12zM3.984 9v-3.984h4.031v3.984h-4.031zM3.984 18.984v-3.984h4.031v3.984h-4.031zM3.984 14.016v-4.031h4.031v4.031h-4.031z"></path>
</symbol>
<symbol id="logout" viewBox="0 0 24 28">
<title>Logout</title>
<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
</symbol>
<symbol id="password" viewBox="0 0 18 28">
<title>Password</title>
<path d="M5 12h8v-3c0-2.203-1.797-4-4-4s-4 1.797-4 4v3zM18 13.5v9c0 0.828-0.672 1.5-1.5 1.5h-15c-0.828 0-1.5-0.672-1.5-1.5v-9c0-0.828 0.672-1.5 1.5-1.5h0.5v-3c0-3.844 3.156-7 7-7s7 3.156 7 7v3h0.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
</symbol>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Packages/ohif-viewerbase/client/components/viewer/userPreferences/dialog.html
+20
View File
@@ -0,0 +1,20 @@
<template name="userPreferencesDialog">
{{#dialogSimple (extend this class='themed' dialogClass='dialog-user-preferences modal-lg' title='User Preferences')}}
<div class="dialog-separator-after">
<ul class="nav nav-tabs">
<li role="presentation" class="{{tabClasses 'hotkeys'}}">
<a href="#" data-id="hotkeys">Keyboard Shortcuts</a>
</li>
<li role="presentation" class="{{tabClasses 'wwwc'}}">
<a href="#" data-id="wwwc">Window/Levels</a>
</li>
</ul>
</div>
<div class="{{#unless eq instance.activeTab.get 'hotkeys'}}hidden{{/unless}}">
{{>hotkeysForm (extend contextName='viewer')}}
</div>
<div class="{{#unless eq instance.activeTab.get 'wwwc'}}hidden{{/unless}}">
{{>windowLevelPresetsForm}}
</div>
{{/dialogSimple}}
</template>
Packages/ohif-viewerbase/client/components/viewer/userPreferences/dialog.js
+22
View File
@@ -0,0 +1,22 @@
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
Template.userPreferencesDialog.onCreated(() => {
const instance = Template.instance();
instance.activeTab = new ReactiveVar('hotkeys');
});
Template.userPreferencesDialog.events({
'click .nav-tabs li a'(event, instance) {
const tabId = $(event.currentTarget).attr('data-id');
instance.activeTab.set(tabId);
}
});
Template.userPreferencesDialog.helpers({
tabClasses(tabId) {
const instance = Template.instance();
const activeTab = instance.activeTab.get();
return tabId === activeTab ? 'active' : '';
}
});
Packages/ohif-viewerbase/client/components/viewer/userPreferences/dialog.styl
+18
View File
@@ -0,0 +1,18 @@
@require '{ohif:design}/app'
.dialog-user-preferences
.modal-body
overflow: hidden
.form-content
border-bottom: 3px solid #000000
margin-bottom: 20px
margin-left: -22px
margin-right: -22px
max-height: 70vh
overflow-y: auto
padding: 22px
.popover
width: 300px
Packages/ohif-viewerbase/package.js
+6 -2
View File
@@ -14,7 +14,7 @@ Package.onUse(function(api) {
'stylus',
'momentjs:moment',
'validatejs',
'u2622:persistent-session'
'cultofcoders:persistent-session'
]);
// OHIF dependencies
@@ -177,6 +177,10 @@ Package.onUse(function(api) {
api.addFiles('client/components/viewer/toolbarSectionTools/toolbarSectionTools.js', 'client');
api.addFiles('client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl', 'client');
api.addFiles('client/components/viewer/userPreferences/dialog.html', 'client');
api.addFiles('client/components/viewer/userPreferences/dialog.js', 'client');
api.addFiles('client/components/viewer/userPreferences/dialog.styl', 'client');
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.html', 'client');
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.js', 'client');
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.styl', 'client');
@@ -228,7 +232,7 @@ Package.onTest(function(api) {
'mongo',
'momentjs:moment',
'validatejs',
'u2622:persistent-session'
'cultofcoders:persistent-session'
], both);
// OHIF dependencies