diff --git a/LesionTracker/client/components/viewer/viewer.styl b/LesionTracker/client/components/viewer/viewer.styl index 16c49a404..13037282e 100644 --- a/LesionTracker/client/components/viewer/viewer.styl +++ b/LesionTracker/client/components/viewer/viewer.styl @@ -9,6 +9,7 @@ .viewportContainer border: none !important outline: 0 !important // Prevent blue outline in Chrome + position: relative &:hover &.active @@ -19,7 +20,7 @@ .removable .imageViewerViewport theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness) - + canvas border-color: transparent border-style: solid @@ -29,17 +30,17 @@ .removable .imageViewerViewport theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness) - + &:first-child .removable .imageViewerViewport theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) - + &.active .removable .imageViewerViewport border-right: none !important - + canvas theme('border-color', '$uiBorderColorActive') @@ -51,4 +52,4 @@ &:first-child .removable .imageViewerViewport - border-left: none \ No newline at end of file + border-left: none diff --git a/LesionTracker/client/components/viewerSection/viewerSection.styl b/LesionTracker/client/components/viewerSection/viewerSection.styl index 1f7dedd77..64d3836fb 100644 --- a/LesionTracker/client/components/viewerSection/viewerSection.styl +++ b/LesionTracker/client/components/viewerSection/viewerSection.styl @@ -45,10 +45,16 @@ flex: 1 height: 100% order: 2 - overflow: hidden + overflow: visible + position: relative transition($sidebarTransition) width: 100% + .viewerMain + left: 0 + position: absolute + top: 0 + .sidebar-right flex: 1 margin-right: - $lesionsSidebarMenuWidth diff --git a/Packages/ohif-core/client/components/scrollArea/scrollArea.js b/Packages/ohif-core/client/components/scrollArea/scrollArea.js index 23f4eb652..f25726fe5 100644 --- a/Packages/ohif-core/client/components/scrollArea/scrollArea.js +++ b/Packages/ohif-core/client/components/scrollArea/scrollArea.js @@ -22,8 +22,8 @@ Template.scrollArea.onRendered(() => { const x = config.scrollX ? 1 : 0; const y = config.scrollY ? 1 : 0; $scrollable.css({ - right: 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y, - bottom: 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x + 'margin-right': 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y, + 'margin-bottom': 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x }); } }); diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl index 8e622cb47..79cc624af 100644 --- a/Packages/ohif-design/styles/common/global.styl +++ b/Packages/ohif-design/styles/common/global.styl @@ -143,15 +143,10 @@ body .select2-container--default .select2-results>.select2-results__options .scroll-area overflow: hidden - position: relative .scrollable - bottom: 0 - left: 0 + max-height: inherit overflow: hidden - position: absolute - right: 0 - top: 0 &.scroll-x overflow-x: scroll diff --git a/Packages/ohif-design/styles/imports/spacings.styl b/Packages/ohif-design/styles/imports/spacings.styl index aa4113ca2..a0d4e3c83 100644 --- a/Packages/ohif-design/styles/imports/spacings.styl +++ b/Packages/ohif-design/styles/imports/spacings.styl @@ -23,6 +23,9 @@ generateSpacings($prefix, $spacerX, $spacerY) $axes = x left right 0, y top bottom 1 + .r-font + font-size: $spacerX + for $property in $properties for $spacing in $spacings .{$prefix}{$property[0]}-a-{$spacing[0]} diff --git a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html index ef1fb839c..e44715abc 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html +++ b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html @@ -5,6 +5,7 @@
{{>imageViewerViewport (clone viewport)}}
+ {{>seriesQuickSwitch (clone this viewportIndex=@index)}} {{/each}} diff --git a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html new file mode 100644 index 000000000..a7aa49d0b --- /dev/null +++ b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html @@ -0,0 +1,31 @@ + diff --git a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js new file mode 100644 index 000000000..6d4bab3c8 --- /dev/null +++ b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js @@ -0,0 +1,29 @@ +import { Template } from 'meteor/templating'; +import { $ } from 'meteor/jquery'; +import { OHIF } from 'meteor/ohif:core'; + +// FIXME >>>> REMOVE +$(document.body).on('keydown', e => (e.keyCode === 69 && $('.quickSwitchWrapper').toggle()) || 1); + +Template.seriesQuickSwitch.helpers({ + shallDisplay() { + const instance = Template.instance(); + const { rows, columns } = instance.data; + return OHIF.uiSettings.displaySeriesQuickSwitch && rows === 1 && columns <= 2; + }, + + side() { + const instance = Template.instance(); + const { columns, viewportIndex } = instance.data; + if (columns === 1) return ''; + return viewportIndex === 0 ? 'left' : 'right'; + } +}); + +Template.seriesQuickSwitch.events({ + 'mouseenter .series-switch'(event, instance) { + const $switch = $(event.currentTarget); + const browserWidth = $switch.offset().left + $switch.outerWidth(); + $switch.find('.series-browser').width(browserWidth); + } +}); diff --git a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl new file mode 100644 index 000000000..a22578ff6 --- /dev/null +++ b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl @@ -0,0 +1,115 @@ +@require '{ohif:design}/app' + +.series-quick-switch + position: absolute + top: calc(100% - 100vh) + + &:before + box-shadow(0 0 0 5000px rgba(0, 0, 0, 0.8)) + transition(opacity 0.3s ease) + opacity: 0 + + &:hover + z-index: 2 + + &:before + opacity: 1 + + &:not(.left):not(.right) + left: 50% + transform(translateX(-50%)) + + &.left + theme('border-right', '1px solid $uiBorderColor') + right: 0 + + &.right + left: 0 + + .series-switch + float: right + + .study-switch + float: left + + .study-browser + left: auto + right: 0 + transform-origin(calc(100% - 1em) calc(1em + 17px)) + + .series-browser + left: 0 + right: auto + transform-origin(1em calc(1em + 15px)) + + .series-box .series-item + float: left + + .title-label + theme('color', '$textSecondaryColor') + font-size: 12px + font-weight: 500 + line-height: 12px + padding-bottom: 3px + text-align: center + + .series-switch, + .study-switch + float: left + position: relative + + .study-browser + background: purple + left: 0 + transform-origin(1em calc(1em + 17px)) + width: 285px + + .series-browser + background: blue + max-width: 711px + right: 0 + transform-origin(calc(100% - 1em) calc(1em + 15px)) + + .series-browser, + .study-browser + max-height: 100vh + min-height: 120px + position: absolute + top: 0 + transform(scale(0)) + transition(transform 0.3s ease) + + .series-box + height: 57px + width: 57px + + .series-item + theme('background-color', '$boxBackgroundColor') + border-radius(3px) + float: right + height: 15px + margin: 2px + width: 15px + + &.count + theme('color', '$textPrimaryColor') + background-color: transparent + font-size: 12px + font-weight: 500 + line-height: 17px + text-align: center + + &.active + theme('background-color', '$activeColor') + + + .study-box + theme('background-color', '$uiGrayDark') + theme('border', 'solid 2px $uiBorderColorDark') + border-radius: 11px + height: 57px + width: 57px + + .series-switch:hover .series-browser, + .study-switch:hover .study-browser + transform(scale(1)) diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html index 959e9d779..7d6b9f935 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html +++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html @@ -1,7 +1,7 @@