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

Displaying the common label when navigate back

Browse Source
This commit is contained in:
Bruno Alves de Faria 2018-02-22 17:45:01 -03:00
parent fdcaea9eb3
commit d22f3cbd96
3 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Packages/ohif-measurements/client/components/measureFlow/measureFlow.styl
View File

@ -122,7 +122,7 @@
.select-tree-root
&.interacted .select-tree-common .content
&.navigated .select-tree-common .content
animation-name: none
&.selected .select-tree-common .content
@ -149,7 +149,7 @@
&.started .select-tree-common .content
right: 46px
&.interacted .select-tree-common .content
&.navigated .select-tree-common .content
animation-name: selectTreeCommonCloseRight
.tree-inputs>label

52
Packages/ohif-select-tree/client/components/selectTree/selectTree.js
View File

@ -67,12 +67,22 @@ Template.selectTree.onRendered(() => {
// Force to hardware acceleration to move element if browser supports translate property
instance.useTransform = OHIF.ui.styleProperty.check('transform', 'translate(1px, 1px)');
// Set the margin property and width
const isthreeColumns = instance.data.threeColumns;
if (!rootInstance.marginProperty) {
rootInstance.marginProperty = isthreeColumns ? 'margin-left' : 'margin-right';
rootInstance.marginWidth = isthreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
}
// Define a function to set the margin and toggle common section
instance.setMargin = isHidden => {
const marginWidth = isHidden ? '' : rootInstance.marginWidth;
$treeRoot.children('.tree-content').css(rootInstance.marginProperty, marginWidth);
};
// Set the margin to display the common section
if (!$treeRoot.hasClass('started')) {
const isthreeColumns = instance.data.threeColumns;
const marginProperty = isthreeColumns ? 'margin-left' : 'margin-right';
const marginWidth = isthreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
$treeRoot.children('.tree-content').css(marginProperty, marginWidth);
instance.setMargin(false);
}
// Make the component respect the window boundaries
@ -176,26 +186,21 @@ Template.selectTree.onRendered(() => {
});
Template.selectTree.events({
'click .select-tree-root>.tree-content'(event, instance) {
// Get the tree root
const $treeRoot = $(event.currentTarget).closest('.select-tree-root');
// Detect the first interaction with the component and do the animation
$treeRoot.addClass('interacted');
// Remove the margin after the common section is closed
$treeRoot.children('.tree-content').css('margin-right', '');
},
'input .tree-search input'(event, instance) {
const $target = $(event.currentTarget);
// Get the tree root
const $treeRoot = $(event.currentTarget).closest('.select-tree-root');
const $treeRoot = $target.closest('.select-tree-root');
// Get the search term
const searchTerm = $target.val();
// Change the search term to update the tree items
instance.searchTerm.set($(event.currentTarget).val());
instance.searchTerm.set(searchTerm);
// Change the component state
$treeRoot.addClass('interacted');
const method = searchTerm ? 'addClass' : 'removeClass';
$treeRoot[method]('navigated');
instance.setMargin(!!searchTerm);
},
'keydown .tree-search input'(event, instance) {
@ -213,6 +218,7 @@ Template.selectTree.events({
'change .select-tree:first>.tree-content>.tree-options>.tree-inputs>label>input'(event, instance) {
const component = instance.component;
const $target = $(event.currentTarget);
const $treeRoot = $target.closest('.select-tree-root');
const $label = $target.closest('label');
const eventComponent = $target.data('component');
const rootComponent = instance.data.root || component;
@ -228,6 +234,10 @@ Template.selectTree.events({
// Unset the selected state
instance.setSelected(false);
// Detect the first interaction with the component and do the animation
instance.setMargin(true);
$treeRoot.addClass('navigated');
// Check if the clicked element is a node or a leaf
const isLeaf = $label.hasClass('tree-leaf');
if (isLeaf) {
@ -296,7 +306,6 @@ Template.selectTree.events({
setTimeout(() => $treeNode.css('top', 0));
const optionsTop = $target.closest('.tree-options').position().top;
const $treeRoot = $target.closest('.select-tree-root');
const treeOffsetTop = $treeRoot.offset().top;
const treeRootPosition = getPosition($treeRoot);
treeRootPosition.y += offsetTop - treeOffsetTop - optionsTop;
@ -306,6 +315,7 @@ Template.selectTree.events({
},
'click .select-tree:first>.tree-content>.tree-options>.tree-breadcrumb .tree-back'(event, instance) {
const $target = $(event.currentTarget);
const rootComponent = instance.data.root || instance.component;
const rootInstance = rootComponent.templateInstance;
@ -317,9 +327,11 @@ Template.selectTree.events({
// Unset the selected state
instance.setSelected(false);
instance.setMargin(false);
$target.closest('.select-tree-root').removeClass('navigated');
// Get the index of the breadcrumb's clicked option
const index = parseInt($(event.currentTarget).attr('data-index'));
const index = parseInt($target.attr('data-index'));
// Set the current instance
let currentInstance = instance.component.parent.templateInstance;

2
Packages/ohif-select-tree/client/components/selectTree/selectTree.styl
View File

@ -245,7 +245,7 @@ $gray6 = #303030
margin-left: 0
transform(scale(1) translateY(-50%))
&.interacted, &.selected
&.navigated, &.selected
.select-tree-common