From d7d4ea0394661fb20f4d24e9f41f947643c11d59 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.ziegler@ulg.ac.be>
Date: Mon, 21 Dec 2015 12:11:17 -0500
Subject: [PATCH] Styling updates to prevent lesion dialogs from going off
 screen

---
 .../lesionLocationDialog.js                   |  8 ++++++
 .../lesionLocationDialog.styl                 |  9 +-----
 .../nonTargetLesionDialog.html                |  2 +-
 .../nonTargetLesionDialog.js                  |  9 ++++++
 .../nonTargetLesionDialog.styl                | 12 +++-----
 .../nonTargetResponseDialog.js                |  8 ++++++
 .../timepointTextDialog.html                  |  3 +-
 .../timepointTextDialog.styl                  |  2 --
 .../worklistResult/worklistResult.html        | 28 +++++--------------
 .../worklistResult/worklistResult.js          |  2 +-
 10 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js
index a981e0b6a..35070d034 100644
--- a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js
+++ b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js
@@ -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()) {
diff --git a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl
index 0a462cd22..6d3a2b773 100644
--- a/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl
+++ b/Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl
@@ -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
diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html
index 47e737551..084d47b0d 100644
--- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html
+++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html
@@ -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>
diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js
index 9608d5e53..97284be1b 100644
--- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js
+++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js
@@ -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);
diff --git a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl
index 87f325f98..2914b715c 100644
--- a/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl
+++ b/Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl
@@ -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
-    
\ No newline at end of file
+
+/* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */
+.dialogMobile
+  margin: auto
\ No newline at end of file
diff --git a/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js b/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js
index 7b0e5df09..d4a6630a7 100644
--- a/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js
+++ b/Packages/lesiontracker/client/components/nonTargetResponseDialog/nonTargetResponseDialog.js
@@ -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);
diff --git a/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html b/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html
index 32a50117b..ec2c876a8 100644
--- a/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html
+++ b/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.html
@@ -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>
diff --git a/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.styl b/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.styl
index 1478a4ff7..7aa59904a 100644
--- a/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.styl
+++ b/Packages/lesiontracker/client/components/timepointTextDialog/timepointTextDialog.styl
@@ -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
diff --git a/Packages/worklist/components/worklistResult/worklistResult.html b/Packages/worklist/components/worklistResult/worklistResult.html
index ca6f7e602..f0d9248e9 100644
--- a/Packages/worklist/components/worklistResult/worklistResult.html
+++ b/Packages/worklist/components/worklistResult/worklistResult.html
@@ -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>
diff --git a/Packages/worklist/components/worklistResult/worklistResult.js b/Packages/worklist/components/worklistResult/worklistResult.js
index f26aa8912..a4813b89b 100644
--- a/Packages/worklist/components/worklistResult/worklistResult.js
+++ b/Packages/worklist/components/worklistResult/worklistResult.js
@@ -111,7 +111,7 @@ function search() {
 }
 
 Template.worklistResult.events({
-    'keypress': function(event) {
+    'keydown': function(event) {
         if (event.keyCode === 13) { //  Enter
             search();
         }