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

Popups in Target&NonTarget Tools are opened at center on mobile devices

Browse Source
This commit is contained in:
Evren Ozkan 2015-11-17 16:42:06 -05:00
parent 7174dfe73f
commit a528e52dbc
6 changed files with 120 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html
View File

@ -1,17 +1,19 @@
<template name="lesionLocationDialog"> <template name="lesionLocationDialog">
<div id="lesionLocationDialog"> <div id="lesionLocationDialog">
<div class="dialogHeader"> <div class="lesionContentWrapper">
<h4>Select Lesion Location</h4> <div class="dialogHeader">
</div> <h4>Select Lesion Location</h4>
<div class="dialogContent"> </div>
<div class="lesionLocation"> <div class="dialogContent">
<label>Lesion Location</label> <div class="lesionLocation">
<select id="selectLesionLocation"> <label>Lesion Location</label>
<option value="-1"></option> <select id="selectLesionLocation">
{{ #each lesionLocations}} <option value="-1"></option>
{{ #each lesionLocations}}
<option value='{{_id}}'>{{location}}</option> <option value='{{_id}}'>{{location}}</option>
{{ /each}} {{ /each}}
</select> </select>
</div>
</div> </div>
</div> </div>
</div> </div>

23
Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js
View File

@ -62,11 +62,30 @@ function getLesionLocationCallback(measurementData, eventData, doneCallback) {
} }
// Show the lesion location dialog above // Show the lesion location dialog above
lesionDialog.css({
var dialogProperty = {
top: eventData.currentPoints.page.y - lesionDialog.outerHeight() - 40, top: eventData.currentPoints.page.y - lesionDialog.outerHeight() - 40,
left: eventData.currentPoints.page.x - lesionDialog.outerWidth() / 2, left: eventData.currentPoints.page.x - lesionDialog.outerWidth() / 2,
display: 'block' display: 'block'
}); };
// Device is touch device or not
// If device is touch device, set position center of screen vertically and horizontally
if (isTouchDevice()) {
// add dialogMobile class to provide a black,transparent background
$(lesionDialog).addClass("dialogMobile");
dialogProperty.top = 0;
dialogProperty.left = 0;
dialogProperty.right = 0;
dialogProperty.bottom = 0;
$(".lesionContentWrapper").css({
left: ($(window).width() - $(".lesionContentWrapper").width()) / 2,
top: ($(window).height() - $(".lesionContentWrapper").height()) / 2
});
}
lesionDialog.css(dialogProperty);
// Attach a callback for the select box // Attach a callback for the select box
selector.off('change'); selector.off('change');

19
Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl
View File

@ -2,9 +2,22 @@
display: none display: none
position: absolute position: absolute
z-index: 100 z-index: 100
background: white
padding: 10px /* dialogMobile is added to #lesionLocationDialog when touchDevices is detected */
border-radius: 10px .dialogMobile
margin: 0 auto;
float: none;
background-color: rgba(0,0,0,0.5);
text-align: center;
.lesionContentWrapper
position: absolute;
width: 250px;
height: 150px;
border-radius: 10px;
padding: 10px 20px 10px 20px;
background-color: rgba(255,255,255,1);
text-align: left
#closeLesionPopup #closeLesionPopup
outline: 0 outline: 0

20
Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.css
View File

@ -2,9 +2,24 @@
display: none; display: none;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
background: white; }
padding: 10px 20px 10px 20px;
/* 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;
}
.contentWrapper {
position: absolute;
width: 250px;
height: 250px;
border-radius: 10px; border-radius: 10px;
padding: 10px 20px 10px 20px;
background-color: rgba(255,255,255,1);
text-align: left;
} }
#selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse { #selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse {
@ -19,6 +34,7 @@
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
float: none; float: none;
text-align: left;
} }
.locationOK { .locationOK {

58
Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.html
View File

@ -1,41 +1,43 @@
<template name="nonTargetLesionDialog"> <template name="nonTargetLesionDialog">
<div id="nonTargetLesionLocationDialog"> <div id="nonTargetLesionLocationDialog">
<div class="dialogHeader"> <div class="contentWrapper">
<div class="dialogHeader"> <div class="dialogHeader">
<div><h4>Select Lesion Location</h4></div> <div class="dialogHeader">
</div> <div><h4>Select Lesion Location</h4></div>
</div>
<div class="dialogContent">
<div class="lesionLocation">
<div class="elementContainer">
<label>Lesion Location</label>
</div> </div>
<div class="elementContainer"> </div>
<select id="selectNonTargetLesionLocation"> <div class="dialogContent">
<option value="-1"></option> <div class="lesionLocation">
{{ #each lesionLocations}} <div class="elementContainer">
<label>Lesion Location</label>
</div>
<div class="elementContainer">
<select id="selectNonTargetLesionLocation">
<option value="-1"></option>
{{ #each lesionLocations}}
<option value='{{_id}}'>{{location}}</option> <option value='{{_id}}'>{{location}}</option>
{{ /each}} {{ /each}}
</select> </select>
</div>
</div> </div>
</div>
<div class="locationResponse"> <div class="locationResponse">
<div class="elementContainer"> <div class="elementContainer">
<label>Response</label> <label>Response</label>
</div> </div>
<div class="elementContainer"> <div class="elementContainer">
<select id="selectNonTargetLesionLocationResponse"> <select id="selectNonTargetLesionLocationResponse">
<option value="-1"></option> <option value="-1"></option>
{{ #each locationResponses}} {{ #each locationResponses}}
<option value='{{code}}'>{{code}} - {{text}}</option> <option value='{{code}}'>{{code}} - {{text}}</option>
{{ /each}} {{ /each}}
</select> </select>
</div>
</div> </div>
</div>
<div class="locationOK"> <div class="locationOK">
<button class="btn" id="nonTargetLesionOK">OK</button> <button class="btn" id="nonTargetLesionOK">OK</button>
</div>
</div> </div>
</div> </div>
</div> </div>

24
Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.js
View File

@ -86,12 +86,30 @@ function getNonTargetLesionLocationCallback(measurementData, eventData, doneCall
} }
} }
// Show the lesion location dialog above // Show the nonTargetLesion dialog above
nonTargetlesionDialog.css({ var dialogProperty = {
top: eventData.currentPoints.page.y, top: eventData.currentPoints.page.y,
left: eventData.currentPoints.page.x, left: eventData.currentPoints.page.x,
display: 'block' display: 'block'
}); };
// Device is touch device or not
// If device is touch device, set position center of screen vertically and horizontally
if (isTouchDevice()) {
// add dialogMobile class to provide a black,transparent background
$(nonTargetlesionDialog).addClass("dialogMobile");
dialogProperty.top = 0;
dialogProperty.left = 0;
dialogProperty.right = 0;
dialogProperty.bottom = 0;
$(".contentWrapper").css({
left: ($(window).width() - $(".contentWrapper").width()) / 2,
top: ($(window).height() - $(".contentWrapper").height()) / 2
});
}
nonTargetlesionDialog.css(dialogProperty);
// Click OK button // Click OK button
// Add lesion to lesion table // Add lesion to lesion table