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

Finishing timepoint browser behavior

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-10-16 07:20:37 -02:00
parent d721c0dbde
commit d787ed2cb9
17 changed files with 118 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
LesionTracker/client/components/viewerSection/viewerSection.html
View File

@ -2,8 +2,8 @@
<div class="viewerSection">
<div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
{{>timepointBrowserList (extend timepointBrowserData scrollableClass='p-a-1')}}
<!-- <hr>
{{>studyTimepointBrowser (clone this)}} -->
<!-- <hr> -->
<!-- {{>studyTimepointBrowser (clone this)}} -->
</div>
<div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
{{>viewerMain (clone this)}}

38
LesionTracker/client/components/viewerSection/viewerSection.js
View File

@ -1,3 +1,4 @@
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
Template.viewerSection.events({
@ -7,6 +8,34 @@ Template.viewerSection.events({
}
window.ResizeViewportManager.handleResize();
},
'ohif.studies.study.click'(event, instance) {
const $element = $(event.currentTarget);
// Defer the active class toggling to wait for child template rendering
Meteor.defer(() => {
// Remove max height restriction from studies browser
const $studiesBrowser = $element.closest('.timepoint-browser-studies');
$studiesBrowser.css('max-height', '');
// Remove active class from sibling studies
$element.siblings().removeClass('active');
// Toggle the active class on clicked study
$element.toggleClass('active');
// Adjust the max height for studiesBrowser when series transition is finished
const $seriesBrowser = $element.find('.study-browser-series');
$seriesBrowser.one('transitionend', () => $studiesBrowser.adjustMax('height'));
});
},
'ohif.lesiontracker.timepoint.click'(event, instance) {
const $element = $(event.currentTarget);
// Defer the active class toggling to wait for child template rendering
Meteor.defer(() => $element.toggleClass('active'));
}
});
@ -26,15 +55,8 @@ Template.viewerSection.helpers({
return {
timepointApi,
timepoints,
timepointChildTemplate: 'timepointBrowserStudies',
studyChildTemplate: 'studyBrowserSeries',
studyClickCallback(studyInformation, element) {
const $element = $(element);
$element.siblings().removeClass('active');
$element.toggleClass('active');
}
studyChildTemplate: 'studyBrowserSeries'
};
}
});

4
Packages/ohif-core/client/ui/dimensional/dimensional.js
View File

@ -27,8 +27,10 @@ $.fn.tempShow = function(callback) {
};
// Adjust the max width/height to enable CSS3 transitions
$.fn.adjustMax = function(dimension) {
$.fn.adjustMax = function(dimension, modifierFn) {
const $element = $(this);
// Temporarily make the element visible to allow getting its dimensions
$element.tempShow(() => {
const maxProperty = `max-${dimension}`;

2
Packages/ohif-core/client/ui/dimensional/dimensional.styl
View File

@ -1,2 +1,2 @@
body *.visible
display: block !important
display: block !important

12
Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html
View File

@ -1,16 +1,16 @@
<template name="timepointBrowserItem">
<div class="timepoint-browser-item">
<div class="timepointEntry p-y-2">
<div class="timepointDetails clearfix">
<div class="timepointFollowupTitle pull-left">
<div class="timepoint-item p-y-2">
<div class="timepoint-details clearfix">
<div class="timepoint-title pull-left">
{{this.timepointApi.title timepoint}}
</div>
<div class="expandIcon pull-right">
<div class="timepoint-expand-icon pull-right">
<i class="fa fa-chevron-down"></i>
</div>
<div class="timepointDate pull-right m-r-1">{{formatDA this.timepoint.earliestDate 'D-MMM-YYYY'}}</div>
<div class="timepoint-date pull-right m-r-1">{{formatDA this.timepoint.earliestDate 'D-MMM-YYYY'}}</div>
</div>
<div class="timepointModalities">{{choose instance.summary.get 'Click to load'}}</div>
<div class="timepoint-summary">{{choose instance.summary.get 'Click to load'}}</div>
</div>
{{#if this.timepointChildTemplate}}
{{#if and (not instance.loading.get) instance.loaded}}

12
Packages/ohif-lesiontracker/client/components/timepointBrowser/item.js
View File

@ -1,6 +1,7 @@
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Tracker } from 'meteor/tracker';
import { $ } from 'meteor/jquery';
import { _ } from 'meteor/underscore';
import { OHIF } from 'meteor/ohif:core';
@ -52,16 +53,21 @@ Template.timepointBrowserItem.onCreated(() => {
});
Template.timepointBrowserItem.events({
'click .timepointEntry'(event, instance) {
'click .timepoint-item'(event, instance) {
const element = event.currentTarget.parentElement;
const $element = $(element);
const triggerClick = () => {
$element.trigger('ohif.lesiontracker.timepoint.click', instance.data.timepoint);
};
if (!instance.loaded) {
instance.loadStudies().then(() => {
$element.addClass('active');
Tracker.afterFlush(triggerClick);
instance.setModalitiesSummary();
});
} else {
$element.toggleClass('active');
triggerClick();
}
}
});

61
Packages/ohif-lesiontracker/client/components/timepointBrowser/item.styl
View File

@ -2,70 +2,75 @@
.timepoint-browser-item
.timepointEntry
.timepoint-item
cursor: pointer
font-size: 13px
.timepoint-browser-studies
opacity: 1
overflow: hidden
transform(translateY(0))
transform-origin(50% 0%)
transition(max-height 0.3s ease\, opacity 0.3s ease\, transform 0.3s ease)
&:not(.active) .timepoint-browser-studies
max-height: 0 !important
opacity: 0
transform(translateY(-100%))
.timepointDate
.timepoint-studies-container
opacity: 0
transform(translateY(-100%))
.timepoint-browser-studies
overflow: hidden
transition(max-height 0.3s ease)
.timepoint-studies-container
opacity: 1
transition(opacity 0.3s ease\, transform 0.3s ease)
transform(translateY(0))
transform-origin(50% 0%)
.timepoint-date
opacity: 1
&.active
.timepointModalities
.timepoint-summary
max-height: 0
opacity: 0
.timepointDate
.timepoint-date
opacity: 0
.expandIcon i
.timepoint-expand-icon i
transform: rotateX(180deg)
.timepointFollowupTitle
.timepoint-title
font-size: 14px
theme('color', '$textSecondaryColor')
text-transform: uppercase
&
.expandIcon i,
.timepointFollowupTitle,
.timepointDate,
.timepointModalities
.timepoint-expand-icon i,
.timepoint-title,
.timepoint-date,
.timepoint-summary
theme('color', '$textSecondaryColor')
transition($sidebarTransition)
&:hover
&,
.timepointFollowupTitle,
.expandIcon i,
.timepointDate,
.timepointModalities
.timepoint-title,
.timepoint-expand-icon i,
.timepoint-date,
.timepoint-summary
theme('color', '$textPrimaryColor') !important
.timepointDetails
.timepointModalities
.timepoint-details
.timepoint-summary
line-height: 25px
.timepointModalities
.timepoint-summary
height: 25px
max-height: 25px
opacity: 1
overflow: hidden
.expandIcon i
.timepoint-expand-icon i
theme('color', '$defaultColor')
.timepointFollowupTitle
.timepoint-title
theme('color', '$textPrimaryColor')
padding-top: 2px

1
Packages/ohif-lesiontracker/client/components/timepointBrowser/list.html
View File

@ -2,6 +2,7 @@
<div class="timepoint-browser-list {{this.class}}">
{{#each timepoint in this.timepoints}}
{{>timepointBrowserItem (clone this timepoint=timepoint)}}
<hr>
{{/each}}
</div>
</template>

4
Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.html
View File

@ -1,5 +1,7 @@
<template name="timepointBrowserStudies">
<div class="timepoint-browser-studies">
{{>studyBrowserList this}}
<div class="timepoint-studies-container">
{{>studyBrowserList this}}
</div>
</div>
</template>

13
Packages/ohif-lesiontracker/client/components/timepointBrowser/studies.js
View File

@ -1,16 +1,5 @@
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
Template.timepointBrowserStudies.onRendered(() => {
const instance = Template.instance();
const $container = instance.$('.timepoint-browser-studies');
instance.adjustMaxHeight = () => $container.adjustMax('height');
instance.adjustMaxHeight();
});
Template.timepointBrowserStudies.events({
'ohif.studies.study.click'(event, instance) {
// FIXME disable all transitions during $.tempShow
Meteor.setTimeout(instance.adjustMaxHeight, 300);
}
Template.instance().$('.timepoint-browser-studies').adjustMax('height');
});

4
Packages/ohif-studies/imports/client/components/browser/item.html
View File

@ -15,7 +15,9 @@
</div>
</div>
{{#if this.studyChildTemplate}}
{{>Template.dynamic template=this.studyChildTemplate data=(clone this)}}
{{#if and (not isLoading) instance.loaded}}
{{>Template.dynamic template=this.studyChildTemplate data=(clone this)}}
{{/if}}
{{/if}}
</div>
</template>

16
Packages/ohif-studies/imports/client/components/browser/item.js
View File

@ -1,5 +1,6 @@
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Tracker } from 'meteor/tracker';
import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core';
@ -17,27 +18,20 @@ Template.studyBrowserItem.events({
'click .study-item'(event, instance) {
if (instance.loading.get()) return;
const { studyClickCallback, studyInformation } = instance.data;
const { studyInformation } = instance.data;
const element = event.currentTarget.parentElement;
const $element = $(element);
const triggerClickCallback = () => {
if (typeof studyClickCallback === 'function') {
studyClickCallback(studyInformation, element);
}
$element.trigger('ohif.studies.study.click', studyInformation);
};
const triggerClick = () => $element.trigger('ohif.studies.study.click', studyInformation);
if (instance.loaded) {
triggerClickCallback();
triggerClick();
} 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();
Tracker.afterFlush(triggerClick);
});
}
}

6
Packages/ohif-studies/imports/client/components/browser/item.styl
View File

@ -55,13 +55,11 @@ $spacerY = 12px
.study-browser-series
overflow: hidden
transform(translateY(0))
transform-origin(50% 0%)
transition($sidebarTransition)
transition(max-height 0.3s ease)
.study-series-container
opacity: 1
transition($sidebarTransition)
transition(opacity 0.3s ease\, transform 0.3s ease)
transform(translateY(0))
transform-origin(50% 0%)

2
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js
View File

@ -17,7 +17,7 @@ Template.studyTimepoint.onRendered(() => {
const $studies = instance.$('.studyTimepoint');
const $wrapper = $studies.closest('.studyTimepointWrapper');
const $timepoint = $wrapper.closest('.timepointEntry');
const $timepoint = $wrapper.closest('.timepoint-item');
const studiesVisible = $studies.is(':visible');
if (!studiesVisible) {

2
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.styl
View File

@ -4,5 +4,5 @@
overflow: hidden
transition($sidebarTransition)
.timepointEntry:not(.active) .studyTimepointWrapper
.timepoint-item:not(.active) .studyTimepointWrapper
max-height: 0 !important

24
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html
View File

@ -8,20 +8,22 @@
<div class="p-x-1">
{{#if timepointList.length}}
{{#each timepoint in timepointList}}
<div class="timepointEntry p-y-2">
<div class="timepointHeader">
<div class="timepointDetails clearfix">
<div class="timepointFollowupTitle pull-left">
{{timepointApi.title timepoint}}
<div class="timepoint-browser-item">
<div class="timepoint-item p-y-2">
<div class="timepointHeader">
<div class="timepoint-details clearfix">
<div class="timepoint-title pull-left">
{{timepointApi.title timepoint}}
</div>
<div class="timepoint-expand-icon pull-right">
<i class="fa fa-chevron-down"></i>
</div>
<div class="timepoint-date pull-right m-r-1">{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}</div>
</div>
<div class="expandIcon pull-right">
<i class="fa fa-chevron-down"></i>
</div>
<div class="timepointDate pull-right m-r-1">{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}</div>
<div class="timepoint-summary">{{modalitiesSummary timepoint}}</div>
</div>
<div class="timepointModalities">{{modalitiesSummary timepoint}}</div>
{{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
</div>
{{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
</div>
<hr>
{{/each}}

8
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js
View File

@ -53,10 +53,10 @@ Template.studyTimepointBrowser.onRendered(() => {
const type = instance.timepointViewType.get();
// Removes all active classes to collapse the timepoints and studies
instance.$('.timepointEntry, .study-browser-item').removeClass('active');
instance.$('.timepoint-item, .study-browser-item').removeClass('active');
if (type === 'key' && !instance.data.currentStudy) {
// Show only first timepoint expanded for key timepoints
instance.$('.timepointEntry:first').addClass('active');
instance.$('.timepoint-item:first').addClass('active');
}
});
@ -70,7 +70,7 @@ Template.studyTimepointBrowser.onRendered(() => {
instance.$(`.study-browser-item[data-uid='${studyInstanceUid}']`).addClass('active');
});
// Show only first timepoint expanded for key timepoints
instance.$('.timepointEntry:first').addClass('active');
instance.$('.timepoint-item:first').addClass('active');
});
instance.autorun(() => {
@ -95,7 +95,7 @@ Template.studyTimepointBrowser.onRendered(() => {
Template.studyTimepointBrowser.events({
'click .timepointHeader'(event, instance) {
const $timepoint = $(event.currentTarget).closest('.timepointEntry');
const $timepoint = $(event.currentTarget).closest('.timepoint-item');
// Recalculates the timepoint height to make CSS transition smoother
$timepoint.find('.studyTimepoint').trigger('displayStateChanged');