othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-312, LT-313: Identifying Mac OS and applying scrollbar fix

Browse Source
This commit is contained in:
Eloízio Salgado 2016-11-15 10:20:02 -02:00
parent 9a459e69f8
commit 2399b4a319
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html
View File

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

14
Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js
View File

@ -37,7 +37,7 @@ Template.studySeriesQuickSwitch.events({
instance.$('.quickSwitchWrapper').addClass('overlay'); instance.$('.quickSwitchWrapper').addClass('overlay');
$(event.currentTarget).addClass('hover'); $(event.currentTarget).addClass('hover');
}, },
'mouseleave .switchHover'(event, instance) { 'mouseleave .js-quick-switch'(event, instance) {
instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover'); instance.$('.js-quick-switch, .switchSectionSeries').removeClass('hover');
instance.$('.quickSwitchWrapper').removeClass('overlay'); instance.$('.quickSwitchWrapper').removeClass('overlay');
}, },
@ -50,5 +50,17 @@ Template.studySeriesQuickSwitch.helpers({
// Get the current study // Get the current study
currentStudy() { currentStudy() {
return Template.instance().data.currentStudy.get(); 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' : '';
} }
}); });

6
Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
View File

@ -151,12 +151,14 @@ $seriesSpacing = 2px
z-index: 10000 z-index: 10000
.scrollArea .scrollArea
margin-right: -20px margin-right: -22px;
min-height: 200px min-height: 200px
max-height: 500px max-height: 500px
overflow-x: hidden overflow-x: hidden
overflow-y: scroll overflow-y: scroll
width: 100% width: calc(100% + 22px)
&.is-mac
width: 100%
.studyHover .studyHover
height: 0 height: 0