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

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