TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started replacing toolbar in OHIF Viewer with that of Lesion Tracker (OHIF-49)

Browse Source
This commit is contained in:
Erik Ziegler committed 2016-07-22 18:23:36 +02:00
1 parent a59713957d
commit 59c851fa57
36 files changed
+1312 -239
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
+3 -27
View File
@@ -4,32 +4,8 @@
<div class="pull-left m-t-1">
{{>roundedButtonGroup leftSidebarToggleButtonData}}
</div>
<div class="toolbarSectionTools pull-left m-t-1 rm-l-3">
{{#each toolbarButton in toolbarButtons}}
{{>toolbarSectionButton toolbarButton}}
{{/each}}
<div id="moreTools" class="toolbarSectionButton rp-x-1 rm-l-3">
<div class="svgContainer">
<svg>
<use xlink:href="/packages/lesiontracker/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>
<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>
</div>
{{> toolbarSectionTools toolbarButtons=toolbarButtons extraToolbarButtons=extraToolbarButtons}}
{{#if splitView}}
{{>studySeriesQuickSwitch (clone this side="right" viewportIndex=1)}}
@@ -47,7 +23,7 @@
<div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3 {{#if session 'lesionTableHudOpen'}}active{{/if}}">
<div class="svgContainer">
<svg>
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
<use xlink:href="/packages/viewerbase/assets/icons.svg#icon-hud"></use>
</svg>
</div>
<div class="buttonLabel">HUD</div>
@@ -55,7 +31,7 @@
<div class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-1" data-toggle="modal" data-target="#optionsModal">
<div class="svgContainer">
<svg>
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>
<use xlink:href="/packages/viewerbase/assets/icons.svg#icon-trial-info"></use>
</svg>
</div>
<div class="buttonLabel">Trial</div>
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
+13 -25
View File
@@ -22,7 +22,7 @@ Template.toolbarSection.helpers({
value: instance.data.state,
options: [{
value: 'studies',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-studies',
svgLink: '/packages/viewerbase/assets/icons.svg#icon-studies',
svgWidth: 15,
svgHeight: 13,
bottomLabel: 'Studies'
@@ -38,13 +38,13 @@ Template.toolbarSection.helpers({
value: instance.data.state,
options: [{
value: 'lesions',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-measurements-lesions',
svgLink: '/packages/viewerbase/assets/icons.svg#icon-measurements-lesions',
svgWidth: 18,
svgHeight: 10,
bottomLabel: 'Lesions'
}, {
value: 'additional',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-measurements-additional',
svgLink: '/packages/viewerbase/assets/icons.svg#icon-measurements-additional',
svgWidth: 14,
svgHeight: 13,
bottomLabel: 'Additional'
@@ -58,49 +58,49 @@ Template.toolbarSection.helpers({
id: 'zoom',
title: 'Zoom',
classes: 'imageViewerTool',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-zoom'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-zoom'
});
buttonData.push({
id: 'wwwc',
title: 'Levels',
classes: 'imageViewerTool',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-levels'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-levels'
});
buttonData.push({
id: 'pan',
title: 'Pan',
classes: 'imageViewerTool',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-pan'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-pan'
});
buttonData.push({
id: 'link',
title: 'Link',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-link'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-link'
});
buttonData.push({
id: 'bidirectional',
title: 'Target',
classes: 'imageViewerTool rm-l-3',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-target'
});
buttonData.push({
id: 'nonTarget',
title: 'Non-Target',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-non-target'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-non-target'
});
buttonData.push({
id: 'length',
title: 'Temp',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
});
return buttonData;
@@ -114,21 +114,21 @@ Template.toolbarSection.helpers({
id: 'crTool',
title: 'CR Tool',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
});
buttonData.push({
id: 'unTool',
title: 'UN Tool',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
});
buttonData.push({
id: 'exTool',
title: 'EX Tool',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
});
return buttonData;
@@ -140,23 +140,11 @@ Template.toolbarSection.events({
'click #toggleHUD'(event, instance) {
const state = Session.get('lesionTableHudOpen');
Session.set('lesionTableHudOpen', !state);
},
'click #moreTools'(event, instance) {
const $target = $(event.currentTarget);
const isActive = $target.hasClass('active');
$target.toggleClass('active', !isActive);
$target.closest('.toolbarSection').toggleClass('expanded', !isActive);
}
});
Template.toolbarSection.onRendered(function() {
const instance = Template.instance();
const tooltipButtons = instance.$('[data-toggle="tooltip"]');
tooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
// Enable tooltips for the layout button
const extraTooltipButtons = instance.$('[rel="tooltip"]');
extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
// Set disabled/enabled tool buttons that are set in toolManager
const states = toolManager.getToolDefaultStates();
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
+1 -79
View File
@@ -13,84 +13,6 @@
&.expanded
height: $toolbarHeight + $toolbarDrawerHeight
.toolbarSectionTools
position: relative
.toolbarSectionDrawerContainer
bottom: - ($toolbarDrawerHeight + 12px)
height: $toolbarDrawerHeight
left: 0
position: absolute
width: 100%
.toolbarSectionDrawer
background-color: $uiGrayDarker
border-radius: 7px
color: $textPrimaryColor
content: ''
display: block
font-size: 18px
height: $toolbarDrawerHeight - 12px
line-height: $toolbarDrawerHeight - 12px
text-align: center
width: 100%
#moreTools
.buttonLabel i
text-align: center
transition(all 300ms ease)
width: 8px
&.active .buttonLabel i
transform(rotateX(180deg))
.toolbarSectionButton
display: inline-block
color: $defaultColor
fill: $defaultColor
stroke: $defaultColor
min-width: 30px
cursor: pointer
text-align: center
&.disabled
opacity: 0.5
cursor: not-allowed
.buttonLabel
color: $textSecondaryColor
font-size: 12px
.svgContainer
margin: 0 auto
text-align: center
svg
background-color: transparent
margin: 2px
width: 21px
height: 21px
&:hover
.buttonLabel
color: $hoverColor
svg
fill: $hoverColor
stroke: $hoverColor
&:active, &.active
.buttonLabel
color: $activeColor
svg
fill: $activeColor
stroke: $activeColor
.toolbarSectionEntry
color: $defaultColor
cursor: pointer
@@ -99,4 +21,4 @@
margin-top: 3px
min-width: 30px
stroke: $defaultColor
text-align: center
text-align: center