Adding studies and timepoints to quickSwitch

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

@@ -20,7 +20,7 @@
                 <div class="title-label">Study</div>
                 <div class="study-box r-font">
                     {{#scrollArea class='study-browser'}}
-                        <div>AAAAA</div>
+                        {{>Template.dynamic template=studyBrowserTemplate data=(clone this currentStudy=instance.currentStudy)}}
                     {{/scrollArea}}
                 </div>
             </div>

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

@@ -94,11 +94,15 @@ Template.seriesQuickSwitch.helpers({
         }
 
         return seriesItems;
+    },
+
+    studyBrowserTemplate() {
+        return OHIF.viewer.quickSwitchStudyBrowserTemplate || 'studyBrowserQuickSwitch';
     }
 });
 
 Template.seriesQuickSwitch.events({
-    'mouseenter .series-switch'(event, instance) {
+    'mouseenter .series-switch, rescale .series-switch'(event, instance) {
         // Control the width of the series browser
         const $switch = $(event.currentTarget);
         const browserWidth = $switch.offset().left + $switch.outerWidth();

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

@@ -66,13 +66,27 @@
     float: left
     position: relative
 
-  .study-browser
-    background: purple
+  .study-switch:hover:after
+    content: ''
+    display: block
+    height: 100px
     left: 0
+    position: absolute
+    top: 0
+    width: 300px
+
+  .study-browser
+    left: 0
+    margin-top: 100px
+    max-height: calc(100vh - 100px)
     transform-origin(1em calc(1em + 17px))
-    width: 285px
+    width: 300px
+
+    .study-browser-list
+      padding: 0 10px
 
   .series-browser
+    max-height: 100vh
     max-width: 711px
     right: 0
     transform-origin(calc(100% - 1em) calc(1em + 15px))
@@ -95,7 +109,6 @@
 
   .series-browser,
   .study-browser
-    max-height: 100vh
     min-height: 120px
     opacity: 0
     position: absolute
@@ -164,6 +177,9 @@
       transform(translateY(0))
       transition-delay(0.3s)
 
+  .study-browser-item.active .study-item-box
+    theme('box-shadow', 'inset 0 0 0 3px $activeColor')
+
 @media screen and (max-width: 1599px)
   .series-quick-switch