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

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

Browse Source
This commit is contained in:
Eloízio Salgado 2016-11-22 17:31:38 -02:00
parent 3eae1c6878
commit c25909de4c
3 changed files with 50 additions and 6 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="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)}}

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

@ -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() {
return window.navigator.appVersion.indexOf('Mac') !== -1 ? 'is-mac' : '';
isMac() {
return window.navigator.appVersion.indexOf('Mac');
}
});

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

@ -152,13 +152,35 @@ $seriesSpacing = 2px
.scrollArea
margin-right: -22px;
min-height: 200px
max-height: 500px
min-height: 230px
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