LT-115: Closing the sub tools popup when clicking outside

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

@@ -2,13 +2,14 @@
     {{#if this.buttonTemplateName}}
         {{>UI.dynamic template=this.buttonTemplateName data=this}}
     {{else}}
-        <div id="{{this.id}}"
+        <div id="{{this.id}}" tabindex="1"
             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}}">
+            title="{{this.tooltipTitle}}">
+            <div class="focus-holder" tabindex="1"></div>
             <div class="svgContainer">
                 {{#if this.svgLink}}
                 <svg>
-                    <use xlink:href={{this.svgLink}}></use>
+                    <use xlink:href={{svgLink}}></use>
                 </svg>
                 {{else}}
                 <i class={{iconClasses}}></i>

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

@@ -3,20 +3,42 @@ import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
 import { _ } from 'meteor/underscore';
 
-Template.toolbarSectionButton.helpers({
-    activeClass() {
+Template.toolbarSectionButton.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.isActive = activeToolId => {
         // 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 });
+        const isCurrentTool = currentId === activeToolId;
+        const isSubTool = subTools && _.findWhere(subTools, { id: activeToolId });
 
         // Check if the current tool or a sub tool is the active one
-        if (isCurrentTool || isSubTool) {
-            // Return the active class
-            return 'active';
+        return isCurrentTool || isSubTool;
+    };
+});
+
+Template.toolbarSectionButton.helpers({
+    activeClass() {
+        const instance = Template.instance();
+        const activeToolId = Session.get('ToolManagerActiveTool');
+        const isActive = instance.isActive(activeToolId);
+        return isActive ? 'active' : '';
+    },
+
+    svgLink() {
+        const instance = Template.instance();
+        const subTools = instance.data.subTools;
+        const defaultSvgLink = instance.data.svgLink;
+        const activeToolId = Session.get('ToolManagerActiveTool');
+        const currentId = instance.data.id;
+
+        if (subTools && activeToolId !== currentId && instance.isActive(activeToolId)) {
+            const subTool = _.findWhere(subTools, { id: activeToolId });
+            return subTool ? subTool.svgLink : defaultSvgLink;
+        } else {
+            return defaultSvgLink;
         }
     },
 

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

@@ -7,6 +7,7 @@
   cursor: pointer
   display: inline-block
   min-width: 30px
+  outline: none
   position: relative
   text-align: center
 

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

@@ -1,9 +1,32 @@
 import { Template } from 'meteor/templating';
+import { Meteor } from 'meteor/meteor';
 
 Template.toolbarSectionTools.events({
     'click .expandable'(event, instance) {
         const $target = $(event.currentTarget);
         const isExpanded = $target.hasClass('expanded');
         $target.toggleClass('expanded', !isExpanded);
+    },
+
+    'focusout .expandable'(event, instance) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+
+        // Postpone the execution to be able to get the focused element
+        Meteor.defer(() => {
+            const $focused = $(':focus');
+            const $expandable = $(currentTarget).closest('.expandable');
+            const focusInside = $expandable.find(':focus').length;
+
+            // Check if the expandable lost the focus
+            if (!$focused.length || !focusInside) {
+                // Stop here if focus is going from subtool to expandable tool
+                if (currentTarget !== target && $focused[0] === currentTarget) {
+                    return;
+                }
+
+                $expandable.removeClass('expanded');
+            }
+        });
     }
 });