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">
<div id="lesionLocationDialog">
<div class="dialogHeader">
<h4>Select Lesion Location</h4>
</div>
<div class="dialogContent">
<div class="lesionLocation">
<label>Lesion Location</label>
<select id="selectLesionLocation">
<option value="-1"></option>
{{ #each lesionLocations}}
<div class="lesionContentWrapper">
<div class="dialogHeader">
<h4>Select Lesion Location</h4>
</div>
<div class="dialogContent">
<div class="lesionLocation">
<label>Lesion Location</label>
<select id="selectLesionLocation">
<option value="-1"></option>
{{ #each lesionLocations}}
<option value='{{_id}}'>{{location}}</option>
{{ /each}}
</select>
{{ /each}}
</select>
</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
lesionDialog.css({
var dialogProperty = {
top: eventData.currentPoints.page.y - lesionDialog.outerHeight() - 40,
left: eventData.currentPoints.page.x - lesionDialog.outerWidth() / 2,
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
selector.off('change');

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

@ -2,9 +2,22 @@
display: none
position: absolute
z-index: 100
background: white
padding: 10px
border-radius: 10px
/* 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;
.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
outline: 0
@ -16,4 +29,4 @@
.dialogContent
margin-bottom: 20px

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

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

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

@ -1,41 +1,43 @@
<template name="nonTargetLesionDialog">
<div id="nonTargetLesionLocationDialog">
<div class="dialogHeader">
<div class="contentWrapper">
<div class="dialogHeader">
<div><h4>Select Lesion Location</h4></div>
</div>
</div>
<div class="dialogContent">
<div class="lesionLocation">
<div class="elementContainer">
<label>Lesion Location</label>
<div class="dialogHeader">
<div><h4>Select Lesion Location</h4></div>
</div>
<div class="elementContainer">
<select id="selectNonTargetLesionLocation">
<option value="-1"></option>
{{ #each lesionLocations}}
</div>
<div class="dialogContent">
<div class="lesionLocation">
<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>
{{ /each}}
</select>
{{ /each}}
</select>
</div>
</div>
</div>
<div class="locationResponse">
<div class="elementContainer">
<label>Response</label>
</div>
<div class="elementContainer">
<select id="selectNonTargetLesionLocationResponse">
<option value="-1"></option>
{{ #each locationResponses}}
<div class="locationResponse">
<div class="elementContainer">
<label>Response</label>
</div>
<div class="elementContainer">
<select id="selectNonTargetLesionLocationResponse">
<option value="-1"></option>
{{ #each locationResponses}}
<option value='{{code}}'>{{code}} - {{text}}</option>
{{ /each}}
</select>
{{ /each}}
</select>
</div>
</div>
</div>
<div class="locationOK">
<button class="btn" id="nonTargetLesionOK">OK</button>
<div class="locationOK">
<button class="btn" id="nonTargetLesionOK">OK</button>
</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
nonTargetlesionDialog.css({
// Show the nonTargetLesion dialog above
var dialogProperty = {
top: eventData.currentPoints.page.y,
left: eventData.currentPoints.page.x,
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
// Add lesion to lesion table