LT-247: making rounded button group component toggleable

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -1,14 +1,7 @@
 <template name="toolbarSection">
     <div class="toolbarSection">
-        <div id="studySidebarToggle" class="pull-left toolbarSectionButton">
-            <div class="capsule svgContainer">
-                <svg>
-                    <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-studies"></use>
-                </svg>
-            </div>
-            <div class="buttonLabel">
-                Studies
-            </div>
+        <div class="pull-left">
+            {{>roundedButtonGroup leftSidebarToggleButtonData}}
         </div>
         <div class="pull-left">
             {{ #each toolbarButtons }}
@@ -33,7 +26,10 @@
         <div class="pull-right toolbarSectionEntry">
             {{ >caseProgress }}
         </div>
-        <div class="capsule-group pull-right">
+        <div class="pull-right">
+            {{>roundedButtonGroup rightSidebarToggleButtonData}}
+        </div>
+        <!-- <div class="capsule-group pull-right">
             <div id="lesionSidebarToggle" class="capsule-entry">
                 <div class="svgContainer capsule">
                     <svg>
@@ -54,7 +50,7 @@
                     Additional
                 </div>
             </div>
-        </div>
+        </div> -->
         <div id="toggleHUD" class="pull-right toolbarSectionButton">
             <div class="svgContainer">
                 <svg>

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -1,10 +1,40 @@
-Template.toolbarSection.onRendered(function() {
-    var instance = this;
-
-    instance.state = instance.data.state;
-});
-
 Template.toolbarSection.helpers({
+    leftSidebarToggleButtonData() {
+        const instance = Template.instance();
+        return {
+            toggleable: true,
+            key: 'leftSidebar',
+            value: instance.data.state,
+            options: [{
+                value: 'studies',
+                svgLink: '/packages/lesiontracker/assets/icons.svg#icon-studies',
+                svgWidth: 15,
+                svgHeight: 13,
+                bottomLabel: 'Studies'
+            }]
+        };
+    },
+    rightSidebarToggleButtonData() {
+        const instance = Template.instance();
+        return {
+            toggleable: true,
+            key: 'rightSidebar',
+            value: instance.data.state,
+            options: [{
+                value: 'lesions',
+                svgLink: '/packages/lesiontracker/assets/icons.svg#icon-measurements-lesions',
+                svgWidth: 18,
+                svgHeight: 10,
+                bottomLabel: 'Lesions'
+            }, {
+                value: 'additional',
+                svgLink: '/packages/lesiontracker/assets/icons.svg#icon-measurements-additional',
+                svgWidth: 14,
+                svgHeight: 13,
+                bottomLabel: 'Additional'
+            }]
+        };
+    },
     toolbarButtons: function() {
         var buttonData = [];
         buttonData.push({
@@ -61,20 +91,6 @@ Template.toolbarSection.helpers({
 });
 
 Template.toolbarSection.events({
-    'click #studySidebarToggle': function(event, instance) {
-        var isOpen = instance.data.state.get('studySidebarOpen');
-        instance.data.state.set('studySidebarOpen', !isOpen);
-    },
-    'click #lesionSidebarToggle': function(event, instance) {
-        var isOpen = instance.data.state.get('lesionSidebarOpen');
-        instance.data.state.set('lesionSidebarOpen', !isOpen);
-        instance.data.state.set('additionalMeasurementsSidebarOpen', false);
-    },
-    'click #additionalMeasurementsSidebarToggle': function(event, instance) {
-        var isOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
-        instance.data.state.set('additionalMeasurementsSidebarOpen', !isOpen);
-        instance.data.state.set('lesionSidebarOpen', false);
-    },
     // TODO: Inherit these from toolbar template somehow
     'click .imageViewerTool': function(e) {
         $(e.currentTarget).tooltip('hide');

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -5,78 +5,6 @@
   width: 100%
   border-bottom: $uiBorderColor $uiBorderThickness solid
 
-  .capsule-group
-    display: inline-block
-
-    div.capsule-entry
-      display: inline-block
-      color: $defaultColor
-      fill: $defaultColor
-      stroke: $defaultColor
-      height: $toolbarHeight
-      min-width: 30px
-      cursor: pointer
-      text-align: center
-      margin: 0
-
-      div.capsule
-        width: 66px
-        height: 26px
-
-      &:first-child
-        .capsule
-          border-radius: 57px
-          background-color: #16202b
-          border: solid 1px #3c5d80
-          border-right: none
-          border-top-right-radius: 0
-          border-bottom-right-radius: 0
-
-      &:last-child
-        .capsule
-          border-radius: 57px
-          background-color: #16202b
-          border: solid 1px #3c5d80
-          border-left: none
-          border-top-left-radius: 0
-          border-bottom-left-radius: 0
-
-      &.disabled
-       opacity: 0.5
-       cursor: not-allowed
-
-      .svgContainer
-       margin: 0 auto
-       text-align: center
-
-      .capsule
-       width: 62px
-       height: 26px
-       border-radius: 100px
-       background-color: #16202b
-       border: solid 1px #3c5d80
-
-      svg
-       background-color: transparent
-       margin: 5px
-       width: 17px
-       height: 17px
-
-      &:active, &.active
-       color: $activeColor
-
-       svg
-         fill: $activeColor
-         stroke: $activeColor
-
-      &:hover
-       color: $hoverColor
-
-       svg
-         fill: $hoverColor
-         stroke: $hoverColor
-
-
   .toolbarSectionButton
     display: inline-block
     color: $defaultColor
@@ -99,13 +27,6 @@
       margin: 0 auto
       text-align: center
 
-    .capsule
-      width: 62px
-      height: 26px
-      border-radius: 100px
-      background-color: #16202b
-      border: solid 1px #3c5d80
-
     svg
       background-color: transparent
       margin: 2px