LT-115: Grouping sub target tools with new layout and changing data structure

Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html

@@ -3,7 +3,7 @@
         {{>UI.dynamic template=this.buttonTemplateName data=this}}
     {{else}}
         <div id="{{this.id}}"
-            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if this.disabled}}disabled{{/if}} {{#if (disableButton)}}disabled{{/if}}"
+            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if or this.disabled (disableButton)}}disabled{{/if}} {{#if this.subTools}}expandable{{/if}}"
             title="{{#if this.tooltipTitle}}{{this.tooltipTitle}}{{else}}{{this.title}}{{/if}}">
             <div class="svgContainer">
                 {{#if this.svgLink}}
@@ -15,8 +15,20 @@
                 {{/if}}
             </div>
             <div class="buttonLabel">
-                {{this.title}}
+                <span>{{this.title}}</span>
+                {{#if this.subTools}}
+                    <i class="fa fa-caret-down expanded-status" aria-hidden="true"></i>
+                {{/if}}
             </div>
+            {{#if this.subTools}}
+                <div class="toolbarSectionDrawerContainer">
+                    <div class="toolbarSectionDrawer">
+                        {{#each subTool in this.subTools}}
+                            {{>toolbarSectionButton subTool}}
+                        {{/each}}
+                    </div>
+                </div>
+            {{/if}}
         </div>
     {{/if}}
 </template>

Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js

@@ -1,14 +1,20 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
+import { _ } from 'meteor/underscore';
 
 Template.toolbarSectionButton.helpers({
     activeClass() {
         // TODO: Find a way to prevent the 'flash' after a click, but before this helper runs
         const instance = Template.instance();
+        const subTools = instance.data.subTools;
+        const currentId = instance.data.id;
+        const activeId = Session.get('ToolManagerActiveTool');
+        const isCurrentTool = currentId === activeId;
+        const isSubTool = subTools && _.findWhere(subTools, { id: activeId });
 
-        // Check if the current tool is the active one
-        if (instance.data.id === Session.get('ToolManagerActiveTool')) {
+        // Check if the current tool or a sub tool is the active one
+        if (isCurrentTool || isSubTool) {
             // Return the active class
             return 'active';
         }
@@ -22,6 +28,9 @@ Template.toolbarSectionButton.helpers({
 
 Template.toolbarSectionButton.events({
     'click .imageViewerTool'(event, instance) {
+        // Prevent the event from bubbling to parent tools
+        event.stopPropagation();
+
         // Stop here if the tool is disabled
         if ($(event.currentTarget).hasClass('disabled')) {
             return;

Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl

@@ -1,12 +1,13 @@
 @import "{design}/app"
 
 .toolbarSectionButton
-  display: inline-block
   theme('color', '$defaultColor')
   theme('fill', '$defaultColor')
   theme('stroke', '$defaultColor')
-  min-width: 30px
   cursor: pointer
+  display: inline-block
+  min-width: 30px
+  position: relative
   text-align: center
 
   &.disabled
@@ -39,16 +40,16 @@
     height: 21px
 
   &:hover
-    &>.buttonLabel, &>.svgContainer
+    &>.buttonLabel
       theme('color', '$hoverColor')
 
-      svg
-        theme('fill', '$hoverColor')
-        theme('stroke', '$hoverColor')
-
-      i
+      &>i
         theme('color', '$hoverColor')
 
+    &>.svgContainer>svg
+      theme('fill', '$hoverColor')
+      theme('stroke', '$hoverColor')
+
   &:active, &.active
     &>.buttonLabel, &>.svgContainer
       theme('color', '$activeColor')