LT-247: making rounded button group component toggleable

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

@@ -1,19 +1,19 @@
 <template name="flexboxLayout">
     <div class="viewerSection">
-        <div class="sidebarMenu sidebar-left {{ #if studySidebarOpen }}sidebar-open{{/if}}">
+        <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
             <div class="timepointButtonContainer p-t-2">
-                {{>roundedButtonGroup buttonGroupData}}
+                {{>roundedButtonGroup sidebarButtonGroupData}}
             </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}}">
+        <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
             {{>viewerMain }}
         </div>
-        <div class="sidebarMenu sidebar-right {{ #if lesionSidebarOpen }}sidebar-open{{/if}}">
+        <div class="sidebarMenu sidebar-right {{#if lesionSidebarOpen}}sidebar-open{{/if}}">
             {{>lesionTable }}
         </div>
-        <div class="sidebarMenu sidebar-right {{ #if additionalMeasurementsSidebarOpen }}sidebar-open{{/if}}">
+        <div class="sidebarMenu sidebar-right {{#if additionalMeasurementsSidebarOpen}}sidebar-open{{/if}}">
             {{>additionalMeasurements }}
         </div>
     </div>

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

@@ -4,20 +4,18 @@ Template.flexboxLayout.onCreated(() => {
     instance.timepointViewType = new ReactiveVar();
 });
 
-var resizeTimeout;
+let resizeTimeout;
 Template.flexboxLayout.onRendered(() => {
     const instance = Template.instance();
 
-    instance.autorun(function() {
+    instance.autorun(() => {
         Meteor.clearTimeout(resizeTimeout);
 
         // Trigger a resize any time the layout state changes
-        var studySidebarOpen = instance.state.get('studySidebarOpen');
-        var lesionSidebarOpen = instance.state.get('lesionSidebarOpen');
+        instance.state.get('leftSidebar');
+        instance.state.get('rightSidebar');
 
-        var additionalMeasurementsSidebarOpen = instance.state.get('additionalMeasurementsSidebarOpen');
-
-        resizeTimeout = Meteor.setTimeout(function() {
+        resizeTimeout = Meteor.setTimeout(() => {
             handleResize();
         }, 300);
     });
@@ -28,39 +26,34 @@ Template.flexboxLayout.helpers({
         return Template.instance().timepointViewType;
     },
 
-    buttonGroupData() {
+    sidebarButtonGroupData() {
         const instance = Template.instance();
         return {
             value: instance.timepointViewType,
             options: [{
-                key: 'key',
+                value: 'key',
                 text: 'Key Timepoints'
             }, {
-                key: 'all',
+                value: 'all',
                 text: 'All Timepoints'
             }]
         };
     },
 
-    studySidebarOpen() {
+    leftSidebarOpen() {
         const instance = Template.instance();
-        return instance.state.get('studySidebarOpen');
+        return instance.state.get('leftSidebar');
     },
 
     lesionSidebarOpen() {
-        const instance = Template.instance();
-        return instance.state.get('lesionSidebarOpen');
+        return Template.instance().state.get('rightSidebar') === 'lesions';
     },
 
     additionalMeasurementsSidebarOpen() {
-        const instance = Template.instance();
-        return instance.state.get('additionalMeasurementsSidebarOpen');
+        return Template.instance().state.get('rightSidebar') === 'additional';
     },
 
     rightSidebarOpen() {
-        const instance = Template.instance();
-        const lesionSidebarOpen = instance.data.state.get('lesionSidebarOpen');
-        const additionalMeasurementsSidebarOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
-        return lesionSidebarOpen || additionalMeasurementsSidebarOpen;
+        return Template.instance().state.get('rightSidebar') !== null;
     }
 });