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

Styling updates to prevent lesion dialogs from going off screen

Browse Source
This commit is contained in:
Erik Ziegler 2015-12-21 12:11:17 -05:00
parent 4ae0183a9c
commit d7d4ea0394
10 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js
View File

@ -76,6 +76,14 @@ function getLesionLocationCallback(measurementData, eventData) {
display: 'block'
};
var pageHeight = $(window).height();
dialogProperty.top = Math.max(dialogProperty.top, 0);
dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
var pageWidth = $(window).width();
dialogProperty.left = Math.max(dialogProperty.left, 0);
dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
// Device is touch device or not
// If device is touch device, set position center of screen vertically and horizontally
if (isTouchDevice()) {

9
Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl
View File

@ -7,18 +7,11 @@
right: 0
z-index: 100
width: 300px
margin: auto
height: 130px
border-radius: 5px
padding: 10px 20px 10px 20px
background-color: rgba(255,255,255,1)
/* dialogMobile is added to #lesionLocationDialog when touchDevices is detected */
.dialogMobile
margin: 0 auto
float: none
background-color: rgba(0,0,0,0.5)
text-align: center
#closeLesionPopup
outline: none
border: none

2
Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html
View File

@ -54,7 +54,7 @@
{{ #if code }}
<option value={{code}} selected={{selected}}>{{code}} - {{text}}</option>
{{ else }}
<option value={{text}}} selected={{selected}}>{{text}}</option>
<option value={{text}} selected={{selected}}>{{text}}</option>
{{ /if }}
{{ /each}}
</select>

9
Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js
View File

@ -94,6 +94,14 @@ function getLesionLocationCallback(measurementData, eventData) {
display: 'block'
};
var pageHeight = $(window).height();
dialogProperty.top = Math.max(dialogProperty.top, 0);
dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
var pageWidth = $(window).width();
dialogProperty.left = Math.max(dialogProperty.left, 0);
dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
// Device is touch device or not
// If device is touch device, set position center of screen vertically and horizontally
if (isTouchDevice()) {
@ -103,6 +111,7 @@ function getLesionLocationCallback(measurementData, eventData) {
dialogProperty.left = 0;
dialogProperty.right = 0;
dialogProperty.bottom = 0;
dialogProperty.margin = 'auto';
}
dialog.css(dialogProperty);

12
Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl
View File

@ -12,13 +12,6 @@
padding: 10px 20px 10px 20px
background-color: rgba(255,255,255,1)
/* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */
.dialogMobile
margin: 0 auto
float: none
background-color: rgba(0,0,0,0.5)
text-align: center
#selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse
width: 100%
@ -27,4 +20,7 @@
.locationOK
text-align: center
/* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */
.dialogMobile
margin: auto

8
Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js
View File

@ -44,6 +44,14 @@ changeNonTargetResponse = function(measurementData, eventData, doneCallback) {
} else {
dialogProperty.top = eventData.currentPoints.page.y - dialog.outerHeight() - 40;
dialogProperty.left = eventData.currentPoints.page.x - dialog.outerWidth() / 2;
var pageHeight = $(window).height();
dialogProperty.top = Math.max(dialogProperty.top, 0);
dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
var pageWidth = $(window).width();
dialogProperty.left = Math.max(dialogProperty.left, 0);
dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
}
dialog.css(dialogProperty);

3
Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html
View File

@ -3,7 +3,8 @@
<div class="timepointDialogContentWrapper">
<div class="dialogContent">
<div class="timepointContent">
<input type="checkbox" id="checkBoxBaseline" value="ok"><strong >Baseline</strong>
<input type="checkbox" id="checkBoxBaseline" value="ok">
<label for="checkBoxBaseline">Baseline</label>
</div>
</div>
</div>

2
Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.styl
View File

@ -1,4 +1,3 @@
#timepointTextDialog
display: none
position: absolute
@ -12,7 +11,6 @@
background-color: rgba(255,255,255,1)
border-top-left-radius: 5px
border-top-right-radius: 5px
text-align: left
.dialogContent
margin: 0 auto

28
Packages/worklist/components/worklistResult/worklistResult.html
View File

@ -3,17 +3,13 @@
<thead>
<tr>
<th>
<div>
Patient Name
</div>
<div>Patient Name</div>
<div class="patient-name-input">
<input type="text" class="form-control worklist-search" id="patientName">
</div>
</th>
<th>
<div>
Patient ID
</div>
<div>Patient ID</div>
<div class="patientid-input">
<input type="text" class="form-control worklist-search" id="patientId">
</div>
@ -21,9 +17,7 @@
{{#unless isTouchDevice}}
<th>
<div>
Accession #
</div>
<div>Accession #</div>
<div class="worklist-input">
<input type="text" class="form-control worklist-search" id="accessionNumber">
</div>
@ -31,9 +25,7 @@
{{/unless}}
<th>
<div>
Study Date
</div>
<div>Study Date</div>
<div class="worklist-input">
<input type="text" class="form-control worklist-search" id="studyDate">
</div>
@ -41,18 +33,14 @@
{{#unless isTouchDevice}}
<th>
<div>
Modality
</div>
<div>Modality</div>
<div class="modality-input">
<input type="text" class="form-control worklist-search" id="modality" style="visibility: hidden; ">
</div>
</th>
{{/unless}}
<th>
<div>
StudyDescription
</div>
<div>Study Description</div>
<div class="study-description-input">
<input type="text" class="form-control worklist-search" id="studyDescription" style="visibility: hidden; ">
</div>
@ -60,9 +48,7 @@
{{#unless isTouchDevice}}
<th>
<div>
# Images
</div>
<div># Images</div>
<div class="worklist-input">
<input type="text" class="form-control worklist-search" id="numberOfImages" style="visibility: hidden; ">
</div>

2
Packages/worklist/components/worklistResult/worklistResult.js
View File

@ -111,7 +111,7 @@ function search() {
}
Template.worklistResult.events({
'keypress': function(event) {
'keydown': function(event) {
if (event.keyCode === 13) { // Enter
search();
}