Adding series and scrolling to quickSwitch

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

@@ -42,7 +42,13 @@
       right: auto
       transform-origin(1em calc(1em + 15px))
 
-    .series-box .series-item
+      .thumbnails-wrapper
+        transform-origin(0% 0%)
+
+      .thumbnailEntry
+        float: left
+
+    .series-item
       float: left
 
   .title-label
@@ -50,8 +56,10 @@
     font-size: 12px
     font-weight: 500
     line-height:  12px
+    opacity: 1
     padding-bottom: 3px
     text-align: center
+    transition(opacity 0.3s ease)
 
   .series-switch,
   .study-switch
@@ -65,51 +73,114 @@
     width: 285px
 
   .series-browser
-    background: blue
     max-width: 711px
     right: 0
     transform-origin(calc(100% - 1em) calc(1em + 15px))
 
+    .thumbnails-wrapper
+      transition(transform 0.3s ease)
+      transform-origin(100% 0%)
+
+    .thumbnailEntry
+      float: right
+
+      .seriesDetails
+        opacity: 0
+        transform(translateY(-100%))
+        transition(transform 0.3s ease\, opacity 0.3s ease)
+
+    .scrollable
+      padding-top: 15px
+      transition(padding-bottom 0.3s ease)
+
   .series-browser,
   .study-browser
     max-height: 100vh
     min-height: 120px
+    opacity: 0
     position: absolute
     top: 0
     transform(scale(0))
-    transition(transform 0.3s ease)
+    transition(transform 0.3s ease\, opacity 0.3s ease)
+    z-index: 3
 
-  .series-box
+  .series-box,
+  .study-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
+    border-radius(11px)
 
+  .series-item
+    theme('background-color', '$boxBackgroundColor')
+    border-radius(3px)
+    float: right
+    height: 15px
+    margin: 2px
+    transition(opacity 0.3s ease)
+    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')
+
+  &.series-triggered .series-browser,
   .series-switch:hover .series-browser,
   .study-switch:hover .study-browser
+    opacity: 1
     transform(scale(1))
+
+  &.series-triggered .series-item,
+  .series-switch:hover .title-label
+    opacity: 0
+
+  &.series-triggered
+    .thumbnails-wrapper
+      transform(scale(0.9) translateY(80px))
+
+    .series-browser:not(:hover)
+      &>.scrollable
+        padding-bottom: 80px
+
+      &>.scroll-nav
+        opacity: 0
+
+  .series-switch:hover .series-browser
+    .thumbnails-wrapper
+      transform(scale(1) translateY(0))
+
+    .thumbnailEntry .seriesDetails
+      opacity: 1
+      transform(translateY(0))
+      transition-delay(0.3s)
+
+@media screen and (max-width: 1599px)
+  .series-quick-switch
+
+    .series-box,
+    .study-box
+      width: 36px
+      height: 36px
+
+    .study-box
+      border-radius(7px)
+
+    .series-item
+      height: 10px
+      margin: 1px
+      width: 10px
+
+      &.count
+        font-size: 10px
+        font-weight: 300
+        line-height: 10px