LT-115: Changing the 'more tools' layout and behavior
This commit is contained in:
Bruno Alves de Faria
parent
6be83653f8
commit
55ca29e0cf
@ -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;
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
width: 25%
|
||||
|
||||
input
|
||||
theme('background-color', '$boxBackgroundColor')Dark
|
||||
theme('background-color', '$boxBackgroundColor')
|
||||
min-width: 50px
|
||||
width: 40%
|
||||
border: none
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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')
|
||||
svg
|
||||
theme('fill', '$activeColor')
|
||||
theme('stroke', '$activeColor')
|
||||
|
||||
i
|
||||
theme('color', '$activeColor')
|
||||
|
||||
@ -4,27 +4,25 @@
|
||||
{{>toolbarSectionButton toolbarButton}}
|
||||
{{/each}}
|
||||
|
||||
{{ #if extraToolbarButtons}}
|
||||
<div id="moreTools" class="js-open-more-tools toolbarSectionButton rp-x-1 rm-l-3">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-tools-more"></use>
|
||||
</svg>
|
||||
{{#if extraToolbarButtons}}
|
||||
<div id="moreTools" class="js-open-more-tools toolbarSectionButton rp-x-1 rm-l-3">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-tools-more"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonLabel">
|
||||
<span>More</span>
|
||||
<i class="fa fa-caret-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="toolbarSectionDrawerContainer">
|
||||
<div class="toolbarSectionDrawer">
|
||||
{{#each toolbarButton in extraToolbarButtons}}
|
||||
{{>toolbarSectionButton toolbarButton}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonLabel">
|
||||
<span>More</span>
|
||||
<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">
|
||||
{{#each toolbarButton in extraToolbarButtons}}
|
||||
{{>toolbarSectionButton toolbarButton}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{ /if }}
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user