fix toolbar buttons

StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.html

@@ -5,8 +5,7 @@
                 {{>roundedButtonGroup leftSidebarToggleButtonData}}
             </div>
             {{> toolbarSectionTools
-                toolbarButtons=toolbarButtons
+                toolbarButtons=toolbarButtons}}
-                extraToolbarButtons=extraToolbarButtons}}
         </div>
     </div>
 </template>

StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.js

@@ -1,6 +1,14 @@
 import { OHIF } from 'meteor/ohif:core';
 import 'meteor/ohif:viewerbase';
 
+Template.toolbarSection.onCreated(() => {
+    const instance = Template.instance();
+
+    if (OHIF.uiSettings.leftSidebarOpen) {
+        instance.data.state.set('leftSidebar', 'studies');
+    }
+});
+
 Template.toolbarSection.helpers({
     leftSidebarToggleButtonData() {
         const instance = Template.instance();
@@ -10,7 +18,7 @@ Template.toolbarSection.helpers({
             value: instance.data.state,
             options: [{
                 value: 'studies',
-                svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-studies',
+                svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-studies',
                 svgWidth: 15,
                 svgHeight: 13,
                 bottomLabel: 'Series'
@@ -19,40 +27,99 @@ Template.toolbarSection.helpers({
     },
 
     toolbarButtons() {
+        const extraTools = [];
+
+        extraTools.push({
+            id: 'stackScroll',
+            title: 'Stack Scroll',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-bars'
+        });
+
+        extraTools.push({
+            id: 'magnify',
+            title: 'Magnify',
+            classes: 'imageViewerTool toolbarSectionButton',
+            iconClasses: 'fa fa-circle'
+        });
+
+        extraTools.push({
+            id: 'wwwcRegion',
+            title: 'ROI Window',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-square'
+        });
+
+        extraTools.push({
+            id: 'dragProbe',
+            title: 'Probe',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-dot-circle-o'
+        });
+
+        extraTools.push({
+            id: 'ellipticalRoi',
+            title: 'Ellipse',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-circle-o'
+        });
+
+        extraTools.push({
+            id: 'rectangleRoi',
+            title: 'Rectangle',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-square-o'
+        });
+
+        extraTools.push({
+            id: 'invert',
+            title: 'Invert',
+            classes: 'imageViewerCommand',
+            iconClasses: 'fa fa-adjust'
+        });
+
+        extraTools.push({
+            id: 'clearTools',
+            title: 'Clear',
+            classes: 'imageViewerCommand',
+            iconClasses: 'fa fa-trash'
+        });
+
         var buttonData = [];
+
         buttonData.push({
             id: 'zoom',
             title: 'Zoom',
             classes: 'imageViewerTool',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-zoom'
+            svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-tools-zoom'
         });
 
         buttonData.push({
             id: 'wwwc',
             title: 'Levels',
             classes: 'imageViewerTool',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-levels'
+            svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-tools-levels'
         });
 
         buttonData.push({
             id: 'pan',
             title: 'Pan',
             classes: 'imageViewerTool',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-pan'
+            svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-tools-pan'
         });
 
         buttonData.push({
             id: 'length',
             title: 'Length',
             classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp'
+            svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp'
         });
 
         buttonData.push({
             id: 'annotate',
             title: 'Annotate',
             classes: 'imageViewerTool',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-non-target'
+            svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-non-target'
         });
 
         buttonData.push({
@@ -69,19 +136,39 @@ Template.toolbarSection.helpers({
             iconClasses: 'fa fa-undo'
         });
 
-        buttonData.push({
+        if (!OHIF.uiSettings.displayEchoUltrasoundWorkflow) {
-            id: 'toggleCinePlay',
-            title: 'Toggle CINE Play',
-            classes: 'imageViewerCommand',
-            buttonTemplateName: 'playClipButton'
-        });
 
-        buttonData.push({
+            buttonData.push({
-            id: 'toggleCineDialog',
+                id: 'previousDisplaySet',
-            title: 'CINE',
+                title: 'Previous',
-            classes: 'imageViewerCommand',
+                classes: 'imageViewerCommand',
-            iconClasses: 'fa fa-youtube-play'
+                buttonTemplateName: 'displaySetNavigation',
-        });
+                isNext: false
+            });
+
+            buttonData.push({
+                id: 'nextDisplaySet',
+                title: 'Next',
+                classes: 'imageViewerCommand',
+                buttonTemplateName: 'displaySetNavigation',
+                isNext: true
+            });
+
+            buttonData.push({
+                id: 'toggleCinePlay',
+                title: 'Toggle CINE Play',
+                classes: 'imageViewerCommand',
+                buttonTemplateName: 'playClipButton'
+            });
+
+            buttonData.push({
+                id: 'toggleCineDialog',
+                title: 'CINE',
+                classes: 'imageViewerCommand',
+                iconClasses: 'fa fa-youtube-play',
+                disableFunction: OHIF.viewerbase.viewportUtils.hasMultipleFrames
+            });
+        }
 
         buttonData.push({
             id: 'layout',
@@ -90,71 +177,17 @@ Template.toolbarSection.helpers({
             buttonTemplateName: 'layoutButton'
         });
 
+        buttonData.push({
+            id: 'toggleMore',
+            title: 'More',
+            classes: 'rp-x-1 rm-l-3',
+            svgLink: 'packages/ohif_viewerbase/assets/icons.svg#icon-tools-more',
+            subTools: extraTools
+        });
+
         return buttonData;
     },
 
-    extraToolbarButtons() {
-        let buttonData = [];
-
-        buttonData.push({
-            id: 'stackScroll',
-            title: 'Stack Scroll',
-            classes: 'imageViewerTool',
-            iconClasses: 'fa fa-bars'
-        });
-
-        buttonData.push({
-            id: 'magnify',
-            title: 'Magnify',
-            classes: 'imageViewerTool toolbarSectionButton',
-            iconClasses: 'fa fa-circle'
-        });
-        
-        buttonData.push({
-            id: 'wwwcRegion',
-            title: 'ROI Window',
-            classes: 'imageViewerTool',
-            iconClasses: 'fa fa-square'
-        });
-
-        buttonData.push({
-            id: 'dragProbe',
-            title: 'Probe',
-            classes: 'imageViewerTool',
-            iconClasses: 'fa fa-dot-circle-o'
-        });
-
-        buttonData.push({
-            id: 'ellipticalRoi',
-            title: 'Ellipse',
-            classes: 'imageViewerTool',
-            iconClasses: 'fa fa-circle-o'
-        });
-
-        buttonData.push({
-            id: 'rectangleRoi',
-            title: 'Rectangle',
-            classes: 'imageViewerTool',
-            iconClasses: 'fa fa-square-o'
-        });
-
-        buttonData.push({
-            id: 'invert',
-            title: 'Invert',
-            classes: 'imageViewerCommand',
-            iconClasses: 'fa fa-adjust'
-        });
-
-        buttonData.push({
-            id: 'clearTools',
-            title: 'Clear',
-            classes: 'imageViewerCommand',
-            iconClasses: 'fa fa-trash'
-        });
-
-        return buttonData;   
-    },
-
     hangingProtocolButtons() {
         let buttonData = [];
 

StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.styl

@@ -4,7 +4,6 @@
   theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
   flex: 0 0 auto
   height: $toolbarHeight
-  overflow: hidden
   padding-top: 6px
   position: relative
   transition(height 300ms ease)