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

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)