Creating a new quick switch template

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
+              border-left: none

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

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,
+            'margin-right': 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y,
-            bottom: 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
+            'margin-bottom': 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x
         });
     }
 });

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
+    max-height: inherit
-    left: 0
     overflow: hidden
-    position: absolute
-    right: 0
-    top: 0
 
     &.scroll-x
       overflow-x: scroll

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

Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html

@@ -5,6 +5,7 @@
                 <div class="removable">
                     {{>imageViewerViewport (clone viewport)}}
                 </div>
+                {{>seriesQuickSwitch (clone this viewportIndex=@index)}}
             </div>
         {{/each}}
     </div>

Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html

@@ -0,0 +1,31 @@
+<template name="seriesQuickSwitch">
+    {{#if shallDisplay}}
+        <div class="series-quick-switch {{side}} clearfix">
+            <div class="series-switch rp-t-1 rp-x-1">
+                <div class="title-label">Series</div>
+                <div class="series-box r-font">
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item"></div>
+                    <div class="series-item count">37</div>
+                    {{#scrollArea class='series-browser'}}
+                        <div>BBBBB</div>
+                    {{/scrollArea}}
+                </div>
+            </div>
+            <div class="study-switch rp-t-1 rp-x-1">
+                <div class="title-label">Study</div>
+                <div class="study-box r-font">
+                    {{#scrollArea class='study-browser'}}
+                        <div>AAAAA</div>
+                    {{/scrollArea}}
+                </div>
+            </div>
+        </div>
+    {{/if}}
+</template>

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

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

Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html

@@ -1,7 +1,7 @@
 <template name="studySeriesQuickSwitch">
     <div class="quickSwitchWrapper {{side}}">
-        <div class="quickSwitch js-quick-switch clearfix rp-t-1 {{#if eq side 'right'}}rp-l-3{{/if}}{{#if eq side 'left'}}rp-r-3{{/if}}">
+        <div class="quickSwitch js-quick-switch clearfix {{#if eq side 'right'}}rp-l-3{{/if}}{{#if eq side 'left'}}rp-r-3{{/if}}">
-            <div class="switchSection switchSectionStudy rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
+            <div class="switchSection switchSectionStudy rp-t-1 rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
                 <div class="label">Study</div>
                 <div class="studySwitch">
                     <div class="studyBox"></div>
@@ -12,7 +12,7 @@
                     </div>
                 </div>
             </div>
-            <div class="switchSection switchSectionSeries rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
+            <div class="switchSection switchSectionSeries rp-t-1 rp-x-1 {{#if eq side 'right'}}pull-left{{else}}pull-right{{/if}}">
                 {{#let thumbnailsList=(studyThumbnails currentStudy)}}
                     <div class="label">Series</div>
                     <div class="seriesSwitch clearfix">

Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -1,4 +1,4 @@
-@import "{ohif:design}/app"
+@require '{ohif:design}/app'
 
 $switchSize = 55px
 $seriesSpacing = 2px
@@ -103,10 +103,14 @@ $seriesSpacing = 2px
       position: relative
 
     .studySwitch
+      padding: 2px 1px 0
+
       .studyTimepointBrowser
         background-color: transparent
+
       .study-browser-item.active .study-item-box
         theme('box-shadow', 'inset 0 0 0 3px $activeColor')
+
       .studyBox
         theme('background-color', '$uiGrayDark')
         theme('border', 'solid 2px $uiBorderColorDark')
@@ -121,7 +125,7 @@ $seriesSpacing = 2px
       width: $switchSize + $seriesSpacing
 
       .seriesItem
-        theme('background-color', '$boxBackgroundColor')Dark
+        theme('background-color', '$boxBackgroundColor')
         border-radius: 3px
         height: 15px
         margin: $seriesSpacing

Packages/ohif-viewerbase/package.js

@@ -179,6 +179,10 @@ Package.onUse(function(api) {
     api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.js', 'client');
     api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.styl', 'client');
 
+    api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html', 'client');
+    api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl', 'client');
+    api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js', 'client');
+
     api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html', 'client');
     api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl', 'client');
     api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js', 'client');