LT-275: Adding button to add labels to measurements

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

@@ -1,5 +1,5 @@
 <template name="measureFlow">
-    <div class="measure-flow {{#if this.treeColumns}}tree-columns{{/if}} {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
+    <div class="measure-flow {{#if this.threeColumns}}tree-columns{{/if}} {{instance.state.get}}" style="top:{{choose position.y 0}}px;left:{{choose position.x 0}}px">
         <button class="btn-add">Add label</button>
         {{#if eq instance.state.get 'selected'}}
             <div class="tree-leaf">

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

@@ -79,6 +79,10 @@ Template.measureFlow.onRendered(() => {
 });
 
 Template.measureFlow.events({
+    'click, mousedown, mouseup'(event, instance) {
+        event.stopPropagation();
+    },
+
     'click .measure-flow .btn-add, click .measure-flow .btn-rename'(event, instance) {
         // Set the open state for the component
         instance.state.set('open');
@@ -100,7 +104,7 @@ Template.measureFlow.events({
                 label: 'Assign label',
                 searchPlaceholder: 'Search labels',
                 storageKey: 'measureLabelCommon',
-                treeColumns: instance.data.treeColumns,
+                threeColumns: instance.data.threeColumns,
                 position
             };
 

Packages/ohif-measurements/client/components/measureFlow/measureFlow.styl

@@ -1,7 +1,8 @@
 @import "{design}/app"
 
 .measure-flow
-  position: relative
+  position: fixed
+  z-index: 1
 
   &.open,
   &.selected
@@ -73,7 +74,7 @@
       button
         theme('border', '1px solid $uiBorderColor')
         theme('color', '$textPrimaryColor')
-        background-color: transparent
+        theme('background-color', '$primaryBackgroundColor')
         border-radius: 16px
         font-weight: normal
         height: 31px

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

@@ -64,9 +64,9 @@ Template.selectTree.onRendered(() => {
     instance.component = component;
 
     // Set the margin to display the common section
-    const isTreeColumns = instance.data.treeColumns;
-    const marginProperty = isTreeColumns ? 'margin-left' : 'margin-right';
-    const marginWidth = isTreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
+    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);
 
     // Make the component respect the window boundaries
@@ -318,7 +318,7 @@ Template.selectTree.helpers({
         }
 
         // Return the items sorted for tree columns
-        if (instance.data.treeColumns) {
+        if (instance.data.threeColumns) {
             const begin = items.splice(0, Math.ceil(items.length / 2));
             const sortedItems = [];
             _.each(begin, (item, index) => {

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

@@ -4,6 +4,8 @@ import { _ } from 'meteor/underscore';
 
 Template.selectTreeCommon.events({
     'click .select-tree-common label'(event, instance) {
+        event.preventDefault();
+
         // Get the clicked label
         const $target = $(event.currentTarget);