From 3b95c44b39ddd085f61e97c3acb3f2d4d7121d7c Mon Sep 17 00:00:00 2001
From: mb863 <mb863@440791e1-c2bf-4c1e-ad7c-caf3f8b0ebe8>
Date: Thu, 6 Jan 2011 21:12:46 +0000
Subject: [PATCH] NIHVIVO-1574: Refactored upload image templates, and made
 upload images css file theme agnostic.

---
 webapp/web/css/uploadImages.css               | 94 +++++++++++++++++++
 .../imageUpload/imageUpload-cropImage.ftl     | 62 ++++++------
 .../body/imageUpload/imageUpload-newImage.ftl | 39 ++++----
 .../imageUpload/imageUpload-replaceImage.ftl  | 40 ++++----
 4 files changed, 168 insertions(+), 67 deletions(-)
 create mode 100644 webapp/web/css/uploadImages.css

diff --git a/webapp/web/css/uploadImages.css b/webapp/web/css/uploadImages.css
new file mode 100644
index 000000000..54188aa8a
--- /dev/null
+++ b/webapp/web/css/uploadImages.css
@@ -0,0 +1,94 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+/* <------ UPLOAD PICTURE*/
+#photoUpload{
+    margin-left: 0px;
+    height: 280px;
+    background: #fff;
+    padding: 15px;
+}
+#photoUploadDefaultImage{
+    width: 120px;
+    float: left;
+}
+#photoUploadDefaultImage img{
+    margin-bottom: 10px;
+}
+#photoUploadForm{
+    width: 280px;
+    float: left;
+    padding-left: 15px;
+    margin-left: 1.2em;
+    margin-top: 30px;
+    padding-top: 15px;
+    padding-bottom: 25px;
+}
+#photoUploadForm label{
+    display: block;
+    padding-bottom: 10px;
+}
+#photoUploadForm label span{    
+    font-size: 0.7em;
+}
+#photoUploadForm input{    
+    margin-bottom: 10px;
+}
+/* <------ CROP PICTURE*/
+#photoCropping{
+    margin-left: 0px;
+    height: 450px;
+    background: #fff;
+    padding: 15px 0 15px 15px;
+    margin-right: 0;
+}
+#photoCroppingPreview{
+    width: 180px;
+    float: left;
+}
+.photoCroppingNote{
+    margin-top: 15px;
+    font-size: 0.8em;
+}
+#photoCropping{
+    width: 400px;
+    float: left;
+    padding-top: 30px;
+    padding-left: 15px;
+    margin-left: 0;
+    margin-right: 0;
+}
+.photoCroppedPreview{
+    width: 115px;
+    height: 115px;
+    overflow: hidden;
+}
+/* <------ DELETE PICTURE*/
+#photoDeletingContainer{
+    margin-left: 0px;
+    width: 720px;
+    height: 330px;
+    background: #fff;
+    padding: 15px;
+}
+/* <------ ERROR ALERTS*/
+#error-alert{
+    color: #900;
+    padding: 0px;
+    margin-bottom: 5px;
+    height: 30px;
+}
+#error-alert img{
+    float: left;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}
+#error-alert  p{
+    padding-left: 35px;
+    font-size: 0.9em;
+    line-height: 30px;
+}
+.or{
+    display: inline;
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/webapp/web/templates/freemarker/body/imageUpload/imageUpload-cropImage.ftl b/webapp/web/templates/freemarker/body/imageUpload/imageUpload-cropImage.ftl
index 98c4d2cd0..aa6599b69 100644
--- a/webapp/web/templates/freemarker/body/imageUpload/imageUpload-cropImage.ftl
+++ b/webapp/web/templates/freemarker/body/imageUpload/imageUpload-cropImage.ftl
@@ -7,7 +7,7 @@ ${scripts.add("/js/jquery_plugins/jcrop/jquery.Jcrop.js")}
 ${scripts.add("/js/imageUpload/cropImage.js")}
 
 
-${stylesheets.addFromTheme("/css/uploadImages.css")}
+${stylesheets.add("/css/uploadImages.css")}
 ${stylesheets.add("/js/jquery_plugins/jcrop/jquery.Jcrop.css")}
 
 
@@ -23,33 +23,39 @@ ${stylesheets.add("/js/jquery_plugins/jcrop/jquery.Jcrop.css")}
 </#macro>-->
 
 
-<div id="photoCroppingContainer">
+<section id="photoCroppingContainer" role="region">
     <h2>Photo Upload</h2>
-    <!-- This is the image we're attaching Jcrop to -->
-    <div id="photoCroppingPreview">
-        <h6>Current Photo </h6>
-        <p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
-        <div style="width:115px;height:115px;overflow:hidden;border:1px solid green;">
-            <img src="${imageUrl}" id="preview" />
-        </div>
-        <div id="photoCroppingHowTo">
-            <p class="photoCroppingNote">To make adjustments, you can drag around and resize the photo to the right. When you are happy with your photo click the "Save Photo" button. </p>
-            <form id="cropImage" action="${formAction}"  method="post">
-                     
-            <!-- Javascript will populate these values -->
-            <input type="hidden" name="x" value="" />
-            <input type="hidden" name="y" value="" />
-            <input type="hidden" name="w" value="" />
-            <input type="hidden" name="h" value="" />
-                                          
-            <input  type="submit" value="Save photo">
-                or <a class="cancelUpload"  href="${cancelUrl}">Cancel</a>
-            </form>
-       </div>
-    </div>
     
-    <div id="photoCropping">
-        <img style="border:1px solid green;" src="${imageUrl}" <#--<@newImageSize/>--> id="cropbox" />
-    </div>
-</div>
+    <!-- This is the image we're attaching Jcrop to -->
+    <section id="photoCroppingPreview" role="region">
+        <h3>Current Photo</h3>
+        
+        <p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
+        
+        <section class="photoCroppedPreview" role="region">
+            <img src="${imageUrl}" id="preview" alt="Image to be cropped"/>
+        </section>
+        
+        <section id="photoCroppingHowTo" role="region">
+            <p class="photoCroppingNote">To make adjustments, you can drag around and resize the photo to the right. When you are happy with your photo click the "Save Photo" button. </p>
+            
+            <form id="cropImage" action="${formAction}"  method="post" role="form">
+                <!-- Javascript will populate these values -->
+                <input type="hidden" name="x" value="" />
+                <input type="hidden" name="y" value="" />
+                <input type="hidden" name="w" value="" />
+                <input type="hidden" name="h" value="" />
+                                      
+                <input  id="submit" type="submit" value="Save photo">
+                
+                <span class="or"> or <a class="cancel"  href="${cancelUrl}">Cancel</a></span>
+            </form>
+       </section>
+    </section>
+    
+    <section id="photoCropping" role="region">
+        <img src="${imageUrl}" id="cropbox" alt="Preview of photo cropped" />
+    </section
+</section>
+
 <div class="clear"></div>
diff --git a/webapp/web/templates/freemarker/body/imageUpload/imageUpload-newImage.ftl b/webapp/web/templates/freemarker/body/imageUpload/imageUpload-newImage.ftl
index ca95cfde2..766fd88d7 100644
--- a/webapp/web/templates/freemarker/body/imageUpload/imageUpload-newImage.ftl
+++ b/webapp/web/templates/freemarker/body/imageUpload/imageUpload-newImage.ftl
@@ -5,30 +5,29 @@
 ${scripts.add("/js/jquery.js")}
 ${scripts.add("/js/imageUpload/imageUploadUtils.js")}
 
-${stylesheets.addFromTheme("/css/uploadImages.css")}
+${stylesheets.add("/css/uploadImages.css")}
 
-<div id="photoUploadContainer">
+<section id="photoUploadContainer" role="region">
     <h2>Photo Upload</h2>
               
     <#if errorMessage??>
-        <div id="error-alert"><img src="${urls.images}/iconAlert.png"/>
+        <section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="Error alert icon" />
             <p>${errorMessage}</p>
-        </div>
+        </section>
     </#if>
 
-    <div id="photoUploadDefaultImageContainer">
-        <h6>Current Photo</h6>
-        <img src="${thumbnailUrl}" width="115" height="115" /> 
-    </div>
-              
-    <div id="photoUploadForm">
-        <form action="${formAction}" enctype="multipart/form-data" method="post">
-            <label>Upload a photo <span> (JPEG, GIF or PNG)</span></label>
-            <input id="datafile" type="file" name="datafile" size="30" />
-            <input type="submit" value="Upload photo"/> 
-            <span class="or"> or 
-            <a class="cancelUpload"  href="${cancelUrl}">Cancel</a></span>
-        </form>
-    </div>
-</div>
-
+    <section id="photoUploadDefaultImage" role="region">
+        <h3>Current Photo</h3>
+        
+        <img src="${thumbnailUrl}" width="115" height="115" alt="Individual photo" /> 
+    </section>
+          
+    <form id="photoUploadForm" action="${formAction}" enctype="multipart/form-data" method="post" role="form">
+        <label>Upload a photo <span> (JPEG, GIF or PNG)</span></label>
+        
+        <input id="datafile" type="file" name="datafile" size="30" />
+        <input id="submit" type="submit" value="Upload photo"/>
+        
+        <span class="or"> or <a class="cancel"  href="${cancelUrl}">Cancel</a></span>
+    </form>
+</section>
\ No newline at end of file
diff --git a/webapp/web/templates/freemarker/body/imageUpload/imageUpload-replaceImage.ftl b/webapp/web/templates/freemarker/body/imageUpload/imageUpload-replaceImage.ftl
index 3bb9b21cf..61374ec43 100644
--- a/webapp/web/templates/freemarker/body/imageUpload/imageUpload-replaceImage.ftl
+++ b/webapp/web/templates/freemarker/body/imageUpload/imageUpload-replaceImage.ftl
@@ -5,28 +5,30 @@
 ${scripts.add("/js/jquery.js")}
 ${scripts.add("/js/imageUpload/imageUploadUtils.js")}
 
-${stylesheets.addFromTheme("/css/uploadImages.css")}
+${stylesheets.add("/css/uploadImages.css")}
 
-<div id="photoUploadContainer">
+<section id="photoUpload" role="region">
     <h2>Photo Upload</h2>
+
     <#if errorMessage??>
-        <div id="error-alert"><img src="${urls.images}/iconAlert.png"/>
+        <section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="Error alert icon" />
             <p>${errorMessage}</p>
-        </div>
+        </section>
     </#if>
-    <div id="photoUploadDefaultImageContainer">
-        <h6>Current Photo</h6>
-            <img src="${thumbnailUrl}" width="115" />
+    
+    <section id="photoUploadDefaultImage" role="region">
+        <h3>Current Photo</h3>
+            <img src="${thumbnailUrl}" width="115" alt="Individual photo" />
+            
             <a class="thumbnail" href="${deleteUrl}">Delete photo</a>
-    </div>
-       
-    <div id="photoUploadForm">
-        <form action="${formAction}" enctype="multipart/form-data" method="post">
-            <label>Replace Photo <span> (JPEG, GIF or PNG)</span></label>
-            <input  type="file" name="datafile" size="30">
-            <input   type="submit" value="Upload photo"> 
-            <span class="or"> or 
-            <a class="cancelUpload"  href="${cancelUrl}">Cancel</a></span>
-         </form>
-    </div>
-</div>
+    </section>
+
+    <form id="photoUploadForm" action="${formAction}" enctype="multipart/form-data" method="post" role="form">
+        <label>Replace Photo <span> (JPEG, GIF or PNG)</span></label>
+
+        <input type="file" name="datafile" size="30">
+        <input id="submit" type="submit" value="Upload photo"> 
+
+        <span class="or"> or <a class="cancel"  href="${cancelUrl}">Cancel</a></span>
+     </form>
+</section>
\ No newline at end of file