From a528e52dbcb23fee9cb3d8733f69f49f53a55b78 Mon Sep 17 00:00:00 2001
From: Evren Ozkan <evren217@gmail.com>
Date: Tue, 17 Nov 2015 16:42:06 -0500
Subject: [PATCH] Popups in Target&NonTarget Tools are opened at center on
 mobile devices

---
 .../lesionLocationDialog.html                 | 24 ++++----
 .../lesionLocationDialog.js                   | 23 +++++++-
 .../lesionLocationDialog.styl                 | 21 +++++--
 .../nonTargetLesionDialog.css                 | 20 ++++++-
 .../nonTargetLesionDialog.html                | 58 ++++++++++---------
 .../nonTargetLesionDialog.js                  | 24 +++++++-
 6 files changed, 120 insertions(+), 50 deletions(-)

diff --git a/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html b/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html
index b71e636f9..869487863 100644
--- a/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html
+++ b/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html
@@ -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>
diff --git a/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js b/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js
index 9997b87af..4bb141cd7 100644
--- a/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js
+++ b/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');
diff --git a/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl b/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl
index 65a0ce31e..6c62f51c3 100644
--- a/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl
+++ b/Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl
@@ -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
-    
+
diff --git a/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.css b/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.css
index 3634e3d96..36a555cfc 100644
--- a/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.css
+++ b/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 {
diff --git a/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.html b/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.html
index 381d4c6b1..095f5fed0 100644
--- a/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.html
+++ b/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.html
@@ -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>
diff --git a/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.js b/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.js
index cb2d5677e..88e9ac408 100644
--- a/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.js
+++ b/Packages/lesiontracker/components/nonTargetLesionDialog/nonTargetLesionDialog.js
@@ -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