LT-275: Creating 3 columns layout for open source version

Packages/lesiontracker/client/components/measureFlow/measureFlow.html

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

Packages/lesiontracker/client/components/measureFlow/measureFlow.js

@@ -119,6 +119,7 @@ Template.measureFlow.events({
                 label: 'Assign label',
                 searchPlaceholder: 'Search labels',
                 storageKey: 'measureLabelCommon',
+                treeColumns: instance.data.treeColumns,
                 position
             };
 
@@ -206,14 +207,14 @@ Template.measureFlow.events({
         // 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');
 
-            // Get the clicked label window offset
-            const labelOffset = $label.offset();
-
             // Subtract the label box shadow height from the label's position
             labelOffset.top -= 10;
 

Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

@@ -30,10 +30,6 @@
     width: 213px
 
     &>.tree-options
-      margin-right: -17px
-      max-height: 250px
-      overflow-x: hidden
-      overflow-y: scroll
       position: relative
       z-index: 2
 
@@ -120,3 +116,48 @@
 
     span
       display: block
+
+  &.tree-columns
+
+    .select-tree-root
+
+      .select-tree-common
+        padding-left: 0
+        padding-right: 6px
+        right: auto
+        left: 0
+        width: 33.333333333333%
+
+      &>.tree-content
+        transform-origin(0% 50%)
+        width: 426px
+
+      .select-tree-common .content
+        right: -100%
+
+      &.started .select-tree-common .content
+        right: 6px
+
+      &.interacted .select-tree-common .content
+        animation-name: selectTreeCommonCloseRight
+
+      .tree-inputs>label
+        float: left
+        width: 50%
+
+@keyframes selectTreeCommonCloseRight {
+  from {
+    height: 37px
+    display: table
+    right: 6px
+    opacity: 1
+    visibility: visible
+  }
+  to {
+    height: 100%
+    right: -100%
+    opacity: 0
+    visibility: hidden
+    width: calc(100% - 6px)
+  }
+}