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

LesionTracker/client/components/toolbarSection/toolbarSection.js

@@ -203,13 +203,14 @@ Template.toolbarSection.helpers({
             disabled: isToolDisabled
         });
 
-        buttonData.push({
+        // Disabling this on Lesion Tracker
-            id: 'targetEX',
+        // buttonData.push({
-            title: 'EX Target',
+        //     id: 'targetEX',
-            classes: 'imageViewerTool toolbarSectionButton',
+        //     title: 'EX Target',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
+        //     classes: 'imageViewerTool toolbarSectionButton',
-            disabled: isToolDisabled
+        //     svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
-        });
+        //     disabled: isToolDisabled
+        // });
 
         return buttonData;
     }

LesionTracker/client/components/toolbarSection/toolbarSection.styl

@@ -4,7 +4,6 @@
   theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
   flex: 0 0 auto
   height: $toolbarHeight
-  overflow: hidden
   padding-top: 6px
   position: relative
   transition(height 300ms ease)

Packages/ohif-hanging-protocols/client/components/stageDetails/stageDetails.styl

@@ -21,7 +21,7 @@
     width: 25%
 
   input
-    theme('background-color', '$boxBackgroundColor')Dark
+    theme('background-color', '$boxBackgroundColor')
     min-width: 50px
     width: 40%
     border: none

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

@@ -121,7 +121,7 @@ $seriesSpacing = 2px
       width: $switchSize + $seriesSpacing
 
       .seriesItem
-        theme('background-color', '$boxBackgroundColor')Dark
+        theme('background-color', '$boxBackgroundColor')
         border-radius: 3px
         height: 15px
         margin: $seriesSpacing

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,12 +10,12 @@
   text-align: center
 
   &.disabled
+    &>.buttonLabel, &>.svgContainer
       opacity: 0.5
       cursor: not-allowed
 
       &:hover
-      i,
+        &, i
-      .buttonLabel
           theme('color', '$textSecondaryColor')
 
   .buttonLabel
@@ -39,7 +39,7 @@
     height: 21px
 
   &:hover
-    .buttonLabel
+    &>.buttonLabel, &>.svgContainer
       theme('color', '$hoverColor')
 
       svg
@@ -50,7 +50,7 @@
         theme('color', '$hoverColor')
 
   &:active, &.active
-    .buttonLabel
+    &>.buttonLabel, &>.svgContainer
       theme('color', '$activeColor')
 
       svg

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

@@ -15,16 +15,14 @@
                     <span>More</span>
                     <i class="fa fa-caret-down" aria-hidden="true"></i>
                 </div>
-        </div>
-
                 <div class="toolbarSectionDrawerContainer">
-            <!-- TODO: [design] check which group of tools shall be shown -->
                     <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,8 +1,9 @@
+import { Template } from 'meteor/templating';
+
 Template.toolbarSectionTools.events({
     'click .js-open-more-tools'(event, instance) {
         const $target = $(event.currentTarget);
         const isActive = $target.hasClass('active');
         $target.toggleClass('active', !isActive);
-        $target.closest('.toolbarSection').toggleClass('expanded', !isActive);
     }
 });

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

@@ -1,30 +1,43 @@
 @import "{design}/app"
 
-$distance = 12px
+$distance = 10px
 
 .toolbarSectionTools
   position: relative
 
+  .toolbarSectionButton.active>.toolbarSectionDrawerContainer
+    opacity: 1
+    transform(translateX(-50%) translateY(0) scale(1))
+
   .toolbarSectionDrawerContainer
-    bottom: - ($toolbarDrawerHeight + $distance)
+    bottom: - $toolbarDrawerHeight
     height: $toolbarDrawerHeight
-    left: 0
+    left: 50%
     min-width: 100%
+    opacity: 0
+    padding-top: $distance
     position: absolute
+    transition(opacity 0.3s ease\, transform 0.3s ease)
+    transform(translateX(-50%) translateY( - ($toolbarDrawerHeight + $distance)) scale(0))
     white-space: nowrap
+    z-index: 1
 
     .toolbarSectionDrawer
-      theme('background-color', '$uiGrayDarker')
+      theme('background', '$uiGrayDarkest', 0.95)
+      theme('border', '2px solid $uiBorderColor', 0.95)
       border-radius: 7px
       theme('color', '$textPrimaryColor')
       content: ''
       display: block
       font-size: 18px
-      height: $toolbarDrawerHeight - $distance
+      height: $toolbarDrawerHeight
+      padding-top: 6px
       text-align: center
       width: 100%
 
   #moreTools
+    position: relative
+
     .buttonLabel i
       text-align: center
       transition(all 300ms ease)