diff --git a/Packages/ohif-design/styles/common/global.styl b/Packages/ohif-design/styles/common/global.styl index b5ff2d1bb..7344e0aec 100644 --- a/Packages/ohif-design/styles/common/global.styl +++ b/Packages/ohif-design/styles/common/global.styl @@ -51,6 +51,9 @@ label.form-group -ms-user-select: none user-select: none +.btn + transition(background-color 0.3s ease) + .modal-dialog .modal-content theme('background', '$primaryBackgroundColor') @@ -63,3 +66,15 @@ label.form-group button.close theme('color', '$textSecondaryColor') opacity: 1 + overflow: hidden + text-align: center + text-shadow: none + width: 20px + + span + display: block + line-height: 20px + transition(transform 0.3s ease) + + &:hover span + transform(rotate(180deg)) diff --git a/Packages/ohif-design/styles/components/select2.styl b/Packages/ohif-design/styles/components/select2.styl index 6dc188eb1..089f6d43a 100644 --- a/Packages/ohif-design/styles/components/select2.styl +++ b/Packages/ohif-design/styles/components/select2.styl @@ -3,13 +3,19 @@ // TODO: [design] can't we use colors that are already in common pallete? $gray1 = #C3C3C3 $gray2 = #B6B6B6 -$gray3 = #676767 -$gray4 = #3E3E3E +$gray3 = #A6A6A6 +$gray4 = #676767 +$gray5 = #3E3E3E $borderRadius = 2px span.select2.select2-container font-weight: normal + span.select2-selection + &:hover, &:focus + span.select2-selection__arrow + background-color: $gray3 + span.select2-selection border: 0 border-radius: $borderRadius @@ -28,6 +34,7 @@ span.select2.select2-container border-bottom-right-radius: $borderRadius right: 0 top: 0 + transition(background-color 0.3s ease) width: 20px b @@ -38,20 +45,20 @@ span.select2.select2-container min-height: 30px input.select2-search__field - color: $gray4 - placeholder-color($gray4) + color: $gray5 + placeholder-color($gray5) li.select2-selection__choice theme('border-color', '$uiGray') background-color: #FFF border-radius: $borderRadius - color: $gray4 + color: $gray5 font-size: 12px line-height: 22px margin-top: 3px span.select2-selection__choice__remove - color: $gray3 + color: $gray4 float: right font-size: 20px font-weight: 300 diff --git a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js index faf45891d..d3f201a84 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js +++ b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js @@ -1,10 +1,13 @@ +import { _ } from 'meteor/underscore'; +import { OHIF } from 'meteor/ohif:core'; + (function($, cornerstone, cornerstoneMath, cornerstoneTools) { 'use strict'; - var toolType = 'nonTarget'; + const toolType = 'nonTarget'; - var configuration = { + const configuration = { getMeasurementLocationCallback: getMeasurementLocationCallback, changeMeasurementLocationCallback: changeMeasurementLocationCallback, drawHandles: false, @@ -13,44 +16,60 @@ }; // Used to cancel tool placement - var keys = { + const keys = { ESC: 27 }; + + const toolMethods = { + removeMeasurement() { + + } + }; + + const showLocationDialog = settings => { + const dialogSettings = _.extend({ + title: 'Lesion Location', + toolMethods + }, settings); + OHIF.ui.showFormDialog('dialogNonTargetMeasurement', dialogSettings); + }; + // Define a callback to get your text annotation // This could be used, e.g. to open a modal - function getMeasurementLocationCallback(measurementData, eventData, doneCallback) { - const dialogSettings = { + function getMeasurementLocationCallback(measurementData, eventData) { + showLocationDialog({ title: 'Select Lesion Location', measurementData, eventData - }; - OHIF.ui.showFormDialog('dialogNonTargetMeasurement', dialogSettings).then(formData => { - doneCallback(formData.measurementNumber); }); } - function changeMeasurementLocationCallback(measurementData, eventData, doneCallback) { - doneCallback(prompt('Change your measurement location:')); + function changeMeasurementLocationCallback(measurementData, eventData) { + showLocationDialog({ + title: 'Select Lesion Location', + measurementData, + eventData, + edit: true + }); } /// --- Mouse Tool --- /// ///////// BEGIN ACTIVE TOOL /////// function addNewMeasurement(mouseEventData) { - var element = mouseEventData.element; + const element = mouseEventData.element; - function doneCallback(measurementNumber) { - measurementData.measurementNumber = measurementNumber; + function doneCallback() { measurementData.active = true; cornerstone.updateImage(element); } - var measurementData = createNewMeasurement(mouseEventData); + const measurementData = createNewMeasurement(mouseEventData); - var eventData = { + const eventData = { mouseButtonMask: mouseEventData.which }; - var config = cornerstoneTools.nonTarget.getConfiguration(); + const config = cornerstoneTools.nonTarget.getConfiguration(); // associate this data with this imageId so we can render it and manipulate it cornerstoneTools.addToolState(mouseEventData.element, toolType, measurementData); @@ -63,7 +82,7 @@ $(element).off('CornerstoneToolsMouseDoubleClick', doubleClickCallback); // Add a flag for using Esc to cancel tool placement - var cancelled = false; + let cancelled = false; function cancelCallback(e) { // If the Esc key was pressed, set the flag to true if (e.which === keys.ESC) { @@ -284,8 +303,7 @@ function addNewMeasurementTouch(touchEventData) { var element = touchEventData.element; - function doneCallback(measurementNumber) { - measurementData.measurementNumber = measurementNumber; + function doneCallback() { measurementData.active = true; cornerstone.updateImage(element); } diff --git a/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.html b/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.html index 02dc1f7f2..13a2a53ff 100644 --- a/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.html +++ b/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.html @@ -1,6 +1,5 @@