LT-115: Grouping sub target tools with new layout and changing data structure

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

@@ -3,26 +3,5 @@
         {{#each toolbarButton in toolbarButtons}}
             {{>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>
-                </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>
-        {{/if}}
     </div>
 </template>

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

@@ -1,9 +1,9 @@
 import { Template } from 'meteor/templating';
 
 Template.toolbarSectionTools.events({
-    'click .js-open-more-tools'(event, instance) {
+    'click .expandable'(event, instance) {
         const $target = $(event.currentTarget);
-        const isActive = $target.hasClass('active');
-        $target.toggleClass('active', !isActive);
+        const isExpanded = $target.hasClass('expanded');
+        $target.toggleClass('expanded', !isExpanded);
     }
 });

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

@@ -5,9 +5,18 @@ $distance = 10px
 .toolbarSectionTools
   position: relative
 
-  .toolbarSectionButton.active>.toolbarSectionDrawerContainer
-    opacity: 1
-    transform(translateX(-50%) translateY(0) scale(1))
+  .toolbarSectionButton>.buttonLabel i.expanded-status
+    text-align: center
+    transition(all 300ms ease)
+    width: 8px
+
+  .toolbarSectionButton.expanded
+    &>.buttonLabel i.expanded-status
+      transform(rotateX(180deg))
+
+    &>.toolbarSectionDrawerContainer
+      opacity: 1
+      transform(translateX(-50%) translateY(0) scale(1))
 
   .toolbarSectionDrawerContainer
     bottom: - $toolbarDrawerHeight
@@ -34,14 +43,3 @@ $distance = 10px
       padding-top: 6px
       text-align: center
       width: 100%
-
-  #moreTools
-    position: relative
-
-    .buttonLabel i
-      text-align: center
-      transition(all 300ms ease)
-      width: 8px
-
-    &.active .buttonLabel i
-      transform(rotateX(180deg))