diff --git a/LesionTracker/client/components/viewerSection/viewerSection.js b/LesionTracker/client/components/viewerSection/viewerSection.js index a63f3dfbd..4ec727a0e 100644 --- a/LesionTracker/client/components/viewerSection/viewerSection.js +++ b/LesionTracker/client/components/viewerSection/viewerSection.js @@ -1,5 +1,6 @@ import { Template } from 'meteor/templating'; import { ReactiveVar } from 'meteor/reactive-var'; +import { $ } from 'meteor/jquery'; import { OHIF } from 'meteor/ohif:core'; Template.viewerSection.onCreated(() => { @@ -28,6 +29,26 @@ Template.viewerSection.events({ if (!event.target.classList.contains('sidebarMenu')) return; window.ResizeViewportManager.handleResize(); + }, + + 'ohif.lesiontracker.timepoint.changeViewType .timepoint-browser-list'(event, instance, viewType) { + const $browserList = $(event.currentTarget); + const $allBrowserItems = $browserList.find('.timepoint-browser-item'); + + // Removes all active classes to collapse the timepoints and studies + $allBrowserItems.removeClass('active'); + + if (viewType === 'key') { + const { timepointIds, currentTimepointId } = OHIF.viewer.data; + timepointIds.forEach(timepointId => { + const $browserItem = $allBrowserItems.filter(`[data-id=${timepointId}]`); + $browserItem.find('.timepoint-item').trigger('ohif.lesiontracker.timepoint.load'); + }); + + // Show only current timepoint expanded on key timepoints tab + const $browserItem = $allBrowserItems.filter(`[data-id=${currentTimepointId}]`); + $browserItem.find('.timepoint-item').trigger('click'); + } } }); diff --git a/Packages/ohif-core/client/components/scrollArea/index.js b/Packages/ohif-core/client/components/scrollArea/index.js index f657ce09b..b0e46a47c 100644 --- a/Packages/ohif-core/client/components/scrollArea/index.js +++ b/Packages/ohif-core/client/components/scrollArea/index.js @@ -1,2 +1,3 @@ import './scrollArea.html'; import './scrollArea.js'; +import './scrollArea.styl'; diff --git a/Packages/ohif-core/client/components/scrollArea/scrollArea.html b/Packages/ohif-core/client/components/scrollArea/scrollArea.html index 6459a4177..fbf60fb95 100644 --- a/Packages/ohif-core/client/components/scrollArea/scrollArea.html +++ b/Packages/ohif-core/client/components/scrollArea/scrollArea.html @@ -3,5 +3,7 @@
{{>Template.contentBlock}}
+
+
diff --git a/Packages/ohif-core/client/components/scrollArea/scrollArea.js b/Packages/ohif-core/client/components/scrollArea/scrollArea.js index f25726fe5..d81bfaf7a 100644 --- a/Packages/ohif-core/client/components/scrollArea/scrollArea.js +++ b/Packages/ohif-core/client/components/scrollArea/scrollArea.js @@ -7,7 +7,8 @@ Template.scrollArea.onCreated(() => { const defaultConfig = { hideScrollbar: true, scrollY: true, - scrollX: false + scrollX: false, + scrollStep: 100 }; instance.config = _.defaults(data || {}, defaultConfig); @@ -26,4 +27,55 @@ Template.scrollArea.onRendered(() => { 'margin-bottom': 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x }); } + + instance.$scrollable = instance.$('.scrollable').first(); + instance.scrollHandler = _.throttle(event => { + const $scrollable = event ? $(event.currentTarget) : instance.$scrollable; + const $scrollArea = $scrollable.closest('.scroll-area'); + if ($scrollable[0] !== instance.$('.scrollable')[0]) return; + $scrollArea.removeClass('can-scroll-up can-scroll-down'); + const height = $scrollable.outerHeight(); + const scrollTop = $scrollable.scrollTop(); + const { scrollHeight } = $scrollable[0]; + + // Stop here if unable to scroll + if (scrollHeight <= height) return; + + // Check if can scroll up + if (scrollTop) { + $scrollArea.addClass('can-scroll-up'); + } + + // Check if can scroll down + if (scrollTop + height < scrollHeight) { + $scrollArea.addClass('can-scroll-down'); + } + }, 300); + + instance.scrollHandler(); +}); + +Template.scrollArea.events({ + 'scroll .scrollable, mouseenter .scrollable, transitionend .scrollable'(event, instance) { + instance.scrollHandler(event); + }, + + 'click .scroll-nav-down'(event, instance) { + const $scrollable = $(event.currentTarget).siblings('.scrollable'); + const height = $scrollable.outerHeight(); + const currentTop = $scrollable.scrollTop(); + const { scrollHeight } = $scrollable[0]; + const limit = scrollHeight - height; + let scrollTop = currentTop + instance.data.scrollStep; + scrollTop = scrollTop > limit ? limit : scrollTop; + $scrollable.stop().animate({ scrollTop }, 150, 'swing'); + }, + + 'click .scroll-nav-up'(event, instance) { + const $scrollable = $(event.currentTarget).siblings('.scrollable'); + const currentTop = $scrollable.scrollTop(); + let scrollTop = currentTop - instance.data.scrollStep; + scrollTop = scrollTop < 0 ? 0 : scrollTop; + $scrollable.stop().animate({ scrollTop }, 150, 'swing'); + }, }); diff --git a/Packages/ohif-core/client/components/scrollArea/scrollArea.styl b/Packages/ohif-core/client/components/scrollArea/scrollArea.styl new file mode 100644 index 000000000..ef0e02b19 --- /dev/null +++ b/Packages/ohif-core/client/components/scrollArea/scrollArea.styl @@ -0,0 +1,78 @@ +@require '{ohif:design}/app' + +$scrollNavSize = 24px + +.scroll-area + overflow: hidden + position: relative + + .scrollable + max-height: inherit + overflow: hidden + + &.scroll-x + overflow-x: scroll + + &.scroll-y + overflow-y: scroll + + &.fit + height: 100% + width: 100% + + .scrollable + bottom: 0 + left: 0 + max-height: none + position: absolute + right: 0 + top: 0 + + .scroll-nav + background-color: rgba(0, 0, 0, 0.75) + box-shadow(0 0 10px 10px rgba(0, 0, 0, 0.75)) + cursor: pointer + height: $scrollNavSize + left: 10px + opacity: 0 + position: absolute + right: 10px + transition(transform 0.3s ease\, opacity 0.3s ease\, background-color 0.3s ease\, box-shadow 0.3s ease) + + &:after + theme('color', '$activeColor') + display: block + font-family: FontAwesome + font-size: 20px + text-align: center + transition(color 0.3s ease) + + &:hover + background-color: rgba(0, 0, 0, 0.9) + box-shadow(0 0 10px 10px rgba(0, 0, 0, 0.9)) + + &:after + theme('color', '$hoverColor') + + .scroll-nav-up + border-bottom-left-radius($scrollNavSize / 2) + border-bottom-right-radius($scrollNavSize / 2) + top: 0 + transform(translateY(- $scrollNavSize)) + + &:after + content: '\f102' + + .scroll-nav-down + border-top-left-radius($scrollNavSize / 2) + border-top-right-radius($scrollNavSize / 2) + bottom: 0 + transform(translateY($scrollNavSize)) + + &:after + content: '\f103' + + &.can-scroll-up .scroll-nav-up, + &.can-scroll-down .scroll-nav-down + opacity: 1 + transform(translateY(0)) diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl index 79cc624af..128ce123e 100644 --- a/Packages/ohif-design/styles/common/global.styl +++ b/Packages/ohif-design/styles/common/global.styl @@ -1,4 +1,4 @@ -@import "{ohif:design}/app" +@require '{ohif:design}/app' html body theme('background-color', '$primaryBackgroundColor') @@ -140,16 +140,3 @@ body .select2-container--default .select2-results>.select2-results__options .flex-grow flex-grow: 1 - -.scroll-area - overflow: hidden - - .scrollable - max-height: inherit - overflow: hidden - - &.scroll-x - overflow-x: scroll - - &.scroll-y - overflow-y: scroll diff --git a/Packages/ohif-design/styles/imports/mixins.styl b/Packages/ohif-design/styles/imports/mixins.styl index b46194981..6827bb6ae 100644 --- a/Packages/ohif-design/styles/imports/mixins.styl +++ b/Packages/ohif-design/styles/imports/mixins.styl @@ -16,6 +16,18 @@ animation(a) border-radius(r) vendorize(border-radius, r) +border-top-left-radius(r) + vendorize(border-top-left-radius, r) + +border-top-right-radius(r) + vendorize(border-top-right-radius, r) + +border-bottom-left-radius(r) + vendorize(border-bottom-left-radius, r) + +border-bottom-right-radius(r) + vendorize(border-bottom-right-radius, r) + box-shadow(s) vendorize(box-shadow, s) diff --git a/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html b/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html index e871b7b5c..9263dde8e 100644 --- a/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html +++ b/Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html @@ -1,5 +1,5 @@