diff --git a/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.html b/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.html index fea91bd88..616e03650 100644 --- a/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.html +++ b/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.html @@ -5,8 +5,7 @@ {{>roundedButtonGroup leftSidebarToggleButtonData}} {{> toolbarSectionTools - toolbarButtons=toolbarButtons - extraToolbarButtons=extraToolbarButtons}} + toolbarButtons=toolbarButtons}} diff --git a/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.js b/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.js index 312d997f7..caff47fdb 100644 --- a/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.js +++ b/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({ - id: 'toggleCinePlay', - title: 'Toggle CINE Play', - classes: 'imageViewerCommand', - buttonTemplateName: 'playClipButton' - }); + if (!OHIF.uiSettings.displayEchoUltrasoundWorkflow) { - buttonData.push({ - id: 'toggleCineDialog', - title: 'CINE', - classes: 'imageViewerCommand', - iconClasses: 'fa fa-youtube-play' - }); + buttonData.push({ + id: 'previousDisplaySet', + title: 'Previous', + classes: 'imageViewerCommand', + 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 = []; diff --git a/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.styl b/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.styl index a2bf0c37b..36672029c 100644 --- a/StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.styl +++ b/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)