Creating a new quick switch template

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