LT-247: making rounded button group component toggleable

Packages/design/components/roundedButtonGroup/roundedButtonGroup.html

@@ -1,7 +1,21 @@
 <template name="roundedButtonGroup">
-    <div class="{{class}} viewerRoundedButtonGroup clearfix center-table">
+    <div class="{{class}} roundedButtonGroup clearfix center-table">
         {{#each item in this.options}}
-            <a class="viewerRoundedButton noselect {{inlineIf value.get item.key 'active'}}" data-key="{{item.key}}">{{item.text}}</a>
+            <a class="roundedButtonWrapper noselect {{inlineIf getValue item.value 'active'}}" data-value="{{item.value}}">
+                <div class="roundedButton">
+                    {{#if item.svgLink}}
+                        <svg style="width: {{item.svgWidth}}px; height: {{item.svgHeight}}px">
+                            <use xlink:href="{{item.svgLink}}"></use>
+                        </svg>
+                    {{/if}}
+                    {{#if item.text}}
+                        <span>{{item.text}}</span>
+                    {{/if}}
+                </div>
+                {{#if item.bottomLabel}}
+                    <div class="bottomLabel">{{item.bottomLabel}}</div>
+                {{/if}}
+            </a>
         {{/each}}
     </div>
 </template>

Packages/design/components/roundedButtonGroup/roundedButtonGroup.js

@@ -1,15 +1,40 @@
-Template.roundedButtonGroup.onRendered(() => {
+Template.roundedButtonGroup.onCreated(() => {
     const instance = Template.instance();
-    const value = instance.data.value;
+    const reactiveValue = instance.data.value;
-    if (!value.get()) {
+
-        value.set(instance.data.options[0].key);
+    // Get the value for ReactiveVar or ReactiveDict objects
+    instance.getValue = () => {
+        return reactiveValue.get(instance.data.key);
+    };
+
+    // Set the value for ReactiveVar or ReactiveDict objects
+    instance.setValue = value => {
+        const args = [value];
+        if (reactiveValue instanceof ReactiveDict) {
+            args.unshift(instance.data.key);
+        }
+
+        reactiveValue.set(...args);
+    };
+
+    // Initialize the value with the first option if there's no value set and options are not toggleable
+    if (!instance.getValue() && !instance.data.toggleable) {
+        instance.setValue(instance.data.options[0].value);
     }
 });
 
 Template.roundedButtonGroup.events({
-    'click [data-key]'(event, instance) {
+    'click [data-value]'(event, instance) {
-        const $element = $(event.currentTarget);
+        event.preventDefault();
-        const key = $element.attr('data-key');
+        const $target = $(event.currentTarget);
-        instance.data.value.set(key);
+        const nullValue = $target.hasClass('active') && instance.data.toggleable;
+        const value = nullValue ? null : $target.attr('data-value');
+        instance.setValue(value);
+    }
+});
+
+Template.roundedButtonGroup.helpers({
+    getValue() {
+        return Template.instance().getValue();
     }
 });

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -4,43 +4,67 @@ $height = 25px
 $borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
-.viewerRoundedButtonGroup
+.roundedButtonGroup
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-weight: 500
-  position: relative
 
-  .viewerRoundedButton
+  .roundedButtonWrapper
-    background: $darkUiColor
-    border: 1px $uiBorderColorDark solid
-    color: $textSecondaryColor
     cursor: pointer
     display: inline-block
-    margin-left: -1px
     float: left
-    font-size: 11px
+    margin-left: -1px
-    height: $height
-    line-height: $height
-    padding: 0 15px
     text-decoration: none
-    text-transform: uppercase
+    text-align: center
-    transition: $sidebarTransition
-    -webkit-transition: $sidebarTransition
-    -ms-transition: $sidebarTransition
-    -o-transition: $sidebarTransition
-    -moz-transition: $sidebarTransition
-    z-index: 1
 
-    &.active
+    .roundedButton
-      background: $activeColor
+      align-items: center
-      color: $textColorActive
+      background-color: $darkUiColor
-      border-color: $borderColorActive
+      border: 1px $uiBorderColorDark solid
-      z-index: 2
+      color: $textSecondaryColor
+      display: flex
+      font-size: 11px
+      font-weight: 500
+      justify-content: center
+      height: $height
+      line-height: $height
+      padding: 0 22px
+      text-transform: uppercase
+      transition: transition($sidebarTransition)
+
+      svg
+        fill: $defaultColor
+        stroke: $defaultColor
+
+      svg
+      span
+        margin: 0 2px
+
+    .bottomLabel
+      color: $textSecondaryColor
+      font-size: 12px
+      line-height: 12px
+      margin-top: 8px
 
     &:first-child
       margin-left: 0
-      border-bottom-left-radius: $height
+      .roundedButton
-      border-top-left-radius: $height
+        border-bottom-left-radius: $height
+        border-top-left-radius: $height
 
-    &:last-child
+    &:last-child .roundedButton
       border-bottom-right-radius: $height
       border-top-right-radius: $height
+
+    &:hover .roundedButton
+      background-color: $boxBackgroundColor
+      color: $darkUiColor
+
+    &.active .roundedButton
+      background-color: $activeColor
+      border-color: $borderColorActive
+      color: $textColorActive
+
+    &:hover .roundedButton
+    &.active .roundedButton
+      svg
+        fill: $darkUiColor
+        stroke: $darkUiColor

Packages/design/styles/variables.styl

@@ -6,6 +6,7 @@ $uiBorderColor = #436270
 $uiBorderColorDark = #3C5D80
 $darkUiColor = #16202B
 $primaryBackgroundColor = #000000
+$boxBackgroundColor = #3E5975
 
 // Text Colors
 $textPrimaryColor = #ffffff

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');
+        instance.state.get('leftSidebar');
-        var lesionSidebarOpen = instance.state.get('lesionSidebarOpen');
+        instance.state.get('rightSidebar');
 
-        var additionalMeasurementsSidebarOpen = instance.state.get('additionalMeasurementsSidebarOpen');
+        resizeTimeout = Meteor.setTimeout(() => {
-
-        resizeTimeout = Meteor.setTimeout(function() {
             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 Template.instance().state.get('rightSidebar') === 'lesions';
-        return instance.state.get('lesionSidebarOpen');
     },
 
     additionalMeasurementsSidebarOpen() {
-        const instance = Template.instance();
+        return Template.instance().state.get('rightSidebar') === 'additional';
-        return instance.state.get('additionalMeasurementsSidebarOpen');
     },
 
     rightSidebarOpen() {
-        const instance = Template.instance();
+        return Template.instance().state.get('rightSidebar') !== null;
-        const lesionSidebarOpen = instance.data.state.get('lesionSidebarOpen');
-        const additionalMeasurementsSidebarOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
-        return lesionSidebarOpen || additionalMeasurementsSidebarOpen;
     }
 });

Packages/lesiontracker/client/components/lesionTable/lesionTable.js

@@ -12,10 +12,10 @@ Template.lesionTable.helpers({
         return {
             value: instance.lesionTableLayout,
             options: [{
-                key: 'comparison',
+                value: 'comparison',
                 text: 'Comparison'
             }, {
-                key: 'key',
+                value: 'key',
                 text: 'Key Timepoints'
             }]
         };

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl

@@ -1,6 +1,5 @@
 @import "{design}/app"
 
-$boxBackgroundColor = #3E5975
 $boxBorderColor = transparent
 $boxHoverBackgroundColor = #14191E
 $boxHoverBorderColor = #2d4660

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="pull-left">
-            <div class="capsule svgContainer">
+            {{>roundedButtonGroup leftSidebarToggleButtonData}}
-                <svg>
-                    <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-studies"></use>
-                </svg>
-            </div>
-            <div class="buttonLabel">
-                Studies
-            </div>
         </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

Packages/lesiontracker/client/components/viewer/viewer.js

@@ -1,7 +1,6 @@
 Session.setDefault('activeViewport', false);
-Session.setDefault('studySidebarOpen', false);
+Session.setDefault('leftSidebar', null);
-Session.setDefault('lesionSidebarOpen', false);
+Session.setDefault('rightSidebar', null);
-Session.setDefault('additionalMeasurementsSidebarOpen', false);
 
 Template.viewer.onCreated(function() {
     // Attach the Window resize listener
@@ -11,9 +10,8 @@ Template.viewer.onCreated(function() {
 
     var instance = this;
     instance.data.state = new ReactiveDict();
-    instance.data.state.set('studySidebarOpen', Session.get('studySidebarOpen'));
+    instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
-    instance.data.state.set('lesionSidebarOpen', Session.get('lesionSidebarOpen'));
+    instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
-    instance.data.state.set('additionalMeasurementsSidebarOpen', Session.get('additionalMeasurementsSidebarOpen'));
 
     var contentId = this.data.contentId;