diff --git a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl index 6790138a5..b65fe9dfc 100644 --- a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl +++ b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl @@ -17,7 +17,7 @@ $textColorActive = #2D2D2D .roundedButton align-items: center - background-color: $uiGrayDarker + background-color: $uiGrayDark border: 1px $uiBorderColorDark solid color: $textSecondaryColor display: flex @@ -56,7 +56,7 @@ $textColorActive = #2D2D2D &:hover .roundedButton background-color: $boxBackgroundColor - color: $uiGrayDarker + color: $uiGrayDark &.active .roundedButton background-color: $activeColor @@ -66,5 +66,5 @@ $textColorActive = #2D2D2D &:hover .roundedButton &.active .roundedButton svg - fill: $uiGrayDarker - stroke: $uiGrayDarker + fill: $uiGrayDark + stroke: $uiGrayDark diff --git a/Packages/design/styles/variables.styl b/Packages/design/styles/variables.styl index a26c4b660..9f940b855 100644 --- a/Packages/design/styles/variables.styl +++ b/Packages/design/styles/variables.styl @@ -1,9 +1,11 @@ // Common pallete $uiYellow = #E29E4A $uiSkyBlue = #6FBDE2 -$uiGrayDark = #263340 -$uiGrayDarker = #16202B -$uiGrayDarkest = #151A1F + +$uiGray = #263340 +$uiGrayDark = #16202B +$uiGrayDarker = #151A1F +$uiGrayDarkest = #14191E // Interface UI Colors $defaultColor = #94A8B3 diff --git a/Packages/lesiontracker/assets/icons.svg b/Packages/lesiontracker/assets/icons.svg index aa48b5b0a..c6c3eff83 100644 --- a/Packages/lesiontracker/assets/icons.svg +++ b/Packages/lesiontracker/assets/icons.svg @@ -1,183 +1,185 @@ - - - - HUD - - - - - - - - - - - Additional Measurements - - - - - - - - Lesions - - - - - - - - Settings - - - - - - Complete - - - - - - Locked - - - - - - Studies - - - - - - - - Window / Level - - - - - - - - - Link - - - - - - - - - Non-Target Measurement - - - - - - - - - - Target Measurement - - - - - - - - - Temporary Measurement - - - - - - - - - - More - - - - - - - - Pan - - - - - - - - - - - - - Zoom - - - - - - - - - Trial Information - - - - - - - - Expand - - - - - - Add - - - - - - Close - - - - - - Comment - - - - - - - Capture Screen - - - - - - - - - - Warning - - - - - - + + + + HUD + + + + + + + + + + + Additional Measurements + + + + + + + + Lesions + + + + + + + + Settings + + + + + + Complete + + + + + + Locked + + + + + + Studies + + + + + + + + Window / Level + + + + + + + + + Link + + + + + + + + + Non-Target Measurement + + + + + + + + + + Target Measurement + + + + + + + + + Temporary Measurement + + + + + + + + + + More + + + + + + + + Pan + + + + + + + + + + + + + Zoom + + + + + + + + + Trial Information + + + + + + + + Expand + + + + + + Add + + + + + + Close + + + + + + + + Comment + + + + + + + Capture Screen + + + + + + + + + + Warning + + + + + + diff --git a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl index 7e0283ba8..df92c7dd4 100644 --- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl +++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl @@ -29,7 +29,7 @@ font-size: 14px padding: 0 10px color: $textPrimaryColor - background-color: $uiGrayDarker + background-color: $uiGrayDark .form-group padding: 10px diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html index 5a0970d39..f6cb692c6 100644 --- a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html @@ -1,13 +1,16 @@ \ No newline at end of file + diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js index b3e2ac438..514f4250c 100644 --- a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js @@ -1,4 +1,18 @@ +Template.lesionTableHUD.onRendered(() => { + const instance = Template.instance(); + instance.$('#lesionTableHUD').resizable().draggable(); +}); + +Template.lesionTableHUD.events({ + 'click .buttonClose'(event, instance) { + Session.set('lesionTableHudOpen', false); + } +}); + Template.lesionTableHUD.helpers({ + hudHidden() { + return Session.get('lesionTableHudOpen') ? '' : 'hidden'; + }, toolbarButtons() { var buttonData = []; @@ -26,8 +40,3 @@ Template.lesionTableHUD.helpers({ 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 index 9ea5773c2..08c47f4f5 100644 --- a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl +++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl @@ -1,34 +1,47 @@ @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; + bottom: 3px + height: 326px + left: auto + opacity: 0.95 + overflow: hidden + position: absolute + right: 3px + top: auto + width: 318px + z-index: 10000 + + .lesionTableView.scrollArea + margin-left: 0 + padding-left: 0 .header - width: 100% + background: $uiGrayDarkest + border-bottom: $uiBorderThickness solid $borderColor + color: $textSecondaryColor + font-weight: 300 + font-size: 20px height: 55px line-height: 55px - background: $backgroundColor - border-bottom: $uiBorderThickness solid $borderColor + position: relative text-align: center - font-weight: 200 - font-size: 20px - color: $textSecondaryColor + width: 100% + + svg.buttonClose + color: $defaultColor + cursor: pointer + height: 14px + position: absolute + right: 14px + stroke: $defaultColor + top: 20px + width: 14px .lesionTableView.scrollArea height: calc(100% - 55px - 70px) @@ -39,7 +52,7 @@ $backgroundColor = #14191e height: 70px position: absolute bottom: 0 - background: $backgroundColor + background: $uiGrayDarkest border-top: $uiBorderThickness solid $borderColor padding: 10px diff --git a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl index 39362c9d6..ea6c00e9e 100644 --- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl @@ -3,7 +3,7 @@ $headerRowHeight = 63px .lesionTableHeaderRow - background-color: $uiGrayDarkest + background-color: $uiGrayDarker color: $textSecondaryColor display: flex fill: $textSecondaryColor diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl index 101cb9cb7..94bc962d8 100644 --- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl +++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl @@ -31,7 +31,7 @@ &.response-status .lesionRowSidebar .response-status-icon background-color: $defaultColor border-radius: 11px - color: $uiGrayDark + color: $uiGray font-size: 12px font-weight: 700 height: 21px @@ -55,7 +55,7 @@ fill: $textPrimaryColor .lesionRowSidebar - background: $uiGrayDark + background: $uiGray color: $textSecondaryColor flex: 1 max-width: 30px diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html index e0a0b6f61..6afabeb8f 100644 --- a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html +++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html @@ -10,9 +10,11 @@ {{>lesionTableRow (extend this rowItem=nonTarget)}} {{/each}} - {{>lesionTableHeaderRow id="newLesion" measurements=newLesions currentTimepointId=currentTimepointId}} - {{#each newLesion in newLesions}} - {{>lesionTableRow (extend this rowItem=newLesion)}} - {{/each}} + {{#if gt this.timepoints.get.length 1}} + {{>lesionTableHeaderRow id="newLesion" measurements=newLesions currentTimepointId=currentTimepointId}} + {{#each newLesion in newLesions}} + {{>lesionTableRow (extend this rowItem=newLesion)}} + {{/each}} + {{/if}} diff --git a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl index 894b3000a..a8893a3da 100644 --- a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl +++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl @@ -1,3 +1,5 @@ +@import "{design}/app" + .lesionTableView.scrollArea width: 100% height: 100% diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index 82b084388..13a5ca71d 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -100,7 +100,7 @@ $seriesSpacing = 2px .studyTimepointStudy.active .studyModality box-shadow: inset 0 0 0 3px $activeColor .studyBox - background-color: $uiGrayDarker + background-color: $uiGrayDark border: solid 1px $activeColor border-radius: 11px display: block diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html index 4095f0a8e..4782e56a6 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html @@ -39,7 +39,7 @@
{{>roundedButtonGroup rightSidebarToggleButtonData}}
-
+
diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js index 2c7cff8f1..83cf32f87 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js @@ -106,39 +106,9 @@ Template.toolbarSection.helpers({ }); Template.toolbarSection.events({ - // TODO: Inherit these from toolbar template somehow - 'click .imageViewerTool': function(e) { - $(e.currentTarget).tooltip('hide'); - - var tool = e.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': function(e) { - $(e.currentTarget).tooltip('hide'); - - var command = e.currentTarget.id; - if (!OHIF.viewer.functionList.hasOwnProperty(command)) { - return; - } - - 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); + 'click #toggleHUD'(event, instance) { + const state = Session.get('lesionTableHudOpen'); + Session.set('lesionTableHudOpen', !state); }, 'click #moreTools'(event, instance) { const $target = $(event.currentTarget); diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl index 6a32c741d..c7c152412 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl @@ -23,7 +23,7 @@ width: 100% .toolbarSectionDrawer - background-color: $uiGrayDarkest + background-color: $uiGrayDarker border-radius: 7px color: $textPrimaryColor content: '' diff --git a/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js b/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js index 1e0bd9317..483dddb9a 100644 --- a/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js +++ b/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js @@ -11,3 +11,35 @@ Template.toolbarSectionButton.helpers({ 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); + } +}); diff --git a/Packages/viewerbase/lib/helpers/blaze.js b/Packages/viewerbase/lib/helpers/blaze.js index 8746439b4..a81fdcc92 100644 --- a/Packages/viewerbase/lib/helpers/blaze.js +++ b/Packages/viewerbase/lib/helpers/blaze.js @@ -3,6 +3,11 @@ Template.registerHelper('instance', () => { return Template.instance(); }); +// Return the session value for the given key +Template.registerHelper('session', key => { + return Session.get(key); +}); + // Create a new object and extends it with the argument objects Template.registerHelper('extend', (...argsArray) => { // Create the resulting object diff --git a/Packages/viewerbase/lib/draggable.js b/Packages/viewerbase/lib/ui/draggable/draggable.js similarity index 99% rename from Packages/viewerbase/lib/draggable.js rename to Packages/viewerbase/lib/ui/draggable/draggable.js index eaf0c70f2..d78c04060 100644 --- a/Packages/viewerbase/lib/draggable.js +++ b/Packages/viewerbase/lib/ui/draggable/draggable.js @@ -1,6 +1,7 @@ // Allow attaching to jQuery selectors $.fn.draggable = function() { makeDraggable(this); + return this; }; /** @@ -106,4 +107,4 @@ makeDraggable = function(element) { element.on('mousedown', startMoving); element.on('touchstart', startMoving); -}; \ No newline at end of file +}; diff --git a/Packages/viewerbase/lib/ui/resizable/resizable.js b/Packages/viewerbase/lib/ui/resizable/resizable.js new file mode 100644 index 000000000..906a69af9 --- /dev/null +++ b/Packages/viewerbase/lib/ui/resizable/resizable.js @@ -0,0 +1,147 @@ +// Allow attaching to jQuery selectors +$.fn.resizable = function(options) { + _.each(this, element => { + const resizableInstance = $(element).data('resizableInstance'); + if (options === 'destroy' && resizableInstance) { + $(element).removeData('resizableInstance'); + resizableInstance.destroy(); + } else { + if (resizableInstance) { + resizableInstance.options(options); + } else { + $(element).data('resizableInstance', new Resizable(element, options)); + } + } + }); + + return this; +}; + +/** + * This class makes an element resizable. + */ +class Resizable { + + constructor(element, options={}) { + this.element = element; + this.$element = $(element); + this.options(options); + } + + options(options={}) { + const { boundSize, minWidth, minHeight } = options; + this.minWidth = minWidth || this.$element.width() || 16; + this.minHeight = minHeight || this.$element.height() || 16; + this.boundSize = boundSize || 8; + + this.destroy(); + this.init(); + } + + init() { + for (var x = -1; x <= 1; x++) { + for (var y = -1; y <= 1; y++) { + this.createBound(x, y); + } + } + + this.$element.addClass('resizable'); + } + + destroy() { + this.$element.removeClass('resizable').find('resize-bound').remove(); + } + + attachEventHandlers($bound, xDirection, yDirection) { + const $window = $(window); + + const initResizeHandler = event => { + event.stopPropagation(); + + this.width = this.initialWidth = this.$element.width(); + this.height = this.initialHeight = this.$element.height(); + this.startWidth = this.width; + this.startHeight = this.height; + + this.posX = parseInt(this.$element.css('left')); + this.posY = parseInt(this.$element.css('top')); + this.startPosX = this.posX; + this.startPosY = this.posY; + + this.startX = event.clientX; + this.startY = event.clientY; + + this.$element.addClass('resizing'); + + $window.on('mousemove', resizeHandler); + $window.on('mouseup', endResizeHandler); + }; + + const resizeHandler = event => { + let x, y; + x = event.clientX < 0 ? 0 : event.clientX; + x = x > window.innerWidth ? window.innerWidth : x; + y = event.clientY < 0 ? 0 : event.clientY; + y = y > window.innerHeight ? window.innerHeight : y; + + const xDistance = (x - this.startX) * xDirection; + const yDistance = (y - this.startY) * yDirection; + + const width = xDistance + this.startWidth; + const height = yDistance + this.startHeight; + this.width = width < this.minWidth ? this.minWidth : width; + this.height = height < this.minHeight ? this.minHeight : height; + this.$element.width(this.width); + this.$element.height(this.height); + + if (xDirection < 0) { + this.posX = this.startPosX - xDistance; + if (width < this.minWidth) { + this.posX = this.startPosX + (this.startWidth - this.minWidth); + } + + this.$element.css('left', `${this.posX}px`); + } + + if (yDirection < 0) { + this.posY = this.startPosY - yDistance; + if (height < this.minHeight) { + this.posY = this.startPosY + (this.startHeight - this.minHeight); + } + + this.$element.css('top', `${this.posY}px`); + } + }; + + const endResizeHandler = event => { + $window.off('mousemove', resizeHandler); + $window.off('mouseup', endResizeHandler); + + this.$element.removeClass('resizing'); + }; + + $bound.on('mousedown', initResizeHandler); + } + + createBound(xDirection, yDirection) { + if (xDirection === 0 && xDirection === yDirection) { + return; + } + + const $bound = $('
'); + + $bound[0].onselectstart = () => false; + + $bound.css('font-size', `${this.boundSize}px`); + + const mapX = ['left', 'center', 'right']; + const mapY = ['top', 'middle', 'bottom']; + $bound.addClass('bound-' + mapX[xDirection + 1]); + $bound.addClass('bound-' + mapY[yDirection + 1]); + + $bound.appendTo(this.$element); + + this.attachEventHandlers($bound, xDirection, yDirection); + } + +} diff --git a/Packages/viewerbase/lib/ui/resizable/resizable.styl b/Packages/viewerbase/lib/ui/resizable/resizable.styl new file mode 100644 index 000000000..f1f89e131 --- /dev/null +++ b/Packages/viewerbase/lib/ui/resizable/resizable.styl @@ -0,0 +1,55 @@ +@import "{design}/app" + +.resizable + transform(scale(1)) + + &.resizing, .resize-bound + user-select: none + -webkit-touch-callout: none + -webkit-user-select: none + -khtml-user-select: none + -moz-user-select: none + -ms-user-select: none + + .resize-bound + content: '' + line-height: 1em + position: fixed + + .bound-left + left: 0 + width: 1em + + .bound-center + left: 1em + height: 1em + right: 1em + + .bound-right + right: 0 + width: 1em + + .bound-top + top: 0 + height: 1em + + .bound-middle + top: 1em + width: 1em + bottom: 1em + + .bound-bottom + bottom: 0 + height: 1em + + .bound-left.bound-top, .bound-right.bound-bottom + cursor: nwse-resize + + .bound-left.bound-bottom, .bound-right.bound-top + cursor: nesw-resize + + .bound-left.bound-middle, .bound-right.bound-middle + cursor: ew-resize + + .bound-center.bound-top, .bound-center.bound-bottom + cursor: ns-resize diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js index 8b326dcb3..a9289d73b 100644 --- a/Packages/viewerbase/package.js +++ b/Packages/viewerbase/package.js @@ -117,7 +117,9 @@ Package.onUse(function(api) { api.addFiles('lib/toolManager.js', 'client'); api.addFiles('lib/enablePrefetchOnElement.js', 'client'); api.addFiles('lib/displayReferenceLines.js', 'client'); - api.addFiles('lib/draggable.js', 'client'); + api.addFiles('lib/ui/draggable/draggable.js', 'client'); + api.addFiles('lib/ui/resizable/resizable.js', 'client'); + api.addFiles('lib/ui/resizable/resizable.styl', 'client'); api.addFiles('lib/toggleDialog.js', 'client'); api.addFiles('lib/setActiveViewport.js', 'client'); api.addFiles('lib/switchToImageByIndex.js', 'client'); diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl index c625650a7..68de969c8 100644 --- a/Packages/worklist/client/components/worklistResult/worklistResult.styl +++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl @@ -8,13 +8,13 @@ $inputBackgroundColor = #2c363f $inputPlaceholderColor = lightgray $studyListToolbarHeight = 75px -$theadBackgroundColor = $uiGrayDarkest +$theadBackgroundColor = $uiGrayDarker $tablePadding = 8% $bodyCellHeight = 40px .studyListToolbar height: $studyListToolbarHeight - background: $uiGrayDarkest + background: $uiGrayDarker border-bottom: 2px solid black padding: 0 30px @@ -149,7 +149,7 @@ $bodyCellHeight = 40px background-color: black &:nth-child(even) - background-color: $uiGrayDarkest + background-color: $uiGrayDarker td height: $bodyCellHeight