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

Packages/design/styles/components/selectTree.styl

@@ -146,7 +146,6 @@ $gray6 = #303030
 
       &.active
         box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
-        position: fixed
         transition(box-shadow 0.3s ease)
         z-index: 0
 

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)
+  }
+}

Packages/ohif-core/client/components/bootstrap/input/selectTree.html

@@ -21,7 +21,7 @@
                     {{#if this.root}}
                         {{>selectTreeBreadcrumb component=this.component}}
                     {{/if}}
-                    <div class="tree-inputs">
+                    <div class="tree-inputs clearfix">
                         {{#each item in treeItems}}
                             {{>inputRadio
                                 id=(concat this.storageKey '_' (encodeId item.value))

Packages/ohif-core/client/components/bootstrap/input/selectTree.js

@@ -25,7 +25,10 @@ Template.selectTree.onRendered(() => {
     instance.component = component;
 
     // Set the margin to display the common section
-    $treeRoot.children('.tree-content').css('margin-right', $treeRoot.width());
+    const isTreeColumns = instance.data.treeColumns;
+    const marginProperty = isTreeColumns ? 'margin-left' : 'margin-right';
+    const marginWidth = isTreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
+    $treeRoot.children('.tree-content').css(marginProperty, marginWidth);
 
     // Make the component respect the window boundaries
     $treeRoot.bounded();

Packages/ohif-core/client/components/playground/playground.html

@@ -1,6 +1,6 @@
 <template name="componentPlayground">
     <div class="component-playground">
-        {{>measureFlow}}
+        {{>measureFlow treeColumns=true}}
         <!--
             <div class="p-a-3">
                 {{>selectTree