LT-313: Adding scroll indicator in studies/series quick switch

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

@@ -6,7 +6,7 @@
                 <div class="studySwitch">
                     <div class="studyBox"></div>
                     <div class="switchHover studyHover clearfix">
-                        <div class="scrollArea {{addMacOSClass}}">
+                        <div class="scrollArea {{#if (isMac)}}is-mac{{/if}}">
                             {{>studyTimepointBrowser (clone this timepointViewType='key')}}
                         </div>
                     </div>
@@ -26,7 +26,7 @@
                             {{/if}}
                         {{/each}}
                         <div class="switchHover seriesHover clearfix">
-                            <div class="scrollArea {{addMacOSClass}}">
+                            <div class="scrollArea {{#if (isMac)}}is-mac{{/if}}">
                                 <div class="thumbnailsWrapper">
                                     {{#each thumbnail in thumbnailsList}}
                                         {{>thumbnailEntry (clone this thumbnail=thumbnail)}}

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

@@ -47,10 +47,29 @@ Template.studySeriesQuickSwitch.onCreated(() => {
     });
 });
 
+const checkScrollArea = element => {
+    const { scrollHeight, clientHeight, offsetHeight, scrollTop } = element;
+
+    if(scrollHeight > offsetHeight + scrollTop) {
+        element.classList.add('show-scroll-indicator-down');
+    }
+    else {
+        element.classList.remove('show-scroll-indicator-down');
+    }
+
+    if(scrollTop > 0) {
+        element.classList.add('show-scroll-indicator-up');
+    }
+    else {
+        element.classList.remove('show-scroll-indicator-up');
+    }
+};
+
 Template.studySeriesQuickSwitch.events({
     'mouseenter .js-quick-switch, mouseenter .js-quick-switch .switchSectionSeries'(event, instance) {
         instance.$('.quickSwitchWrapper').addClass('overlay');
         $(event.currentTarget).addClass('hover');
+        instance.$('.scrollArea').each((index, scrollAreaElement) => checkScrollArea(scrollAreaElement));
     },
     'mouseleave .js-quick-switch'(event, instance) {
         instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
@@ -58,6 +77,9 @@ Template.studySeriesQuickSwitch.events({
     },
     'click .studyTimepointStudy'(event, instance) {
         instance.$('.switchSectionSeries').addClass('hover');
+    },
+    'scroll .scrollArea'(event) {
+        checkScrollArea(event.currentTarget);
     }
 });
 
@@ -75,7 +97,7 @@ Template.studySeriesQuickSwitch.helpers({
     // JS seems to be the only solution for now:
     // - http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox/6165489#6165489
     // - http://stackoverflow.com/questions/18317634/force-visible-scrollbar-in-firefox-on-mac-os-x/18318273
-    addMacOSClass() {
+    isMac() {
-        return window.navigator.appVersion.indexOf('Mac') !== -1 ? 'is-mac' : '';
+        return window.navigator.appVersion.indexOf('Mac');
     }
 });

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

@@ -152,13 +152,35 @@ $seriesSpacing = 2px
 
   .scrollArea
     margin-right: -22px;
-    min-height: 200px
+    min-height: 230px
-    max-height: 500px
+    max-height: 610px
     overflow-x: hidden
     overflow-y: scroll
     width: calc(100% + 22px)
+    
     &.is-mac
       padding-right: 22px
+      
+    &.show-scroll-indicator-up:before
+    &.show-scroll-indicator-down:after
+      font-family: FontAwesome
+      display: block
+      theme('color', '$activeColor')
+      font-size: 2em
+      width: 100%
+      height: 10px
+      position: absolute
+      z-index: 1
+      text-align: center
+      left: 0
+        
+    &.show-scroll-indicator-up:before
+      top: -10px
+      content: '\f102'
+        
+    &.show-scroll-indicator-down:after
+      bottom: 18px
+      content: '\f103'
 
 .studyHover
   height: 0