diff --git a/LesionTracker/client/components/toolbarSection/toolbarSection.js b/LesionTracker/client/components/toolbarSection/toolbarSection.js index 7c0d80dac..42b9dfdf5 100644 --- a/LesionTracker/client/components/toolbarSection/toolbarSection.js +++ b/LesionTracker/client/components/toolbarSection/toolbarSection.js @@ -203,13 +203,14 @@ Template.toolbarSection.helpers({ disabled: isToolDisabled }); - buttonData.push({ - id: 'targetEX', - title: 'EX 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; } diff --git a/LesionTracker/client/components/toolbarSection/toolbarSection.styl b/LesionTracker/client/components/toolbarSection/toolbarSection.styl index f093294e2..1c58610e2 100644 --- a/LesionTracker/client/components/toolbarSection/toolbarSection.styl +++ b/LesionTracker/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) diff --git a/Packages/ohif-hanging-protocols/client/components/stageDetails/stageDetails.styl b/Packages/ohif-hanging-protocols/client/components/stageDetails/stageDetails.styl index ea8dc373e..5031c0d43 100644 --- a/Packages/ohif-hanging-protocols/client/components/stageDetails/stageDetails.styl +++ b/Packages/ohif-hanging-protocols/client/components/stageDetails/stageDetails.styl @@ -21,7 +21,7 @@ width: 25% input - theme('background-color', '$boxBackgroundColor')Dark + theme('background-color', '$boxBackgroundColor') min-width: 50px width: 40% border: none diff --git a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index ee27e2d92..522df8919 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -121,7 +121,7 @@ $seriesSpacing = 2px width: $switchSize + $seriesSpacing .seriesItem - theme('background-color', '$boxBackgroundColor')Dark + theme('background-color', '$boxBackgroundColor') border-radius: 3px height: 15px margin: $seriesSpacing @@ -164,10 +164,10 @@ $seriesSpacing = 2px overflow-x: hidden overflow-y: scroll width: calc(100% + 22px) - + &.is-mac padding-right: 22px - + &.show-scroll-indicator-up:before &.show-scroll-indicator-down:after font-family: FontAwesome @@ -180,11 +180,11 @@ $seriesSpacing = 2px z-index: 1 text-align: center left: 0 - + &.show-scroll-indicator-up:before top: -10px content: '\f102' - + &.show-scroll-indicator-down:after bottom: 18px content: '\f103' diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js index 786a84eda..f96a9aabc 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js @@ -1,4 +1,6 @@ import { OHIF } from 'meteor/ohif:core'; +import { Template } from 'meteor/templating'; +import { Session } from 'meteor/session'; Template.toolbarSectionButton.helpers({ activeClass() { @@ -11,9 +13,10 @@ Template.toolbarSectionButton.helpers({ return 'active'; } }, + disableButton() { const instance = Template.instance(); - return this.disableFunction && this.disableFunction(); + return instance.disableFunction && instance.disableFunction(); } }); @@ -37,7 +40,11 @@ Template.toolbarSectionButton.events({ toolManager.setActiveTool(tool, elements); } }, + 'click .imageViewerCommand'(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 1dfd741e4..e0e9aa6c0 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl @@ -10,13 +10,13 @@ text-align: center &.disabled - opacity: 0.5 - cursor: not-allowed - - &:hover - i, - .buttonLabel - theme('color', '$textSecondaryColor') + &>.buttonLabel, &>.svgContainer + opacity: 0.5 + cursor: not-allowed + + &:hover + &, i + theme('color', '$textSecondaryColor') .buttonLabel theme('color', '$textSecondaryColor') @@ -26,7 +26,7 @@ .svgContainer margin: 0 auto text-align: center - + i theme('color', '$textSecondaryColor') font-size: 18px @@ -39,23 +39,23 @@ height: 21px &:hover - .buttonLabel + &>.buttonLabel, &>.svgContainer theme('color', '$hoverColor') - svg - theme('fill', '$hoverColor') - theme('stroke', '$hoverColor') - - i - theme('color', '$hoverColor') + svg + theme('fill', '$hoverColor') + theme('stroke', '$hoverColor') + + i + theme('color', '$hoverColor') &:active, &.active - .buttonLabel + &>.buttonLabel, &>.svgContainer theme('color', '$activeColor') - svg - theme('fill', '$activeColor') - theme('stroke', '$activeColor') - - i - theme('color', '$activeColor') \ No newline at end of file + svg + theme('fill', '$activeColor') + theme('stroke', '$activeColor') + + i + 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 8ac50878f..801e8be01 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html @@ -4,27 +4,25 @@ {{>toolbarSectionButton toolbarButton}} {{/each}} - {{ #if extraToolbarButtons}} -
-
- - - + {{#if extraToolbarButtons}} +
+
+ + + +
+
+ More + +
+
+
+ {{#each toolbarButton in extraToolbarButtons}} + {{>toolbarSectionButton toolbarButton}} + {{/each}} +
+
-
- More - -
-
- -
- -
- {{#each toolbarButton in extraToolbarButtons}} - {{>toolbarSectionButton toolbarButton}} - {{/each}} -
-
- {{ /if }} + {{/if}}
- \ No newline at end of file + diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js index 57864380a..127f86178 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js @@ -1,8 +1,9 @@ +import { Template } from 'meteor/templating'; + 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); } }); diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl index f9cfd6868..2732a9f35 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl @@ -1,30 +1,43 @@ @import "{design}/app" -$distance = 12px +$distance = 10px .toolbarSectionTools position: relative + .toolbarSectionButton.active>.toolbarSectionDrawerContainer + opacity: 1 + transform(translateX(-50%) translateY(0) scale(1)) + .toolbarSectionDrawerContainer - bottom: - ($toolbarDrawerHeight + $distance) + bottom: - $toolbarDrawerHeight height: $toolbarDrawerHeight - left: 0 + left: 50% min-width: 100% + opacity: 0 + padding-top: $distance position: absolute + transition(opacity 0.3s ease\, transform 0.3s ease) + transform(translateX(-50%) translateY( - ($toolbarDrawerHeight + $distance)) scale(0)) white-space: nowrap + z-index: 1 .toolbarSectionDrawer - theme('background-color', '$uiGrayDarker') + theme('background', '$uiGrayDarkest', 0.95) + theme('border', '2px solid $uiBorderColor', 0.95) border-radius: 7px theme('color', '$textPrimaryColor') content: '' display: block font-size: 18px - height: $toolbarDrawerHeight - $distance + height: $toolbarDrawerHeight + padding-top: 6px text-align: center width: 100% #moreTools + position: relative + .buttonLabel i text-align: center transition(all 300ms ease)