From 394678c04e5df34119db8bb69740f7d5a1957c8d Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 17 Aug 2016 19:48:06 -0300
Subject: [PATCH] LT-275: Creating 3 columns layout for open source version

---
 .../design/styles/components/selectTree.styl  |  1 -
 .../components/measureFlow/measureFlow.html   |  2 +-
 .../components/measureFlow/measureFlow.js     |  7 +--
 .../components/measureFlow/measureFlow.styl   | 49 +++++++++++++++++--
 .../bootstrap/input/selectTree.html           |  2 +-
 .../components/bootstrap/input/selectTree.js  |  5 +-
 .../components/playground/playground.html     |  2 +-
 7 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/Packages/design/styles/components/selectTree.styl b/Packages/design/styles/components/selectTree.styl
index 0dfe25a85..543f5ed92 100644
--- a/Packages/design/styles/components/selectTree.styl
+++ b/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
 
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
index 964454710..ec6d6cfa0 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
+++ b/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">
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
index d52219261..be7157d4d 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
+++ b/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;
 
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index 5fbe75f6b..4cd2c0556 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/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)
+  }
+}
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
index fe1f10849..633547864 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
+++ b/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))
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
index 9fa7a776c..7871eacbf 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
+++ b/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();
diff --git a/Packages/ohif-core/client/components/playground/playground.html b/Packages/ohif-core/client/components/playground/playground.html
index 07b5941a6..8dcd60861 100644
--- a/Packages/ohif-core/client/components/playground/playground.html
+++ b/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