New minimalist prototype for viewer layout

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

@@ -1,5 +1,28 @@
 <template name="componentPlayground">
-    <div class="component-playground">
+    <div class="layout-container">
-        {{>measureFlow threeColumns=true hideCommon=true}}
+        <div class="layout-header">
+            <div class="logo">LOGO</div>
+            <div class="toolbar">
+                <div class="toolbar-main">
+                    <button class="js-toggle-left">Toggle left</button>
+                    <button>Tool 1</button>
+                    <button>Tool 2</button>
+                    <button>Tool 3</button>
+                    <button class="js-tool-more">More...</button>
+                    <button class="js-toggle-right pull-right">Toggle right</button>
+                </div>
+                <div class="toolbar-drawer">
+                    <button>Tool 4</button>
+                    <button>Tool 5</button>
+                    <button>Tool 6</button>
+                    <button>Tool 7</button>
+                </div>
+            </div>
+        </div>
+        <div class="layout-body">
+            <div class="layout-sidebar layout-sidebar-left">LEFT|LEFT|LEFT</div>
+            <div class="layout-main">MAIN CONTENT</div>
+            <div class="layout-sidebar layout-sidebar-right">RIGHT|RIGHT|RIGHT|RIGHT</div>
+        </div>
     </div>
 </template>

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

@@ -1,4 +1,46 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.ui.layoutState = {
+    leftSidebar: new ReactiveVar(false),
+    rightSidebar: new ReactiveVar(false),
+    toolsDrawer: new ReactiveVar(false)
+};
+
 Template.componentPlayground.onRendered(() => {
     const instance = Template.instance();
-    instance.$('.measure-flow').draggable();
+
+    instance.$('.toolbar-drawer').adjustMax('height');
+    instance.autorun(() => {
+        const state = OHIF.ui.layoutState.toolsDrawer.get();
+        instance.$('.toolbar-drawer').toggleClass('open', state);
+    });
+
+    instance.$('.layout-sidebar-left').adjustMax('width');
+    instance.autorun(() => {
+        const state = OHIF.ui.layoutState.leftSidebar.get();
+        instance.$('.layout-sidebar-left').toggleClass('open', state);
+    });
+
+    instance.$('.layout-sidebar-right').adjustMax('width');
+    instance.autorun(() => {
+        const state = OHIF.ui.layoutState.rightSidebar.get();
+        instance.$('.layout-sidebar-right').toggleClass('open', state);
+    });
+});
+
+Template.componentPlayground.events({
+    'click .js-tool-more'(event, instance) {
+        const currentState = OHIF.ui.layoutState.toolsDrawer.get();
+        OHIF.ui.layoutState.toolsDrawer.set(!currentState);
+    },
+    'click .js-toggle-left'(event, instance) {
+        const currentState = OHIF.ui.layoutState.leftSidebar.get();
+        OHIF.ui.layoutState.leftSidebar.set(!currentState);
+    },
+    'click .js-toggle-right'(event, instance) {
+        const currentState = OHIF.ui.layoutState.rightSidebar.get();
+        OHIF.ui.layoutState.rightSidebar.set(!currentState);
+    }
 });

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

@@ -1,2 +1,37 @@
-.component-playground
+.layout-container
+    align-items: stretch
+    display: flex
+    flex-flow: column nowrap
     height: 100vh
+
+    .layout-header
+        background-color: cyan
+        flex-grow: 0
+
+    .layout-body
+        align-items: stretch
+        display: flex
+        flex-grow: 1
+
+.layout-sidebar
+    background-color: lime
+    flex-grow: 0
+
+.layout-main
+    background-color: white
+    flex-grow: 1
+
+.toolbar-drawer
+    overflow: hidden
+    transition: max-height 0.3s ease
+
+    &:not(.open)
+        max-height: 0 !important
+
+.layout-sidebar-left
+.layout-sidebar-right
+    overflow: hidden
+    transition: max-width 0.3s ease
+
+    &:not(.open)
+        max-width: 0 !important

Packages/ohif-core/client/ui/dimensional/dimensional.js

@@ -0,0 +1,45 @@
+import { $ } from 'meteor/jquery';
+
+// Temporarily show and hide the element to enable dimension calculations
+$.fn.tempShow = function(callback) {
+    const elementsToHide = [];
+    let current = this;
+
+    // Temporarily show all parent invisible elements until body
+    while (this.is(':hidden') && current !== document.body) {
+        const $element = this.parentsUntil(':visible').last();
+        if (!$element.length) {
+            break;
+        }
+
+        $element.addClass('visible');
+        current = $element[0];
+        elementsToHide.push(current);
+    }
+
+    if (typeof callback === 'function') {
+        callback(this);
+    }
+
+    $(elementsToHide).removeClass('visible');
+
+    return this;
+};
+
+// Adjust the max width/height to enable CSS3 transitions
+$.fn.adjustMax = function(dimension) {
+    const $element = $(this);
+    $element.tempShow(() => {
+        // Add a class to remove the max restriction
+        const maxClass = `no-max-${dimension}`;
+        $element.addClass(maxClass);
+
+        // Get the dimension function to obtain the outer dimension
+        const dimensionFn = 'outer' + dimension.charAt(0).toUpperCase() + dimension.slice(1);
+        const value = $element[dimensionFn]();
+
+        // Remove the max restriction class and set the new max
+        const maxProperty = `max-${dimension}`;
+        $element.removeClass(maxClass).css(maxProperty, value);
+    });
+};

Packages/ohif-core/client/ui/dimensional/dimensional.styl

@@ -0,0 +1,8 @@
+body *.visible
+    display: block !important
+
+body *.no-max-height:not(.bypassNot)
+    max-height: none !important
+
+body *.no-max-width:not(.bypassNot)
+    max-width: none !important

Packages/ohif-core/client/ui/index.js

@@ -1,4 +1,5 @@
 import './bounded/bounded.js';
+import './dimensional/dimensional.js';
 import './dialog/form.js';
 import './dialog/spatial.js';
 import './dialog/unsavedChangesDialog.js';

Packages/ohif-core/package.js

@@ -24,6 +24,7 @@ Package.onUse(function(api) {
 
     // UI Styles
     api.addFiles([
+        'client/ui/dimensional/dimensional.styl',
         'client/ui/resizable/resizable.styl',
         'client/components/bootstrap/dialog/unsavedChangesDialog.styl',
         'client/components/bootstrap/dropdown/dropdown.styl'