Started replacing toolbar in OHIF Viewer with that of Lesion Tracker (OHIF-49)
This commit is contained in:
Erik Ziegler committed
1 parent
a59713957d
commit
59c851fa57
36 files changed
+1312
-239
No files matched your search
@@ -32,7 +32,7 @@
|
||||
<div class="entrySection buttonSection">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-screen-capture"></use>
|
||||
<use xlink:href="/packages/viewerbase/assets/icons.svg#icon-create-screen-capture"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonLabel noselect">Add new screen capture</div>
|
||||
@@ -43,7 +43,7 @@
|
||||
<div class="entrySection buttonSection">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-comment"></use>
|
||||
<use xlink:href="/packages/viewerbase/assets/icons.svg#icon-create-comment"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonLabel noselect">Add a comment</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="header">
|
||||
<span>Measurements</span>
|
||||
<svg class="buttonClose">
|
||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-ui-close"></use>
|
||||
<use xlink:href="/packages/viewerbase/assets/icons.svg#icon-ui-close"></use>
|
||||
</svg>
|
||||
</div>
|
||||
{{>lesionTableView (clone this)}}
|
||||
|
||||
@@ -26,21 +26,21 @@ Template.lesionTableHUD.helpers({
|
||||
id: 'bidirectional',
|
||||
title: 'Target',
|
||||
classes: 'imageViewerTool',
|
||||
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;
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<div class="lesionTableHeaderRow">
|
||||
<div class="add js-setTool">
|
||||
<svg>
|
||||
<use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-add></use>
|
||||
<use xlink:href=/packages/viewerbase/assets/icons.svg#icon-ui-add></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="type">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{{#unless rowItem.location}}
|
||||
<div class="warning-icon">
|
||||
<svg>
|
||||
<use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-warning></use>
|
||||
<use xlink:href=/packages/viewerbase/assets/icons.svg#icon-ui-warning></use>
|
||||
</svg>
|
||||
</div>
|
||||
{{/unless}}
|
||||
@@ -34,13 +34,13 @@
|
||||
<div class="rowOptions">
|
||||
<div class="rowAction js-rename pull-left m-r-2" tabindex="1">
|
||||
<svg class="edit-icon">
|
||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-additional"></use>
|
||||
<use xlink:href="/packages/viewerbase/assets/icons.svg#icon-measurements-additional"></use>
|
||||
</svg>
|
||||
Rename
|
||||
</div>
|
||||
<div class="rowAction js-delete pull-left" tabindex="1">
|
||||
<svg class="close-icon">
|
||||
<use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-close></use>
|
||||
<use xlink:href=/packages/viewerbase/assets/icons.svg#icon-ui-close></use>
|
||||
</svg>
|
||||
Delete
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,6 @@ img.logoImage
|
||||
text-decoration: none
|
||||
|
||||
img.logoImage
|
||||
max-height: 50px
|
||||
margin: 0 5px
|
||||
|
||||
.logoText
|
||||
|
||||
@@ -29,12 +29,12 @@
|
||||
<div class="progressText">
|
||||
{{#if isLocked}}
|
||||
<svg class="locked">
|
||||
<use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-lock></use>
|
||||
<use xlink:href=/packages/viewerbase/assets/icons.svg#icon-status-lock></use>
|
||||
</svg>
|
||||
{{else}}
|
||||
{{#if progressComplete}}
|
||||
<svg class="complete">
|
||||
<use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-status-complete></use>
|
||||
<use xlink:href=/packages/viewerbase/assets/icons.svg#icon-status-complete></use>
|
||||
</svg>
|
||||
{{else}}
|
||||
{{progressText}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
<template name="toolbarSectionButton">
|
||||
<div id="{{this.id}}" class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}}" title="{{this.title}}">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href={{this.svgLink}}></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="buttonLabel">
|
||||
{{this.title}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
|
||||
Template.toolbarSectionButton.helpers({
|
||||
activeClass() {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Check if the current tool is the active one
|
||||
if (instance.data.id === Session.get('ToolManagerActiveTool')) {
|
||||
// Return the active class
|
||||
return 'active';
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
Template.toolbarSectionButton.events({
|
||||
'click .imageViewerTool'(event, instance) {
|
||||
$(event.currentTarget).tooltip('hide');
|
||||
|
||||
var tool = event.currentTarget.id;
|
||||
|
||||
var elements = $('.imageViewerViewport');
|
||||
|
||||
var activeTool = toolManager.getActiveTool();
|
||||
if (tool === activeTool) {
|
||||
var defaultTool = toolManager.getDefaultTool();
|
||||
console.log('Setting active tool to: ' + defaultTool);
|
||||
toolManager.setActiveTool(defaultTool, elements);
|
||||
} else {
|
||||
console.log('Setting active tool to: ' + tool);
|
||||
toolManager.setActiveTool(tool, elements);
|
||||
}
|
||||
},
|
||||
'click .imageViewerCommand'(event, instance) {
|
||||
$(event.currentTarget).tooltip('hide');
|
||||
|
||||
var command = event.currentTarget.id;
|
||||
if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var activeViewport = Session.get('activeViewport');
|
||||
var element = $('.imageViewerViewport').get(activeViewport);
|
||||
OHIF.viewer.functionList[command](element);
|
||||
}
|
||||
});
|
||||
Whitespace-only changes.
Reference in new issue
Block a user