From 7fca7e312955928518946c35444648ad6255d3b6 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Wed, 8 Jun 2016 12:27:22 +0200 Subject: [PATCH] Added rudimentary HUD --- .../components/lesionTable/lesionTable.html | 17 +--- .../components/lesionTable/lesionTable.js | 30 ------- .../components/lesionTable/lesionTable.styl | 8 +- .../lesionTableHUD/lesionTableHUD.html | 13 +++ .../lesionTableHUD/lesionTableHUD.js | 33 +++++++ .../lesionTableHUD/lesionTableHUD.styl | 86 +++++++++++++++++++ .../lesionTableHeaderRow.styl | 4 +- .../lesionTableView/lesionTableView.html | 18 ++++ .../lesionTableView/lesionTableView.js | 32 +++++++ .../lesionTableView/lesionTableView.styl | 13 +++ .../lesionTracker/lesionTracker.html | 3 +- .../components/lesionTracker/lesionTracker.js | 3 + .../toolbarSection/toolbarSection.html | 2 +- .../toolbarSection/toolbarSection.js | 4 + Packages/lesiontracker/package.js | 8 ++ Packages/viewerbase/package.js | 1 + 16 files changed, 218 insertions(+), 57 deletions(-) create mode 100644 Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html create mode 100644 Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js create mode 100644 Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl create mode 100644 Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html create mode 100644 Packages/lesiontracker/client/components/lesionTableView/lesionTableView.js create mode 100644 Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html index d2b5c4e7d..65f90a9a1 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html +++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html @@ -10,21 +10,6 @@ {{ >lesionTableTimepointHeader }} {{ /each }} -
- {{ >lesionTableHeaderRow id="target" type="Targets" measurements=targets}} - {{ #each targets }} - {{ >lesionTableRow }} - {{ /each }} - - {{ >lesionTableHeaderRow id="nonTarget" type="Non-targets" measurements=nonTargets}} - {{ #each nonTargets }} - {{ >lesionTableRow }} - {{ /each }} - - {{ >lesionTableHeaderRow id="newLesions" type="New lesions" measurements=newLesions}} - {{ #each nonTargets }} - {{ >lesionTableRow }} - {{ /each }} -
+ {{ >lesionTableView }} \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.js b/Packages/lesiontracker/client/components/lesionTable/lesionTable.js index afffe1c18..337517c83 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.js +++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.js @@ -1,34 +1,4 @@ Template.lesionTable.helpers({ - targets: function() { - // All Targets shall be listed first followed by Non-Targets - return Measurements.find({ - isTarget: true - }, { - sort: { - lesionNumberAbsolute: 1 - } - }); - }, - nonTargets: function() { - // All Targets shall be listed first followed by Non-Targets - return Measurements.find({ - isTarget: false - }, { - sort: { - lesionNumberAbsolute: 1 - } - }); - }, - newLesions: function() { - // All Targets shall be listed first followed by Non-Targets - return Measurements.find({ - saved: false - }, { - sort: { - lesionNumberAbsolute: 1 - } - }); - }, timepoints: function() { return Timepoints.find({}, { sort: { diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl index 883ce3f65..11cf03130 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl +++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl @@ -2,15 +2,9 @@ #lesionTableContainer width: 100% - height: 16% + height: calc(100% - 105px) background-color: #000000 - #lesionTableWrapper - position: relative - width: 100% - height: 100% - margin: 0 auto - .lesionTableTimepointHeaderRow display: flex diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html new file mode 100644 index 000000000..5a0970d39 --- /dev/null +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js new file mode 100644 index 000000000..b3e2ac438 --- /dev/null +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js @@ -0,0 +1,33 @@ +Template.lesionTableHUD.helpers({ + toolbarButtons() { + var buttonData = []; + + buttonData.push({ + id: 'bidirectional', + title: 'Target', + classes: 'imageViewerTool', + svgLink: '/packages/lesiontracker/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' + }); + + buttonData.push({ + id: 'length', + title: 'Temp', + classes: 'imageViewerTool toolbarSectionButton', + svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp' + }); + + return buttonData; + } +}); + +Template.lesionTableHUD.onRendered(function() { + var dialog = $('#lesionTableHUD'); + dialog.draggable(); +}); \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl new file mode 100644 index 000000000..9ea5773c2 --- /dev/null +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl @@ -0,0 +1,86 @@ +@import "{design}/app" + +$borderColor = rgba(77, 99, 110, 0.81) +$backgroundColor = #14191e + +#lesionTableHUD + display: none + position: absolute + top: auto + left: auto + bottom: 3px + right: 3px + + z-index: 10000 + width: 318px + height: 326px + opacity: 0.95 + background: black + border-radius: 8px + border: solid 1px $borderColor; + + .header + width: 100% + height: 55px + line-height: 55px + background: $backgroundColor + border-bottom: $uiBorderThickness solid $borderColor + text-align: center + font-weight: 200 + font-size: 20px + color: $textSecondaryColor + + .lesionTableView.scrollArea + height: calc(100% - 55px - 70px) + padding-bottom: 20px + + .footer + width: 100% + height: 70px + position: absolute + bottom: 0 + background: $backgroundColor + border-top: $uiBorderThickness solid $borderColor + padding: 10px + + .toolbarSectionButton + display: inline-block + color: $defaultColor + fill: $defaultColor + stroke: $defaultColor + padding: 0 10px + height: $toolbarHeight + min-width: 30px + cursor: pointer + text-align: center + + &.disabled + opacity: 0.5 + cursor: not-allowed + + .buttonLabel + font-size: 12px + + .svgContainer + margin: 0 auto + text-align: center + + svg + background-color: transparent + margin: 2px + width: 21px + height: 21px + + &:active, &.active + color: $activeColor + + svg + fill: $activeColor + stroke: $activeColor + + &:hover + color: $hoverColor + + svg + fill: $hoverColor + stroke: $hoverColor diff --git a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl index 35a30fc40..7c8288d7a 100644 --- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl @@ -7,7 +7,7 @@ $headerRowHeight = 63px background: #151a1f color: $textSecondaryColor fill: $textSecondaryColor - width: 100% + width: 316px height: $headerRowHeight display: flex line-height: $headerRowHeight @@ -40,7 +40,7 @@ $headerRowHeight = 63px color: #6fbde2 font-weight: 100 font-size: 40px - max-width: 30px + max-width: 50px margin-right: 5px height: $headerRowHeight line-height: $headerRowHeight diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html new file mode 100644 index 000000000..1f2213d15 --- /dev/null +++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.js b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.js new file mode 100644 index 000000000..8e1a5cae1 --- /dev/null +++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.js @@ -0,0 +1,32 @@ +Template.lesionTableView.helpers({ + targets: function () { + // All Targets shall be listed first followed by Non-Targets + return Measurements.find({ + isTarget: true + }, { + sort: { + lesionNumberAbsolute: 1 + } + }); + }, + nonTargets: function () { + // All Targets shall be listed first followed by Non-Targets + return Measurements.find({ + isTarget: false + }, { + sort: { + lesionNumberAbsolute: 1 + } + }); + }, + newLesions: function () { + // All Targets shall be listed first followed by Non-Targets + return Measurements.find({ + saved: false + }, { + sort: { + lesionNumberAbsolute: 1 + } + }); + } +}); \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl new file mode 100644 index 000000000..62882c541 --- /dev/null +++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl @@ -0,0 +1,13 @@ +.lesionTableView.scrollArea + width: 100% + height: 100% + overflow-x: hidden + overflow-y: auto + margin-right: -16px + padding-bottom: 100px + padding-right: 16px + + -webkit-overflow-scrolling: touch + + &::-webkit-scrollbar + display: none \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html index 05b460a2f..5469e7772 100644 --- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html +++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html @@ -15,7 +15,7 @@ {{>userAccountMenu}} - {{>timeoutCountdownDialog}} + {{ >timeoutCountdownDialog }}
@@ -32,4 +32,5 @@ {{ >lastLoginModal }} {{ >studyContextMenu }} {{ >progressDialog}} + {{ >lesionTableHUD }} \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js index d2153f7c8..b4ed7e43a 100644 --- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js +++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js @@ -49,6 +49,9 @@ Template.lesionTracker.events({ switchToTab(contentId); }, 'click #loadStudyList': function() { + // TODO: Make some set of 'closing study' callbacks + $('#lesionTableHUD').display('none'); + switchToTab('worklistTab'); } }); diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html index 244aa320b..cc85feafb 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html @@ -55,7 +55,7 @@
-
+
diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js index fbd1baa12..609b08a11 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js @@ -105,6 +105,10 @@ Template.toolbarSection.events({ var activeViewport = Session.get('activeViewport'); var element = $('.imageViewerViewport').get(activeViewport); OHIF.viewer.functionList[command](element); + }, + 'click #toggleHUD': function(e) { + var lesionTableHUD = document.getElementById('lesionTableHUD'); + toggleDialog(lesionTableHUD); } }); diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js index fd93d150a..cade8afce 100644 --- a/Packages/lesiontracker/package.js +++ b/Packages/lesiontracker/package.js @@ -125,10 +125,18 @@ Package.onUse(function(api) { api.addFiles('client/components/lesionLocationDialog/lesionLocationDialog.js', 'client'); api.addFiles('client/components/lesionLocationDialog/lesionLocationDialog.styl', 'client'); + api.addFiles('client/components/lesionTableView/lesionTableView.html', 'client'); + api.addFiles('client/components/lesionTableView/lesionTableView.styl', 'client'); + api.addFiles('client/components/lesionTableView/lesionTableView.js', 'client'); + api.addFiles('client/components/lesionTable/lesionTable.html', 'client'); api.addFiles('client/components/lesionTable/lesionTable.styl', 'client'); api.addFiles('client/components/lesionTable/lesionTable.js', 'client'); + api.addFiles('client/components/lesionTableHUD/lesionTableHUD.html', 'client'); + api.addFiles('client/components/lesionTableHUD/lesionTableHUD.styl', 'client'); + api.addFiles('client/components/lesionTableHUD/lesionTableHUD.js', 'client'); + api.addFiles('client/components/lesionTableRow/lesionTableRow.html', 'client'); api.addFiles('client/components/lesionTableRow/lesionTableRow.styl', 'client'); api.addFiles('client/components/lesionTableRow/lesionTableRow.js', 'client'); diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js index d319134a3..3ddaee345 100644 --- a/Packages/viewerbase/package.js +++ b/Packages/viewerbase/package.js @@ -156,6 +156,7 @@ Package.onUse(function(api) { api.export('getInstanceClassDefaultViewport', 'client'); api.export('showConfirmDialog', 'client'); api.export('applyWLPreset', 'client'); + api.export('toggleDialog', 'client'); // Export the ValidateJS Library with our added validators //api.export('validate', 'client');