diff --git a/Packages/ohif-design/package.js b/Packages/ohif-design/package.js index d0b29c3f7..bebd23cac 100644 --- a/Packages/ohif-design/package.js +++ b/Packages/ohif-design/package.js @@ -46,7 +46,6 @@ Package.onUse(function(api) { 'styles/components/dialog.styl', 'styles/components/radio.styl', 'styles/components/select2.styl', - 'styles/components/selectTree.styl', 'styles/components/states.styl' ], 'client'); diff --git a/Packages/ohif-measurements/client/components/measureFlow/measureFlow.js b/Packages/ohif-measurements/client/components/measureFlow/measureFlow.js index adb83b239..4e746de6e 100644 --- a/Packages/ohif-measurements/client/components/measureFlow/measureFlow.js +++ b/Packages/ohif-measurements/client/components/measureFlow/measureFlow.js @@ -177,7 +177,7 @@ Template.measureFlow.events({ 'click .select-tree-common label'(event, instance) { // Set the common section clicked flag - instance.commonClicked = true; + instance.commonClicked = event.currentTarget; }, 'change .select-tree-root'(event, instance) { @@ -193,39 +193,44 @@ Template.measureFlow.events({ 'click .tree-leaf input'(event, instance) { const $target = $(event.currentTarget); - const $label = $target.closest('label'); + let $label = $target.closest('label'); const $treeRoot = $label.closest('.select-tree-root'); const $container = $treeRoot.find('.tree-options:first'); + let labelOffset; - // Check if the targe click was a label inside common section + // Check if the clicked target was a label inside common section if (instance.commonClicked) { - const labelTop = $label.position().top; - const containerCenter = Math.round($container.height() / 2); - const labelCenter = Math.round($label.height() / 2); - - // Scroll the options container to make the target input visible - $container.scrollTop(labelTop - containerCenter + labelCenter); + $label = $(instance.commonClicked); + labelOffset = $label.data('offset'); + } else { + labelOffset = $label.offset(); } // Change the measure flow state to selected instance.state.set('selected'); - // Get the clicked label window offset - const labelOffset = $label.offset(); - // Wait for the DOM re-rendering Tracker.afterFlush(() => { // Get the measure flow div const $measureFlow = instance.$('.measure-flow'); - // Subtract the label box shadow height from the label's position - labelOffset.top -= 10; + // Adjust the label position + if (instance.commonClicked) { + labelOffset.top -= 10; + labelOffset.left -= 12; + } else { + labelOffset.top -= 10; + } // Reposition the measure flow based on the clicked label position $measureFlow.css(labelOffset); // Resize the copied label with same width of the clicked one - $measureFlow.children('.tree-leaf').width($label.outerWidth()); + // $measureFlow.children('.tree-leaf').width($label.outerWidth()); + $measureFlow.children('.tree-leaf').width(212); + + // Reset the flag to avoid wrong positioning when clicking normal labels again + instance.commonClicked = false; }); // Wait the fade-out transition and remove the selectTree component diff --git a/Packages/ohif-measurements/client/components/measureFlow/selectTree/index.js b/Packages/ohif-measurements/client/components/measureFlow/selectTree/index.js index 9f2d8da0a..50db85034 100644 --- a/Packages/ohif-measurements/client/components/measureFlow/selectTree/index.js +++ b/Packages/ohif-measurements/client/components/measureFlow/selectTree/index.js @@ -1,6 +1,7 @@ import './mixin.js'; import './selectTree.html'; +import './selectTree.styl'; import './selectTree.js'; import './selectTreeCommon.html'; import './selectTreeCommon.js'; diff --git a/Packages/ohif-design/styles/components/selectTree.styl b/Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTree.styl similarity index 96% rename from Packages/ohif-design/styles/components/selectTree.styl rename to Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTree.styl index 8d343969f..b17f67037 100644 --- a/Packages/ohif-design/styles/components/selectTree.styl +++ b/Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTree.styl @@ -57,6 +57,11 @@ $gray6 = #303030 &>.tree-inputs>label.tree-node:not(.active) border-color: transparent + &.common-clicked .tree-leaf.active + background-color: transparent + box-shadow: none + color: transparent + .select-tree-root display: inline-block position: relative @@ -194,6 +199,9 @@ $gray6 = #303030 line-height: 20px margin: 12px 0 16px + div.labels + position: relative + label cursor: pointer display: block diff --git a/Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.html b/Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.html index 3157ee1b3..073ecde71 100644 --- a/Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.html +++ b/Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.html @@ -2,9 +2,11 @@