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

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html

@@ -1,5 +1,6 @@
 <template name="lesionLocationDialog">
     <div id="lesionLocationDialog">
+        <div class="lesionContentWrapper">
             <div class="dialogHeader">
                 <h4>Select Lesion Location</h4>
             </div>
@@ -15,4 +16,5 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js

@@ -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');

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl

@@ -2,9 +2,22 @@
     display: none
     position: absolute
     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
     outline: 0

Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.css

@@ -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 {

Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.html

@@ -1,5 +1,6 @@
 <template name="nonTargetLesionDialog">
     <div id="nonTargetLesionLocationDialog">
+        <div class="contentWrapper">
             <div class="dialogHeader">
                 <div class="dialogHeader">
                     <div><h4>Select Lesion Location</h4></div>
@@ -39,5 +40,6 @@
                 </div>
             </div>
         </div>
+    </div>
 
 </template>

Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.js

@@ -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,
         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