From 2399b4a319a2230bf5a289cd9351cd010734d881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= <eloisalgado@gmail.com>
Date: Tue, 15 Nov 2016 10:20:02 -0200
Subject: [PATCH] LT-312, LT-313: Identifying Mac OS and applying scrollbar fix

---
 .../studySeriesQuickSwitch.html                    |  4 ++--
 .../studySeriesQuickSwitch.js                      | 14 +++++++++++++-
 .../studySeriesQuickSwitch.styl                    |  6 ++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html
index ae0cf7444..bd6d07449 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html
+++ b/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">
+                        <div class="scrollArea {{addMacOSClass}}">
                             {{>studyTimepointBrowser (clone this timepointViewType='key')}}
                         </div>
                     </div>
@@ -26,7 +26,7 @@
                             {{/if}}
                         {{/each}}
                         <div class="switchHover seriesHover clearfix">
-                            <div class="scrollArea">
+                            <div class="scrollArea {{addMacOSClass}}">
                                 <div class="thumbnailsWrapper">
                                     {{#each thumbnail in thumbnailsList}}
                                         {{>thumbnailEntry (clone this thumbnail=thumbnail)}}
diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js
index 941fd3949..9eab6307f 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js
@@ -37,7 +37,7 @@ Template.studySeriesQuickSwitch.events({
         instance.$('.quickSwitchWrapper').addClass('overlay');
         $(event.currentTarget).addClass('hover');
     },
-    'mouseleave .switchHover'(event, instance) {
+    'mouseleave .js-quick-switch'(event, instance) {
         instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
         instance.$('.quickSwitchWrapper').removeClass('overlay');
     },
@@ -50,5 +50,17 @@ Template.studySeriesQuickSwitch.helpers({
     // Get the current study
     currentStudy() {
         return Template.instance().data.currentStudy.get();
+    },
+    // Check if is Mac OS
+    // This is necessary due to fix scrollbar space only in browsers in Mac OS:
+    // Since Lion version, the scrollbar is visible only when user scrolls a div
+    // As scrollbar is hidden, the space added to hide it in Windows browsers
+    // is not enough in Mac OS. For WebKit (Safari and Chrome in Mac OS) there is a CSS
+    // solution using ::-webkit-scrollbar, but unfortunately doesn't work for Firefox
+    // 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() {
+        return window.navigator.appVersion.indexOf("Mac") !== -1 ? 'is-mac' : '';
     }
 });
diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
index 7f48ed701..abcb5776c 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
+++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
@@ -151,12 +151,14 @@ $seriesSpacing = 2px
   z-index: 10000
 
   .scrollArea
-    margin-right: -20px
+    margin-right: -22px;
     min-height: 200px
     max-height: 500px
     overflow-x: hidden
     overflow-y: scroll
-    width: 100%
+    width: calc(100% + 22px)
+    &.is-mac
+      width: 100%
 
 .studyHover
   height: 0