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

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
@@ -164,10 +164,10 @@ $seriesSpacing = 2px
     overflow-x: hidden
     overflow-y: scroll
     width: calc(100% + 22px)
-    
+
     &.is-mac
       padding-right: 22px
-      
+
     &.show-scroll-indicator-up:before
     &.show-scroll-indicator-down:after
       font-family: FontAwesome
@@ -180,11 +180,11 @@ $seriesSpacing = 2px
       z-index: 1
       text-align: center
       left: 0
-        
+
     &.show-scroll-indicator-up:before
       top: -10px
       content: '\f102'
-        
+
     &.show-scroll-indicator-down:after
       bottom: 18px
       content: '\f103'

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

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

@@ -4,27 +4,25 @@
             {{>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>
+        {{#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>
-            <div class="buttonLabel">
-                <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>
-        {{ /if }}
+        {{/if}}
     </div>
-</template>
+</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)