diff --git a/LesionTracker/client/components/toolbarSection/toolbarSection.js b/LesionTracker/client/components/toolbarSection/toolbarSection.js index 42b9dfdf5..b7a3b7f55 100644 --- a/LesionTracker/client/components/toolbarSection/toolbarSection.js +++ b/LesionTracker/client/components/toolbarSection/toolbarSection.js @@ -1,4 +1,5 @@ -import { OHIF } from 'meteor/ohif:core'; +import { Template } from 'meteor/templating'; +import { Session } from 'meteor/session'; Template.toolbarSection.helpers({ // Returns true if the view shall be split in two viewports @@ -50,6 +51,116 @@ Template.toolbarSection.helpers({ // Check if the measure tools shall be disabled const isToolDisabled = false; //!Template.instance().data.timepointApi; + const targetSubTools = []; + + targetSubTools.push({ + id: 'bidirectional', + title: 'Bidirectional', + classes: 'imageViewerTool rm-l-3', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-target', + disabled: isToolDisabled + }); + + // TODO: Get real icons for CR / UN / EX + targetSubTools.push({ + id: 'targetCR', + title: 'CR Target', + classes: 'imageViewerTool', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp', + disabled: isToolDisabled + }); + + targetSubTools.push({ + id: 'targetUN', + title: 'UN Target', + classes: 'imageViewerTool', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp', + disabled: isToolDisabled + }); + + // Disabling this on Lesion Tracker + // targetSubTools.push({ + // id: 'targetEX', + // title: 'EX Target', + // classes: 'imageViewerTool', + // svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp', + // disabled: isToolDisabled + // }); + + const extraTools = []; + + extraTools.push({ + id: 'stackScroll', + title: 'Stack Scroll', + classes: 'imageViewerTool', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll' + }); + + extraTools.push({ + id: 'resetViewport', + title: 'Reset', + classes: 'imageViewerCommand', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-reset' + }); + + extraTools.push({ + id: 'rotateR', + title: 'Rotate Right', + classes: 'imageViewerCommand', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-rotate-right' + }); + + extraTools.push({ + id: 'flipH', + title: 'Flip H', + classes: 'imageViewerCommand', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-horizontal' + }); + + extraTools.push({ + id: 'flipV', + title: 'Flip V', + classes: 'imageViewerCommand', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-vertical' + }); + + extraTools.push({ + id: 'invert', + title: 'Invert', + classes: 'imageViewerCommand', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-invert' + }); + + extraTools.push({ + id: 'magnify', + title: 'Magnify', + classes: 'imageViewerTool', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-magnify' + }); + + extraTools.push({ + id: 'ellipticalRoi', + title: 'Ellipse', + classes: 'imageViewerTool', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-elliptical-roi' + }); + + extraTools.push({ + id: 'linkStackScroll', + title: 'Link Scroll', + classes: 'imageViewerCommand nonAutoDisableState', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link-stack-scroll', + disableFunction: isStackScrollLinkingDisabled + }); + + extraTools.push({ + id: 'toggleCineDialog', + title: 'CINE', + classes: 'imageViewerCommand', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle', + disableFunction: hasMultipleFrames + }); + const buttonData = []; buttonData.push({ @@ -79,22 +190,23 @@ Template.toolbarSection.helpers({ buttonData.push({ id: 'link', title: 'Link', - classes: 'imageViewerCommand toolbarSectionButton', + classes: 'imageViewerCommand', svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link' });*/ buttonData.push({ - id: 'bidirectional', + id: 'toggleTarget', title: 'Target', - classes: 'imageViewerTool rm-l-3', + classes: 'rm-l-3', svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-target', - disabled: isToolDisabled + disabled: isToolDisabled, + subTools: targetSubTools }); buttonData.push({ id: 'nonTarget', title: 'Non-Target', - classes: 'imageViewerTool toolbarSectionButton', + classes: 'imageViewerTool', svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-non-target', disabled: isToolDisabled }); @@ -102,121 +214,31 @@ Template.toolbarSection.helpers({ buttonData.push({ id: 'length', title: 'Temp', - classes: 'imageViewerTool toolbarSectionButton', + classes: 'imageViewerTool', svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp' }); - return buttonData; - }, - - extraToolbarButtons() { - // Check if the measure tools shall be disabled - const isToolDisabled = !Template.instance().data.timepointApi.currentTimepointId; - const buttonData = []; - buttonData.push({ - id: 'stackScroll', - title: 'Stack Scroll', - classes: 'imageViewerTool toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll' + id: 'toggleMore', + title: 'More', + classes: 'rp-x-1 rm-l-3', + svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-more', + disabled: isToolDisabled, + subTools: extraTools }); - buttonData.push({ - id: 'resetViewport', - title: 'Reset', - classes: 'imageViewerCommand toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-reset' - }); - - buttonData.push({ - id: 'rotateR', - title: 'Rotate Right', - classes: 'imageViewerCommand toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-rotate-right' - }); - - buttonData.push({ - id: 'flipH', - title: 'Flip H', - classes: 'imageViewerCommand toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-horizontal' - }); - - buttonData.push({ - id: 'flipV', - title: 'Flip V', - classes: 'imageViewerCommand toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-vertical' - }); - - buttonData.push({ - id: 'invert', - title: 'Invert', - classes: 'imageViewerCommand toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-invert' - }); - - buttonData.push({ - id: 'magnify', - title: 'Magnify', - classes: 'imageViewerTool toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-magnify' - }); - - buttonData.push({ - id: 'ellipticalRoi', - title: 'Ellipse', - classes: 'imageViewerTool toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-elliptical-roi' - }); - - buttonData.push({ - id: 'linkStackScroll', - title: 'Link Scroll', - classes: 'imageViewerCommand toolbarSectionButton nonAutoDisableState', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link-stack-scroll', - disableFunction: isStackScrollLinkingDisabled - }); - - buttonData.push({ - id: 'toggleCineDialog', - title: 'CINE', - classes: 'imageViewerCommand toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle', - disableFunction: hasMultipleFrames - }); - - // TODO: Get real icons for CR / UN / EX - buttonData.push({ - id: 'targetCR', - title: 'CR Target', - classes: 'imageViewerTool toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp', - disabled: isToolDisabled - }); - - buttonData.push({ - id: 'targetUN', - title: 'UN Target', - classes: 'imageViewerTool toolbarSectionButton', - svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp', - disabled: isToolDisabled - }); - - // Disabling this on Lesion Tracker - // buttonData.push({ - // id: 'targetEX', - // title: 'EX Target', - // classes: 'imageViewerTool toolbarSectionButton', - // svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp', - // disabled: isToolDisabled - // }); - return buttonData; } }); Template.toolbarSection.events({ + 'click #toggleTarget'(event, instance) { + const $target = $(event.currentTarget); + if (!$target.hasClass('active') && $target.hasClass('expanded')) { + toolManager.setActiveTool('bidirectional'); + } + }, + 'click #toggleHUD'(event) { const $this = $(event.currentTarget); @@ -228,6 +250,7 @@ Template.toolbarSection.events({ const state = Session.get('measurementTableHudOpen'); Session.set('measurementTableHudOpen', !state); }, + 'click #toggleTrial'(event) { const $this = $(event.currentTarget); @@ -251,7 +274,7 @@ Template.toolbarSection.onRendered(function() { allToolbarButtons.push($('#toggleMeasurements')[0]); if (disabledToolButtons && disabledToolButtons.length > 0) { - for (var i = 0; i < allToolbarButtons.length; i++) { + for (let i = 0; i < allToolbarButtons.length; i++) { const toolbarButton = allToolbarButtons[i]; const index = disabledToolButtons.indexOf($(toolbarButton).attr('id')); if (index !== -1) { diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html index 46f12aca8..ea0989cd6 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html @@ -3,7 +3,7 @@ {{>UI.dynamic template=this.buttonTemplateName data=this}} {{else}}
{{#if this.svgLink}} @@ -15,8 +15,20 @@ {{/if}}
- {{this.title}} + {{this.title}} + {{#if this.subTools}} + + {{/if}}
+ {{#if this.subTools}} +
+
+ {{#each subTool in this.subTools}} + {{>toolbarSectionButton subTool}} + {{/each}} +
+
+ {{/if}}
{{/if}} diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js index f96a9aabc..ca8ff88f9 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js @@ -1,14 +1,20 @@ import { OHIF } from 'meteor/ohif:core'; import { Template } from 'meteor/templating'; import { Session } from 'meteor/session'; +import { _ } from 'meteor/underscore'; Template.toolbarSectionButton.helpers({ activeClass() { // TODO: Find a way to prevent the 'flash' after a click, but before this helper runs const instance = Template.instance(); + const subTools = instance.data.subTools; + const currentId = instance.data.id; + const activeId = Session.get('ToolManagerActiveTool'); + const isCurrentTool = currentId === activeId; + const isSubTool = subTools && _.findWhere(subTools, { id: activeId }); - // Check if the current tool is the active one - if (instance.data.id === Session.get('ToolManagerActiveTool')) { + // Check if the current tool or a sub tool is the active one + if (isCurrentTool || isSubTool) { // Return the active class return 'active'; } @@ -22,6 +28,9 @@ Template.toolbarSectionButton.helpers({ Template.toolbarSectionButton.events({ 'click .imageViewerTool'(event, instance) { + // Prevent the event from bubbling to parent tools + event.stopPropagation(); + // Stop here if the tool is disabled if ($(event.currentTarget).hasClass('disabled')) { return; diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl index e0e9aa6c0..f8c3d1933 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl @@ -1,12 +1,13 @@ @import "{design}/app" .toolbarSectionButton - display: inline-block theme('color', '$defaultColor') theme('fill', '$defaultColor') theme('stroke', '$defaultColor') - min-width: 30px cursor: pointer + display: inline-block + min-width: 30px + position: relative text-align: center &.disabled @@ -39,16 +40,16 @@ height: 21px &:hover - &>.buttonLabel, &>.svgContainer + &>.buttonLabel theme('color', '$hoverColor') - svg - theme('fill', '$hoverColor') - theme('stroke', '$hoverColor') - - i + &>i theme('color', '$hoverColor') + &>.svgContainer>svg + theme('fill', '$hoverColor') + theme('stroke', '$hoverColor') + &:active, &.active &>.buttonLabel, &>.svgContainer theme('color', '$activeColor') diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html index 801e8be01..77d17fe42 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html @@ -3,26 +3,5 @@ {{#each toolbarButton in toolbarButtons}} {{>toolbarSectionButton toolbarButton}} {{/each}} - - {{#if extraToolbarButtons}} -
-
- - - -
-
- More - -
-
-
- {{#each toolbarButton in extraToolbarButtons}} - {{>toolbarSectionButton toolbarButton}} - {{/each}} -
-
-
- {{/if}} diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js index 127f86178..b7dd1f6aa 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js +++ b/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); } }); diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl index 2732a9f35..1a5e4c570 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl +++ b/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))