diff --git a/Packages/design/package.js b/Packages/design/package.js index 77f3ee544..00243c19f 100644 --- a/Packages/design/package.js +++ b/Packages/design/package.js @@ -35,6 +35,7 @@ Package.onUse(function(api) { // Component styles api.addFiles([ + 'styles/components/dialog.styl', 'styles/components/radio.styl', 'styles/components/select2.styl', 'styles/components/selectTree.styl', diff --git a/Packages/design/styles/common/keyframes.styl b/Packages/design/styles/common/keyframes.styl index 0c406e221..506b77b5c 100644 --- a/Packages/design/styles/common/keyframes.styl +++ b/Packages/design/styles/common/keyframes.styl @@ -1,19 +1,41 @@ @import "{design}/app.styl" @keyframes zoomIn - from - transform(scale(0)) - to - transform(scale(1)) + 0% + transform(scale(0)) + 100% + transform(scale(1)) + +@keyframes zoomOut + 0% + transform(scale(1)) + 100% + transform(scale(0)) + +@keyframes slideInDown + 0% + opacity: 0 + transform(translateY(-100%) scale(0)) + 100% + opacity: 1 + transform(translateY(0) scale(1)) + +@keyframes slideOutUp + 0% + opacity: 1 + transform(translateY(0) scale(1)) + 100% + opacity: 0 + transform(translateY(-100%) scale(0)) @keyframes fadeIn - from - opacity: 0 - to - opacity: 1 + from + opacity: 0 + to + opacity: 1 @keyframes fadeOut - from - opacity: 1 - to - opacity: 0 + from + opacity: 1 + to + opacity: 0 diff --git a/Packages/design/styles/components/dialog.styl b/Packages/design/styles/components/dialog.styl new file mode 100644 index 000000000..85179b6d4 --- /dev/null +++ b/Packages/design/styles/components/dialog.styl @@ -0,0 +1,12 @@ +@import "{design}/app" + +.viewerDialogs>* + + &:not(.dialog-closed):not(.dialog-open) + display: none + + &.dialog-closed + animateSlideOutUp() + + &.dialog-open + animateSlideInDown() diff --git a/Packages/design/styles/imports/animations.styl b/Packages/design/styles/imports/animations.styl index 5f8951ab1..d1c195735 100644 --- a/Packages/design/styles/imports/animations.styl +++ b/Packages/design/styles/imports/animations.styl @@ -1,17 +1,29 @@ animationDefaults() - animation-duration: 0.3s - animation-direction: alternate - animation-timing-function: ease-out - animation-fill-mode: forwards + animation-duration: 0.3s + animation-direction: alternate + animation-timing-function: ease-out + animation-fill-mode: forwards animateZoomIn() - animationDefaults() - animation-name: zoomIn + animationDefaults() + animation-name: zoomIn + +animateZoomOut() + animationDefaults() + animation-name: zoomOut + +animateSlideInDown() + animationDefaults() + animation-name: slideInDown + +animateSlideOutUp() + animationDefaults() + animation-name: slideOutUp animateFadeIn() - animationDefaults() - animation-name: fadeIn + animationDefaults() + animation-name: fadeIn animateFadeOut() - animationDefaults() - animation-name: fadeOut + animationDefaults() + animation-name: fadeOut diff --git a/Packages/design/styles/imports/theming.styl b/Packages/design/styles/imports/theming.styl index 68b752750..e3a3c0832 100644 --- a/Packages/design/styles/imports/theming.styl +++ b/Packages/design/styles/imports/theming.styl @@ -1,32 +1,69 @@ $themes = {} $defaultTheme = 'tide' +// Import the theme variables @import "./theme-tide.styl" @import "./theme-tigerlilly.styl" -parseSpaceVars($theme, $value) - $valueSplit = split(' ', $value) - $list = '' - pop($list) - for $property in $valueSplit - if ($theme[$property]) - push($list, $theme[$property]) - else - push($list, $property) - join(' ', $list) +/* + * Process each theme variable in the given value, splitting it by space + */ +parseSpaceVars($theme, $value, $alpha) + // Split values by space + $valueSplit = split(' ', $value) -parseCommaVars($theme, $value) - $valueSplit = split(',', $value) - $list = '' - pop($list) - for $sentence in $valueSplit - push($list, parseSpaceVars($theme, $sentence)) - unquote(join(',', $list)) + // Create an empty list + $list = '' + pop($list) -theme($property, $value) - / {selector()} - {$property}: parseCommaVars($themes[$defaultTheme], $value) - for $themeName, $theme in $themes - for $selectorPiece in split(',', selector()) - / body.theme-{$themeName} {$selectorPiece} - {$property}: parseCommaVars($theme, $value) + // Iterate over split values + for $property in $valueSplit + // Try to get the theme with current property key + $val = $theme[$property] + if ($val) + if($val is a 'color') + // Apply given alpha if it's a color + $val = alpha($val, $alpha) + // Push the processed theme variable to the list + push($list, $val) + else + // Push the property itself if not found in theme variables + push($list, $property) + + // Merge the resulting processed list by joining values back with space + join(' ', $list) + +/* + * Process each theme variable in the given value, splitting it by comma + */ +parseCommaVars($theme, $value, $alpha) + // Split values by comma + $valueSplit = split(',', $value) + + // Create an empty list + $list = '' + pop($list) + + // Iterate over split values + for $sentence in $valueSplit + // Procces the values splitting by space + push($list, parseSpaceVars($theme, $sentence, $alpha)) + + // Merge the resulting processed list by joining values back with comma + unquote(join(',', $list)) + +/* + * Return a processed theme variable or color with alpha + */ +theme($property, $value, $alpha=1) + + // Crete the selector for default theme + / {selector()} + {$property}: parseCommaVars($themes[$defaultTheme], $value, $alpha) + + // Create the selector for each registered theme + for $themeName, $theme in $themes + for $selectorPiece in split(',', selector()) + // prefix the selector with the body.theme-{themeName} selector + / body.theme-{$themeName} {$selectorPiece} + {$property}: parseCommaVars($theme, $value, $alpha) diff --git a/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl b/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl index 7d7681269..fd45d91db 100644 --- a/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl +++ b/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl @@ -1,10 +1,9 @@ @import "{design}/app.styl" .ruleEntryDialog - theme('background', '$uiGrayDarkest') - theme('border', '1px solid $uiBorderColor') + theme('background', '$uiGrayDarkest', 0.95) + theme('border', '1px solid $uiBorderColor', 0.95) theme('color', '$textSecondaryColor') - display: none position: absolute top: 0 bottom: 0 @@ -17,7 +16,6 @@ padding: 10px background-color: rgba(255,255,255,1) outline: none - opacity: 0.95 border-radius: 8px .dialogContent diff --git a/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl b/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl index be233ff38..946ca5bfc 100644 --- a/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl +++ b/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl @@ -1,10 +1,9 @@ @import "{design}/app.styl" .settingEntryDialog - theme('border', '1px solid $uiBorderColor') - theme('background', '$uiGrayDarkest') + theme('border', '1px solid $uiBorderColor', 0.95) + theme('background', '$uiGrayDarkest', 0.95) theme('color', '$textSecondaryColor') - display: none position: absolute top: 0 bottom: 0 @@ -16,7 +15,6 @@ margin: auto padding: 10px outline: none - opacity: 0.95 border-radius: 8px .dialogContent diff --git a/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl b/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl index f64cdb223..87b25072e 100644 --- a/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl +++ b/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl @@ -1,10 +1,9 @@ @import "{design}/app.styl" .textEntryDialog - theme('border', '1px solid $uiBorderColor') - theme('background', '$uiGrayDarkest') + theme('border', '1px solid $uiBorderColor', 0.95) + theme('background', '$uiGrayDarkest', 0.95) theme('color', '$textSecondaryColor') - display: none position: absolute top: 0 bottom: 0 @@ -16,7 +15,6 @@ margin: auto padding: 10px outline: none - opacity: 0.95 border-radius: 8px .dialogContent diff --git a/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.html b/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.html index 9c15a94df..55a997cfb 100644 --- a/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.html +++ b/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.html @@ -1,16 +1,16 @@ \ No newline at end of file + diff --git a/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.styl b/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.styl index 4ec13230d..96fc8581b 100644 --- a/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.styl +++ b/Packages/lesiontracker/client/components/confirmDeleteDialog/confirmDeleteDialog.styl @@ -1,5 +1,4 @@ #confirmDeleteDialog - display: none position: absolute top: 0 bottom: 0 @@ -23,4 +22,4 @@ float: left #confirm - float: right \ No newline at end of file + float: right diff --git a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl index 18652d8e2..a5417bc94 100644 --- a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl +++ b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl @@ -1,5 +1,4 @@ #lesionLocationDialog, #lesionLocationRelabelDialog - display: none position: absolute top: 0 bottom: 0 @@ -32,4 +31,4 @@ height: 110px #lesionLocationRelabelDialog - height: 125px \ No newline at end of file + height: 125px diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl index edbc8416f..b5e76194f 100644 --- a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl @@ -3,13 +3,12 @@ $borderColor = rgba(77, 99, 110, 0.81) #lesionTableHUD - background: black + background: rgba(0, 0, 0, 0.95) border-radius: 8px border: solid 1px $borderColor; bottom: 3px height: 326px left: auto - opacity: 0.95 overflow: hidden position: absolute right: 3px diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl index b126139e3..708a7904e 100644 --- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl +++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl @@ -1,5 +1,4 @@ #nonTargetLesionLocationDialog, #nonTargetLesionRelabelDialog - display: none position: absolute top: 0 bottom: 0 @@ -10,7 +9,7 @@ height: 230px border-radius: 5px padding: 10px 20px 10px 20px - background-color: rgba(255,255,255,1) + background-color: white outline: none #selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse @@ -24,4 +23,4 @@ /* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */ .dialogMobile - margin: auto \ No newline at end of file + margin: auto diff --git a/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.styl b/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.styl index ec4fb8b07..d5230ed16 100644 --- a/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.styl +++ b/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.styl @@ -1,5 +1,4 @@ #nonTargetResponseDialog - display: none position: absolute top: 0 bottom: 0 @@ -21,4 +20,3 @@ .locationOK text-align: center - \ No newline at end of file diff --git a/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl b/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl index 21919e4c4..7078a444f 100644 --- a/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl +++ b/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl @@ -1,10 +1,9 @@ @import "{design}/app.styl" .annotationDialog - theme('border', '1px solid $uiBorderColor') - theme('background', '$uiGrayDarkest') + theme('border', '1px solid $uiBorderColor', 0.95) + theme('background', '$uiGrayDarkest', 0.95) theme('color', '$textSecondaryColor') - display: none z-index: 1000 position: absolute top: 0 @@ -16,7 +15,6 @@ padding: 10px width: 300px height: 140px - opacity: 0.95 border-radius: 8px h5, label diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl index dab8cbcbf..cdf2756f4 100644 --- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -1,23 +1,22 @@ @import "{design}/app.styl" #cineDialog - theme('border', '1px solid $uiBorderColor') - theme('background', '$uiGrayDarkest') + theme('border', '1px solid $uiBorderColor', 0.95) + theme('background', '$uiGrayDarkest', 0.95) theme('color', '$textSecondaryColor') border-radius: 8px bottom: 3px box-sizing: border-box - display: none height: 150px - left: auto - opacity: 0.95 + left: 50% overflow: hidden padding: 10px position: absolute right: 3px - top: auto + top: 50% width: 300px z-index: 1000 + transform(translateX(-50%) translateY(-50%)) h5 font-size: 20px @@ -28,8 +27,8 @@ font-weight: 400 .btn - theme('background', '$uiGrayDarkest') theme('color', '$textSecondaryColor') + background-color: transparent &:hover theme('color', '$hoverColor') diff --git a/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.html b/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.html index 3357f12dc..c81966b06 100644 --- a/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.html +++ b/Packages/viewerbase/client/components/viewer/layoutButton/layoutButton.html @@ -1,20 +1,20 @@ \ No newline at end of file + diff --git a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.html b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.html index cdebe6dcd..e9d119a4a 100644 --- a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.html +++ b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.html @@ -1,5 +1,5 @@ \ No newline at end of file + diff --git a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl index f611e626b..be58e6059 100644 --- a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl +++ b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl @@ -3,18 +3,16 @@ $borderColor = rgba(77, 99, 110, 0.81) .layoutChooser - theme('background', '$uiGrayDarkest') - width: 92px - height: 92px - min-width: 92px // to override bootstrap's dropdown-menu class - min-height: 92px - // theme('background-color', '$primaryBackgroundColor') - opacity: 0.95 - border-radius: 8px + theme('background', '$uiGrayDarkest', 0.95) border: 1px solid $borderColor; - - &.open - display: block + border-radius: 8px + height: 92px + min-height: 92px + min-width: 92px // to override bootstrap's dropdown-menu class + padding: 5px 0; + position: absolute; + width: 92px + z-index: 5000 table margin: 0 auto diff --git a/Packages/viewerbase/lib/enableHotkeys.js b/Packages/viewerbase/lib/enableHotkeys.js index 6647194f6..2e3b092ab 100644 --- a/Packages/viewerbase/lib/enableHotkeys.js +++ b/Packages/viewerbase/lib/enableHotkeys.js @@ -145,10 +145,10 @@ Meteor.startup(function() { } }, previousDisplaySet() { - OHIF.viewer.moveDisplaySet(false); + OHIF.viewer.moveDisplaySets(false); }, nextDisplaySet() { - OHIF.viewer.moveDisplaySet(true); + OHIF.viewer.moveDisplaySets(true); }, nextPanel: function() { nextActivePanel(); diff --git a/Packages/viewerbase/lib/toggleDialog.js b/Packages/viewerbase/lib/toggleDialog.js index 3d68a00f6..b25a14205 100644 --- a/Packages/viewerbase/lib/toggleDialog.js +++ b/Packages/viewerbase/lib/toggleDialog.js @@ -1,8 +1,6 @@ -toggleDialog = function(element) { - var elem = $(element); - if (elem.css('display') === 'none') { - elem.css('display', 'block'); - } else { - elem.css('display', 'none'); - } -}; \ No newline at end of file +toggleDialog = element => { + const $element = $(element); + const isClosed = $element.hasClass('dialog-open'); + $element.toggleClass('dialog-closed', isClosed); + $element.toggleClass('dialog-open', !isClosed); +};