LT-115: Changing the 'more tools' layout and behavior

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

@@ -1,4 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { Session } from 'meteor/session';
 
 Template.toolbarSectionButton.helpers({
     activeClass() {
@@ -11,9 +13,10 @@ Template.toolbarSectionButton.helpers({
             return 'active';
         }
     },
+
     disableButton() {
         const instance = Template.instance();
-        return this.disableFunction && this.disableFunction();
+        return instance.disableFunction && instance.disableFunction();
     }
 });
 
@@ -37,7 +40,11 @@ Template.toolbarSectionButton.events({
             toolManager.setActiveTool(tool, elements);
         }
     },
+
     'click .imageViewerCommand'(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

@@ -10,13 +10,13 @@
   text-align: center
 
   &.disabled
-    opacity: 0.5
-    cursor: not-allowed
-    
-    &:hover 
-      i,
-      .buttonLabel
-        theme('color', '$textSecondaryColor')
+    &>.buttonLabel, &>.svgContainer
+      opacity: 0.5
+      cursor: not-allowed
+
+      &:hover
+        &, i
+          theme('color', '$textSecondaryColor')
 
   .buttonLabel
     theme('color', '$textSecondaryColor')
@@ -26,7 +26,7 @@
   .svgContainer
     margin: 0 auto
     text-align: center
-    
+
     i
       theme('color', '$textSecondaryColor')
       font-size: 18px
@@ -39,23 +39,23 @@
     height: 21px
 
   &:hover
-    .buttonLabel
+    &>.buttonLabel, &>.svgContainer
       theme('color', '$hoverColor')
 
-    svg
-      theme('fill', '$hoverColor')
-      theme('stroke', '$hoverColor')
-      
-    i
-      theme('color', '$hoverColor')
+      svg
+        theme('fill', '$hoverColor')
+        theme('stroke', '$hoverColor')
+
+      i
+        theme('color', '$hoverColor')
 
   &:active, &.active
-    .buttonLabel
+    &>.buttonLabel, &>.svgContainer
       theme('color', '$activeColor')
 
-    svg
-      theme('fill', '$activeColor')
-      theme('stroke', '$activeColor')
-      
-    i
-      theme('color', '$activeColor')
+      svg
+        theme('fill', '$activeColor')
+        theme('stroke', '$activeColor')
+
+      i
+        theme('color', '$activeColor')