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')

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

@@ -3,26 +3,5 @@
         {{#each toolbarButton in toolbarButtons}}
             {{>toolbarSectionButton toolbarButton}}
         {{/each}}
-
-        {{#if extraToolbarButtons}}
-            <div id="moreTools" class="js-open-more-tools toolbarSectionButton rp-x-1 rm-l-3">
-                <div class="svgContainer">
-                    <svg>
-                        <use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-tools-more"></use>
-                    </svg>
-                </div>
-                <div class="buttonLabel">
-                    <span>More</span>
-                    <i class="fa fa-caret-down" aria-hidden="true"></i>
-                </div>
-                <div class="toolbarSectionDrawerContainer">
-                    <div class="toolbarSectionDrawer">
-                        {{#each toolbarButton in extraToolbarButtons}}
-                            {{>toolbarSectionButton toolbarButton}}
-                        {{/each}}
-                    </div>
-                </div>
-            </div>
-        {{/if}}
     </div>
 </template>

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

@@ -1,9 +1,9 @@
 import { Template } from 'meteor/templating';
 
 Template.toolbarSectionTools.events({
-    'click .js-open-more-tools'(event, instance) {
+    'click .expandable'(event, instance) {
         const $target = $(event.currentTarget);
-        const isActive = $target.hasClass('active');
-        $target.toggleClass('active', !isActive);
+        const isExpanded = $target.hasClass('expanded');
+        $target.toggleClass('expanded', !isExpanded);
     }
 });

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

@@ -5,9 +5,18 @@ $distance = 10px
 .toolbarSectionTools
   position: relative
 
-  .toolbarSectionButton.active>.toolbarSectionDrawerContainer
-    opacity: 1
-    transform(translateX(-50%) translateY(0) scale(1))
+  .toolbarSectionButton>.buttonLabel i.expanded-status
+    text-align: center
+    transition(all 300ms ease)
+    width: 8px
+
+  .toolbarSectionButton.expanded
+    &>.buttonLabel i.expanded-status
+      transform(rotateX(180deg))
+
+    &>.toolbarSectionDrawerContainer
+      opacity: 1
+      transform(translateX(-50%) translateY(0) scale(1))
 
   .toolbarSectionDrawerContainer
     bottom: - $toolbarDrawerHeight
@@ -34,14 +43,3 @@ $distance = 10px
       padding-top: 6px
       text-align: center
       width: 100%
-
-  #moreTools
-    position: relative
-
-    .buttonLabel i
-      text-align: center
-      transition(all 300ms ease)
-      width: 8px
-
-    &.active .buttonLabel i
-      transform(rotateX(180deg))