LT-242: Creating UI resizable, improving heads up display layout and fixing tool selection behavior

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -39,7 +39,7 @@
             <div class="pull-right m-t-1 rm-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
             </div>
-            <div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3">
+            <div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3 {{#if session 'lesionTableHudOpen'}}active{{/if}}">
                 <div class="svgContainer">
                     <svg>
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -106,39 +106,9 @@ Template.toolbarSection.helpers({
 });
 
 Template.toolbarSection.events({
-    // TODO: Inherit these from toolbar template somehow
-    'click .imageViewerTool': function(e) {
-        $(e.currentTarget).tooltip('hide');
-
-        var tool = e.currentTarget.id;
-
-        var elements = $('.imageViewerViewport');
-
-        var activeTool = toolManager.getActiveTool();
-        if (tool === activeTool) {
-            var defaultTool = toolManager.getDefaultTool();
-            console.log('Setting active tool to: ' + defaultTool);
-            toolManager.setActiveTool(defaultTool, elements);
-        } else {
-            console.log('Setting active tool to: ' + tool);
-            toolManager.setActiveTool(tool, elements);
-        }
-    },
-    'click .imageViewerCommand': function(e) {
-        $(e.currentTarget).tooltip('hide');
-
-        var command = e.currentTarget.id;
-        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
-            return;
-        }
-
-        var activeViewport = Session.get('activeViewport');
-        var element = $('.imageViewerViewport').get(activeViewport);
-        OHIF.viewer.functionList[command](element);
-    },
-    'click #toggleHUD': function(e) {
-        var lesionTableHUD = document.getElementById('lesionTableHUD');
-        toggleDialog(lesionTableHUD);
+    'click #toggleHUD'(event, instance) {
+        const state = Session.get('lesionTableHudOpen');
+        Session.set('lesionTableHudOpen', !state);
     },
     'click #moreTools'(event, instance) {
         const $target = $(event.currentTarget);

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -23,7 +23,7 @@
       width: 100%
 
       .toolbarSectionDrawer
-        background-color: $uiGrayDarkest
+        background-color: $uiGrayDarker
         border-radius: 7px
         color: $textPrimaryColor
         content: ''