New minimalist prototype for viewer layout

2016-11-23 18:59:37 -02:00
1 parent 5aaadcb7c4
commit 3abde998a0
@@ -1,5 +1,28 @@
 <template name="componentPlayground">
-    <div class="component-playground">
-        {{>measureFlow threeColumns=true hideCommon=true}}
+    <div class="layout-container">
+        <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>
@@ -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);
+    }
 });
@@ -1,2 +1,37 @@
-.component-playground
-  height: 100vh
+.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