LT-250: Creating drawer for toolbar 'more' button

OHIFViewer/client/components/viewer/viewer.styl

@@ -1,8 +1,10 @@
 #viewer
-  width: 100%
-  height: 100%
   border-top: 1px solid #525252
-  
+  display: flex
+  flex-flow: row nowrap
+  height: 100%
+  width: 100%
+
 .noselect
   -webkit-touch-callout: none
   -webkit-user-select: none
@@ -10,10 +12,10 @@
   -moz-user-select: none
   -ms-user-select: none
   user-select: none
-  
+
 .studyBrowser
   width: auto
-  
+
 .viewerMain
   float: left
   background-color: gray
@@ -34,4 +36,4 @@
   width: 120px
   overflow: hidden
   background-color: #000
-  padding-top: 10px
+  padding-top: 10px

Packages/design/styles/variables.styl

@@ -25,6 +25,7 @@ $menuBackgroundColor = #F2F2F2
 // Sizes
 $topBarHeight = 40px
 $toolbarHeight = 78px
+$toolbarDrawerHeight = 62px
 
 // Thicknesses
 $uiBorderThickness = 1px

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl

@@ -1,10 +1,10 @@
 @import "{design}/app"
 
 .viewerSection
-  display: inline-flex
+  display: flex
   flex-flow: row nowrap
   align-items: stretch
-  height: 'calc(100% - %s)' % $toolbarHeight
+  height: 100%
   width: 100%
 
   .sidebarMenu
@@ -38,6 +38,7 @@
     order: 2
     width: 100%
     height: 100%
+    overflow: hidden
     transition($sidebarTransition)
 
   .sidebar-right

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -4,8 +4,9 @@ $switchSize = 55px
 $seriesSpacing = 2px
 
 .quickSwitchWrapper
-  position: absolute
+  position: fixed
   top: 0
+  z-index: 1
 
   &.middle
     left: 50%

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -5,9 +5,9 @@
                 {{>roundedButtonGroup leftSidebarToggleButtonData}}
             </div>
             <div class="toolbarSectionTools pull-left m-t-1 rm-l-3">
-                {{ #each toolbarButtons }}
-                    {{ >toolbarSectionButton }}
-                {{ /each }}
+                {{#each toolbarButton in toolbarButtons}}
+                    {{>toolbarSectionButton toolbarButton}}
+                {{/each}}
 
                 <div id="moreTools" class="toolbarSectionButton rp-x-1 rm-l-3">
                     <div class="svgContainer">
@@ -19,6 +19,11 @@
                         More <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">More tools coming soon</div>
+                </div>
             </div>
 
             {{#if splitView}}

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -140,6 +140,12 @@ Template.toolbarSection.events({
     'click #toggleHUD': function(e) {
         var lesionTableHUD = document.getElementById('lesionTableHUD');
         toggleDialog(lesionTableHUD);
+    },
+    'click #moreTools'(event, instance) {
+        const $target = $(event.currentTarget);
+        const isActive = $target.hasClass('active');
+        $target.toggleClass('active', !isActive);
+        $target.closest('.toolbarSection').toggleClass('expanded', !isActive);
     }
 });
 

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -1,10 +1,49 @@
 @import "{design}/app"
 
 .toolbarSection
-  height: $toolbarHeight
-  padding-top: 6px
-  width: 100%
   border-bottom: $uiBorderColor $uiBorderThickness solid
+  height: $toolbarHeight
+  overflow: hidden
+  padding-top: 6px
+  position: relative
+  transition(height 300ms ease)
+  width: 100%
+
+  &.expanded
+    height: $toolbarHeight + $toolbarDrawerHeight
+
+  .toolbarSectionTools
+    position: relative
+
+    .toolbarSectionDrawerContainer
+      bottom: - ($toolbarDrawerHeight + 12px)
+      height: $toolbarDrawerHeight
+      left: 0
+      position: absolute
+      width: 100%
+
+      .toolbarSectionDrawer
+        background-color: $uiGrayDarkest
+        border-radius: 7px
+        color: $textPrimaryColor
+        content: ''
+        display: block
+        font-size: 18px
+        height: $toolbarDrawerHeight - 12px
+        line-height: $toolbarDrawerHeight - 12px
+        text-align: center
+        width: 100%
+
+    #moreTools
+
+      .buttonLabel i
+        text-align: center
+        transition(all 300ms ease)
+        width: 8px
+
+      &.active .buttonLabel i
+        transform(rotateX(180deg))
+
 
   .toolbarSectionButton
     display: inline-block

Packages/lesiontracker/client/components/viewer/viewer.html

@@ -1,17 +1,18 @@
 <template name="viewer">
     {{#if Template.subscriptionsReady}}
-    <div id="viewer">
-        {{ >confirmDeleteDialog }}
-        {{ >lesionLocationDialog }}
-        {{ >nonTargetLesionDialog }}
-        {{ >nonTargetResponseDialog }}
-        {{ >lesionTableHUD }}
-        <!-- >conformanceCheckFeedback -->
-
-        {{ >toolbarSection }}
-        {{ >flexboxLayout }}
-    </div>
+        <div class="viewerDialogs">
+            {{>confirmDeleteDialog}}
+            {{>lesionLocationDialog}}
+            {{>nonTargetLesionDialog}}
+            {{>nonTargetResponseDialog}}
+            {{>lesionTableHUD}}
+            {{! >conformanceCheckFeedback}}
+        </div>
+        <div id="viewer">
+            {{>toolbarSection}}
+            {{>flexboxLayout}}
+        </div>
     {{else}}
-        {{ >loadingText }}
+        {{>loadingText}}
     {{/if}}
-</template>
+</template>