LT-275: Making common animation labels act as normal labels when clicked

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');
 

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

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';

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

Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.html

@@ -2,9 +2,11 @@
     <div class="select-tree-common">
         <div class="content">
             <h5 class="title">Common</h5>
-            {{#each item in items}}
-                <label for="{{this.storageKey}}_{{encodeId item.value}}">{{item.label}}</label>
-            {{/each}}
+            <div class="labels">
+                {{#each item in items}}
+                    <label for="{{this.storageKey}}_{{encodeId item.value}}">{{item.label}}</label>
+                {{/each}}
+            </div>
         </div>
     </div>
 </template>

Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.js

@@ -9,6 +9,9 @@ Template.selectTreeCommon.events({
         // Get the clicked label
         const $target = $(event.currentTarget);
 
+        // Store the offset position for further use
+        $target.data('offset', $target.offset());
+
         // Build the input selector based on the label target
         const inputSelector = '#' + $target.attr('for');
 
@@ -23,6 +26,9 @@ Template.selectTreeCommon.events({
             // Wait for options rerendering
 
             Tracker.afterFlush(() => {
+                const $treeRoot = treeInstance.$('.select-tree-root:first').first();
+                $treeRoot.addClass('common-clicked');
+
                 // Wait for components initialization
                 Meteor.defer(() => $(inputSelector).click());
             });