diff --git a/Packages/ohif-core/client/components/index.js b/Packages/ohif-core/client/components/index.js index afdd8b252..2f940edad 100644 --- a/Packages/ohif-core/client/components/index.js +++ b/Packages/ohif-core/client/components/index.js @@ -3,3 +3,4 @@ import './bootstrap'; import './playground/playground.html'; import './playground/playground.styl'; import './playground/playground.js'; +import './scrollArea'; diff --git a/Packages/ohif-core/client/components/scrollArea/index.js b/Packages/ohif-core/client/components/scrollArea/index.js new file mode 100644 index 000000000..f657ce09b --- /dev/null +++ b/Packages/ohif-core/client/components/scrollArea/index.js @@ -0,0 +1,2 @@ +import './scrollArea.html'; +import './scrollArea.js'; diff --git a/Packages/ohif-core/client/components/scrollArea/scrollArea.html b/Packages/ohif-core/client/components/scrollArea/scrollArea.html new file mode 100644 index 000000000..52e8be111 --- /dev/null +++ b/Packages/ohif-core/client/components/scrollArea/scrollArea.html @@ -0,0 +1,7 @@ + diff --git a/Packages/ohif-core/client/components/scrollArea/scrollArea.js b/Packages/ohif-core/client/components/scrollArea/scrollArea.js new file mode 100644 index 000000000..23f4eb652 --- /dev/null +++ b/Packages/ohif-core/client/components/scrollArea/scrollArea.js @@ -0,0 +1,29 @@ +import { Template } from 'meteor/templating'; +import { _ } from 'meteor/underscore'; + +Template.scrollArea.onCreated(() => { + const instance = Template.instance(); + const { data } = instance; + const defaultConfig = { + hideScrollbar: true, + scrollY: true, + scrollX: false + }; + + instance.config = _.defaults(data || {}, defaultConfig); +}); + +Template.scrollArea.onRendered(() => { + const instance = Template.instance(); + const { config } = instance; + if (config.hideScrollbar) { + const $scrollable = instance.$('.scrollable').first(); + const scrollable = $scrollable[0]; + const x = config.scrollX ? 1 : 0; + const y = config.scrollY ? 1 : 0; + $scrollable.css({ + right: 0 - (scrollable.offsetWidth - scrollable.clientWidth) * y, + bottom: 0 - (scrollable.offsetHeight - scrollable.clientHeight) * x + }); + } +}); diff --git a/Packages/ohif-core/client/ui/dimensional/dimensional.js b/Packages/ohif-core/client/ui/dimensional/dimensional.js index c684ed288..c8365300b 100644 --- a/Packages/ohif-core/client/ui/dimensional/dimensional.js +++ b/Packages/ohif-core/client/ui/dimensional/dimensional.js @@ -30,16 +30,19 @@ $.fn.tempShow = function(callback) { $.fn.adjustMax = function(dimension) { const $element = $(this); $element.tempShow(() => { - // Add a class to remove the max restriction - const maxClass = `no-max-${dimension}`; - $element.addClass(maxClass); + const maxProperty = `max-${dimension}`; + + // Remove the current max restriction + $element.each((i, e) => e.style.setProperty(maxProperty, 'none', 'important')); // Get the dimension function to obtain the outer dimension const dimensionFn = 'outer' + dimension.charAt(0).toUpperCase() + dimension.slice(1); const value = $element[dimensionFn](); - // Remove the max restriction class and set the new max - const maxProperty = `max-${dimension}`; - $element.removeClass(maxClass).css(maxProperty, value); + // Remove the property (needed for IE) + $element.each((i, e) => e.style.removeProperty(maxProperty)); + + // Set the new max restriction + $element.css(maxProperty, value); }); }; diff --git a/Packages/ohif-core/client/ui/dimensional/dimensional.styl b/Packages/ohif-core/client/ui/dimensional/dimensional.styl index 90385bba3..07ffd007d 100644 --- a/Packages/ohif-core/client/ui/dimensional/dimensional.styl +++ b/Packages/ohif-core/client/ui/dimensional/dimensional.styl @@ -1,8 +1,2 @@ body *.visible display: block !important - -body *.no-max-height:not(.bypassNot) - max-height: none !important - -body *.no-max-width:not(.bypassNot) - max-width: none !important diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl index d48b1a772..8e622cb47 100644 --- a/Packages/ohif-design/styles/common/global.styl +++ b/Packages/ohif-design/styles/common/global.styl @@ -79,9 +79,6 @@ body .select2-container--default .select2-results>.select2-results__options .height-auto height: auto !important -.full-width - width: 100% - .caret-down display: inline-block width: 0 @@ -126,3 +123,38 @@ body .select2-container--default .select2-results>.select2-results__options &:hover span transform(rotate(180deg)) + +.full-width + width: 100% + +.full-height + height: 100% + +.flex-h + display: flex + flex-direction: row + +.flex-v + display: flex + flex-direction: column + +.flex-grow + flex-grow: 1 + +.scroll-area + overflow: hidden + position: relative + + .scrollable + bottom: 0 + left: 0 + overflow: hidden + position: absolute + right: 0 + top: 0 + + &.scroll-x + overflow-x: scroll + + &.scroll-y + overflow-y: scroll diff --git a/Packages/ohif-measurements/client/conformance/ConformanceCriteria.js b/Packages/ohif-measurements/client/conformance/ConformanceCriteria.js index 9ca9989bd..53b9ec556 100644 --- a/Packages/ohif-measurements/client/conformance/ConformanceCriteria.js +++ b/Packages/ohif-measurements/client/conformance/ConformanceCriteria.js @@ -161,7 +161,7 @@ class ConformanceCriteria { return; } - const promise = OHIF.studylist.retrieveStudyMetadata(studyInstanceUid); + const promise = OHIF.studies.retrieveStudyMetadata(studyInstanceUid); promise.then(study => { const studyMetadata = OHIF.viewerbase.getStudyMetadata(study); diff --git a/Packages/ohif-measurements/client/lib/jumpToRowItem.js b/Packages/ohif-measurements/client/lib/jumpToRowItem.js index a715a68c1..37b5ad560 100644 --- a/Packages/ohif-measurements/client/lib/jumpToRowItem.js +++ b/Packages/ohif-measurements/client/lib/jumpToRowItem.js @@ -46,7 +46,7 @@ function renderIntoViewport(viewportIndex, studyInstanceUid, seriesInstanceUid, const element = $viewports.get(viewportIndex); const startLoadingHandler = cornerstoneTools.loadHandlerManager.getStartLoadHandler(); startLoadingHandler(element); - OHIF.studylist.retrieveStudyMetadata(studyInstanceUid).then(study => { + OHIF.studies.retrieveStudyMetadata(studyInstanceUid).then(study => { OHIF.log.warn('renderIntoViewport'); // Double check to make sure this study wasn't already inserted diff --git a/Packages/ohif-studies/imports/client/components/browser/index.js b/Packages/ohif-studies/imports/client/components/browser/index.js index 7dfd1b27e..4383daf69 100644 --- a/Packages/ohif-studies/imports/client/components/browser/index.js +++ b/Packages/ohif-studies/imports/client/components/browser/index.js @@ -1,5 +1,6 @@ import './list.html'; -import './list.js'; import './item.html'; import './item.js'; import './item.styl'; +import './series.html'; +import './series.js'; diff --git a/Packages/ohif-studies/imports/client/components/browser/item.html b/Packages/ohif-studies/imports/client/components/browser/item.html index ec171da77..e42902dfd 100644 --- a/Packages/ohif-studies/imports/client/components/browser/item.html +++ b/Packages/ohif-studies/imports/client/components/browser/item.html @@ -1,5 +1,5 @@ diff --git a/Packages/ohif-studies/imports/client/components/browser/item.js b/Packages/ohif-studies/imports/client/components/browser/item.js index 449e30d15..e5bfc22b5 100644 --- a/Packages/ohif-studies/imports/client/components/browser/item.js +++ b/Packages/ohif-studies/imports/client/components/browser/item.js @@ -1,26 +1,52 @@ import { Template } from 'meteor/templating'; +import { ReactiveVar } from 'meteor/reactive-var'; import { $ } from 'meteor/jquery'; +import { OHIF } from 'meteor/ohif:core'; Template.studyBrowserItem.onCreated(() => { const instance = Template.instance(); + instance.loaded = false; + instance.loading = new ReactiveVar(false); + const modality = instance.data.studyInformation.modality || 'UN'; instance.modalities = modality.replace(/\\/g, ' '); }); Template.studyBrowserItem.events({ - 'click .study-browser-item'(event, instance) { - const element = event.currentTarget; + 'click .study-item'(event, instance) { + if (instance.loading.get()) return; + + const { studyClickCallback, studyInformation } = instance.data; + const element = event.currentTarget.parentElement; const $element = $(element); - $element.trigger('ohif.studies.study.click', instance.data.studyInformation); - const { settings, studyInformation } = instance.data; - if (settings && typeof settings.studyClickCallback) { - settings.studyClickCallback(studyInformation, element); + $element.trigger('ohif.studies.study.click', studyInformation); + + const triggerClickCallback = () => { + if (typeof studyClickCallback === 'function') { + studyClickCallback(studyInformation, element); + } + }; + + if (instance.loaded) { + triggerClickCallback(); + } else { + instance.loading.set(true); + OHIF.studies.retrieveStudyMetadata(studyInformation.studyInstanceUid).then(() => { + instance.loaded = true; + instance.loading.set(false); + $element.trigger('ohif.studies.study.load', studyInformation); + triggerClickCallback(); + }); } } }); Template.studyBrowserItem.helpers({ + isLoading() { + return Template.instance().loading.get(); + }, + modalityStyle() { // Responsively styles the Modality Acronyms for studies // with more than one modality diff --git a/Packages/ohif-studies/imports/client/components/browser/item.styl b/Packages/ohif-studies/imports/client/components/browser/item.styl index 15079a1ab..c7152f275 100644 --- a/Packages/ohif-studies/imports/client/components/browser/item.styl +++ b/Packages/ohif-studies/imports/client/components/browser/item.styl @@ -46,13 +46,25 @@ $spacerY = 12px theme('background-color', '$activeColor') border-color: $boxActiveBorderColor - &:not(.active) .studyTimepointThumbnails + &:not(.active) .study-browser-series max-height: 0 !important - .studyTimepointThumbnails + .study-series-container + opacity: 0 + transform(translateY(-100%)) + + .study-browser-series overflow: hidden + transform(translateY(0)) + transform-origin(50% 0%) transition($sidebarTransition) + .study-series-container + opacity: 1 + transition($sidebarTransition) + transform(translateY(0)) + transform-origin(50% 0%) + .study-item-box border: 1px solid $boxBorderColor border-radius: 12px diff --git a/Packages/ohif-studies/imports/client/components/browser/list.html b/Packages/ohif-studies/imports/client/components/browser/list.html index 3ea705448..0afac4dda 100644 --- a/Packages/ohif-studies/imports/client/components/browser/list.html +++ b/Packages/ohif-studies/imports/client/components/browser/list.html @@ -1,5 +1,5 @@