LT-251: Making studies switch behave like demonstrated in the design video

Packages/lesiontracker/client/components/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 'left'}}rp-r-3{{else}}rp-l-3{{/if}}">
-            <div class="switchSection switchSectionStudy rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
+            <div class="switchSection switchSectionStudy rp-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
                 <div class="label">Study</div>
                 <div class="studySwitch">
                     <div class="studyBox"></div>
@@ -12,7 +12,7 @@
                     </div>
                 </div>
             </div>
-            <div class="switchSection switchSectionSeries rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
+            <div class="switchSection switchSectionSeries rp-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
                 {{#let thumbnailsList=(studyThumbnails currentStudy)}}
                     <div class="label">Series</div>
                     <div class="seriesSwitch clearfix">

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js

@@ -35,10 +35,12 @@ Template.studySeriesQuickSwitch.onCreated(() => {
 
 Template.studySeriesQuickSwitch.events({
     'mouseenter .js-quick-switch, mouseenter .js-quick-switch .switchSectionSeries'(event, instance) {
+        instance.$('.quickSwitchWrapper').addClass('overlay');
         $(event.currentTarget).addClass('hover');
     },
     'mouseleave .js-quick-switch'(event, instance) {
         instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
+        instance.$('.quickSwitchWrapper').removeClass('overlay');
     }
 });
 

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -6,16 +6,41 @@ $seriesSpacing = 2px
 .quickSwitchWrapper
   position: absolute
   top: 0
+
   &.middle
     left: 50%
     transform(translateX(-50%))
+
   &.left
     border-right: 1px solid $uiBorderColor
     right: 50%
+
   &.right
     left: 50%
 
+  &.overlay .quickSwitch
+    z-index: 1
+
+  &:before
+    background-color: $primaryBackgroundColor
+    bottom: 0
+    content: ''
+    left: 0
+    opacity: 0
+    position: fixed
+    right: 0
+    top: 0
+    transition(opacity 0.3s ease\, visibility 0s linear 0.3s)
+    visibility: hidden
+    z-index: 1
+
+  &.overlay:before
+    opacity: 0.8
+    transition(opacity 0.3s ease\, visibility 0s linear 0s)
+    visibility: visible
+
 .quickSwitch
+  position: relative
 
   .switchSection
     display: inline-block
@@ -27,7 +52,7 @@ $seriesSpacing = 2px
       .studySwitch .studyBox, .seriesSwitch .seriesItem
         opacity: 0
       .switchHover
-        opacity: 0.8
+        opacity: 1
       .studyHover
         transform(scale(1))
 
@@ -35,7 +60,7 @@ $seriesSpacing = 2px
       .seriesHover
         .thumbnailsWrapper
           transition(all 0.3s ease)
-          transform(scale(0.8) translateY($switchSize))
+          transform(scale(0.9) translateY($switchSize*1.5))
         .thumbnailEntry .seriesDetails
           opacity: 0
           visibility: hidden
@@ -61,6 +86,8 @@ $seriesSpacing = 2px
       position: relative
 
     .studySwitch
+      .studyTimepointBrowser
+        background-color: transparent
       .studyTimepointStudy.active .studyModality
         box-shadow: inset 0 0 0 3px $activeColor
       .studyBox
@@ -105,7 +132,6 @@ $seriesSpacing = 2px
       text-transform: uppercase
 
 .switchHover
-  background: black
   border: 10px solid transparent
   border-radius: 5px
   margin: -10px