Lesion Tracker Redesign so far

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.html

@@ -0,0 +1,20 @@
+<template name="flexboxLayout">
+    <div class="viewerSection">
+        <div class="sidebarMenu sidebar-left {{ #if studySidebarOpen }}sidebar-open{{/if}}">
+            <div class="timepointButtonContainer p-t-2">
+                {{>roundedButtonGroup buttonGroupData}}
+            </div>
+            <hr class="m-y-0">
+            {{>studyTimepointBrowser timepointViewType=timepointViewType}}
+        </div>
+        <div class="mainContent {{ #if studySidebarOpen }}sidebar-left-open{{/if}} {{ #if rightSidebarOpen }}sidebar-right-open{{/if}}">
+            {{>viewerMain }}
+        </div>
+        <div class="sidebarMenu sidebar-right {{ #if lesionSidebarOpen }}sidebar-open{{/if}}">
+            {{>lesionTable }}
+        </div>
+        <div class="sidebarMenu sidebar-right {{ #if additionalMeasurementsSidebarOpen }}sidebar-open{{/if}}">
+            {{>additionalMeasurements }}
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.js

@@ -0,0 +1,66 @@
+Template.flexboxLayout.onCreated(() => {
+    const instance = Template.instance();
+    instance.state = instance.data.state;
+    instance.timepointViewType = new ReactiveVar();
+});
+
+var resizeTimeout;
+Template.flexboxLayout.onRendered(() => {
+    const instance = Template.instance();
+
+    instance.autorun(function() {
+        Meteor.clearTimeout(resizeTimeout);
+
+        // Trigger a resize any time the layout state changes
+        var studySidebarOpen = instance.state.get('studySidebarOpen');
+        var lesionSidebarOpen = instance.state.get('lesionSidebarOpen');
+
+        var additionalMeasurementsSidebarOpen = instance.state.get('additionalMeasurementsSidebarOpen');
+
+        resizeTimeout = Meteor.setTimeout(function() {
+            handleResize();
+        }, 300);
+    });
+});
+
+Template.flexboxLayout.helpers({
+    timepointViewType() {
+        return Template.instance().timepointViewType;
+    },
+
+    buttonGroupData() {
+        const instance = Template.instance();
+        return {
+            value: instance.timepointViewType,
+            options: [{
+                key: 'key',
+                text: 'Key Timepoints'
+            }, {
+                key: 'all',
+                text: 'All Timepoints'
+            }]
+        };
+    },
+
+    studySidebarOpen() {
+        const instance = Template.instance();
+        return instance.state.get('studySidebarOpen');
+    },
+
+    lesionSidebarOpen() {
+        const instance = Template.instance();
+        return instance.state.get('lesionSidebarOpen');
+    },
+
+    additionalMeasurementsSidebarOpen() {
+        const instance = Template.instance();
+        return instance.state.get('additionalMeasurementsSidebarOpen');
+    },
+
+    rightSidebarOpen() {
+        const instance = Template.instance();
+        const lesionSidebarOpen = instance.data.state.get('lesionSidebarOpen');
+        const additionalMeasurementsSidebarOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
+        return lesionSidebarOpen || additionalMeasurementsSidebarOpen;
+    }
+});

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl

@@ -0,0 +1,69 @@
+@import "{design}/app"
+
+.viewerSection
+  display: inline-flex
+  flex-flow: row nowrap
+  align-items: stretch
+  height: 'calc(100% - %s)' % $toolbarHeight
+  width: 100%
+
+  .sidebarMenu
+    position: absolute
+    height: 100%
+    background: $primaryBackgroundColor
+    -webkit-transition: $sidebarTransition
+    -ms-transition: $sidebarTransition
+    -o-transition: $sidebarTransition
+    -moz-transition: $sidebarTransition
+    transition: $sidebarTransition
+
+    .timepointButtonContainer
+      height: 55px
+
+  .sidebar-left
+    width: $studiesSidebarMenuWidth
+    order: 1
+    flex: 0
+    left: - $studiesSidebarMenuWidth
+    border-right: $uiBorderThickness $uiBorderColor solid
+
+    &.sidebar-open
+      left: 0
+
+  .mainContent
+    order: 2
+    width: 100%
+    height: 100%
+    -webkit-transition: $sidebarTransition
+    -ms-transition: $sidebarTransition
+    -o-transition: $sidebarTransition
+    -moz-transition: $sidebarTransition
+    transition: $sidebarTransition
+    transform: translate3d(0,0,0);
+
+    &.sidebar-left-open.sidebar-right-open
+      width: 'calc(100% - %s)' % ($studiesSidebarMenuWidth + $lesionsSidebarMenuWidth)
+
+    &.sidebar-right-open
+      width: 'calc(100% - %s)' % $lesionsSidebarMenuWidth
+
+    &.sidebar-left-open
+      width: 'calc(100% - %s)' % $studiesSidebarMenuWidth
+
+    &.sidebar-left-open
+      transform: translate3d($studiesSidebarMenuWidth,0,0);
+
+  .sidebar-right
+    width: $lesionsSidebarMenuWidth
+    order: 3
+    flex: 0
+    right: - $lesionsSidebarMenuWidth
+    border-left: $uiBorderThickness $uiBorderColor solid
+
+    &.sidebar-open
+      right: 0
+
+  .studiesListedChanger
+    padding: 20px 10px
+    text-align: center
+    border-bottom: $uiBorderThickness $uiBorderColor solid