Started replacing toolbar in OHIF Viewer with that of Lesion Tracker (OHIF-49)

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

@@ -0,0 +1,28 @@
+<template name="toolbarSectionTools">
+    <div class="toolbarSectionTools pull-left m-t-1 rm-l-3">
+        {{#each toolbarButton in toolbarButtons}}
+            {{>toolbarSectionButton toolbarButton}}
+        {{/each}}
+
+        <div id="moreTools" class="js-open-more-tools toolbarSectionButton rp-x-1 rm-l-3">
+            <div class="svgContainer">
+                <svg>
+                    <use xlink:href="/packages/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>
+
+        <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>
+</template>

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

@@ -0,0 +1,8 @@
+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/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl

@@ -0,0 +1,33 @@
+@import "{design}/app"
+
+$distance = 12px
+
+.toolbarSectionTools
+  position: relative
+
+  .toolbarSectionDrawerContainer
+    bottom: - ($toolbarDrawerHeight + $distance)
+    height: $toolbarDrawerHeight
+    left: 0
+    position: absolute
+    width: 100%
+
+    .toolbarSectionDrawer
+      background-color: $uiGrayDarker
+      border-radius: 7px
+      color: $textPrimaryColor
+      content: ''
+      display: block
+      font-size: 18px
+      height: $toolbarDrawerHeight - $distance
+      text-align: center
+      width: 100%
+
+  #moreTools
+    .buttonLabel i
+      text-align: center
+      transition(all 300ms ease)
+      width: 8px
+
+    &.active .buttonLabel i
+      transform(rotateX(180deg))