From 65b2da08c9edaa6d2afe83ca7a5b72000128ecbe Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 17 May 2016 11:18:14 -0400
Subject: [PATCH] Bug 16538: Improve the style of progress bars

This patch updates the style of progress bars to make them a little
nicer. Progress bars in the staff client are not built in a consisten
way. Some have been updated to use the <progress> element and some have
not. This patch improves some styling common to both kinds.

Other changes:

- Redundant in-page CSS has been removed from many pages.
- An invalid "min" attribute has been removed from several instances of
  <progress>.
- Corrected capitalization.
- Fixed incorrectly quoted attributes.
- Added missing form "action" attributes.

To test, clear your browser cache if necessary. Apply the patch and
test uploads on the following pages:

- Circulation -> Offline circulation file upload
- Tools -> Batch item modification
- Tools -> Batch record modification
- Tools -> Stage MARC records for import
- Tools -> Manage staged MARC records
- Tools -> Upload local cover image
- Tools -> Upload

In all cases, progress bars should look improved and work correctly.

Test Tools -> Batch item deletion. Unused background job handling markup
has been removed. Deletion processing should work correctly.

Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com>
Works as advertised

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
---
 .../intranet-tmpl/prog/css/staff-global.css   | 24 ++++++++++++++++++-
 .../en/modules/offline_circ/process_koc.tt    |  6 +----
 .../prog/en/modules/tools/batchMod-del.tt     | 13 ++++------
 .../prog/en/modules/tools/batchMod-edit.tt    |  2 +-
 .../tools/batch_record_modification.tt        |  2 +-
 .../en/modules/tools/manage-marc-import.tt    |  6 ++---
 .../en/modules/tools/stage-marc-import.tt     |  8 +++----
 .../prog/en/modules/tools/upload-images.tt    | 16 ++++---------
 .../prog/en/modules/tools/upload.tt           |  2 +-
 9 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index d2db82e1f3..525cd0ee80 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -2476,11 +2476,33 @@ fieldset.rows table.mceListBox {
 
 #jobpanel,#jobstatus,#jobfailed { display : none; }
 #jobstatus { margin:.4em; }
-#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('../img/progress.png') -300px 0px no-repeat; }
+
+#jobprogress{
+    display: inline-block;
+    width:200px;
+    height:10px;
+    border:1px solid #666;
+    background:url('../img/progress.png') -300px 0px no-repeat;
+ }
+
+.progress_panel {
+    clear: both;
+    font-size: 120%;
+    margin: 1em 0;
+    padding: 1em;
+    border: 2px solid #EEE;
+    border-radius: 5px;
+}
+
+progress {
+    width: 50%;
+}
+
 #selections { width : 100%; white-space : normal; }
 #selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
 #selections span.selected { background-color : #CCE0FC; }
 #selections input { vertical-align:middle;margin:0 2px; }
+
 #changepasswordf input[type="text"],
 #changepasswordf input[type="password"] {
     font-size: 140%;
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tt
index a126288e2c..01275e034a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/offline_circ/process_koc.tt
@@ -66,10 +66,6 @@ function CheckForm(f) {
 
 //]]>
 </script>
-<style type="text/css">
-	#fileuploadstatus,#jobstatus { margin:.4em; }
-    #fileuploadprogress,#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; }
-</style>
 </head>
 <body id="ocirc_process_koc" class="circ ocirc">
 [% INCLUDE 'header.inc' %]
@@ -109,7 +105,7 @@ function CheckForm(f) {
        <fieldset class="action"><input type="button" class="submit" value="Upload file" id="upload_file" /></fieldset>
 	   </fieldset>
      </form>
-     <div id="fileuploadstatus" style="display:none">Upload progress: <progress id="fileuploadprogress" min="0" max="100" value="0"></progress> <span class="fileuploadpercent">0</span>%</div>
+     <div id="fileuploadstatus" class="progress_panel" style="display:none">Upload progress: <progress id="fileuploadprogress" max="100" value="0"></progress> <span class="fileuploadpercent">0</span>%</div>
      <div id="fileuploadfailed" style="display:none"></div>
    </div>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
index e339e3a6bf..8014d9ed98 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
@@ -1,7 +1,6 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Tools &rsaquo; Batch item deletion</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<script type="text/javascript" src="[% interface %]/[% theme %]/js/background-job-progressbar.js"></script>
 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
 [% INCLUDE 'datatables.inc' %]
 <script type="text/javascript" src="[% interface %]/[% theme %]/js/pages/batchMod.js"></script>
@@ -42,8 +41,8 @@ $(document).ready(function(){
                 [% IF ( show ) %]<h1>Batch item deletion</h1>[% ELSE %]<h1>Batch item deletion results</h1>[% END %]
 	    [% IF ( barcode_not_unique ) %]<div class="dialog alert"><strong>Error saving item</strong>: Barcode must be unique.</div>[% END %]
 	    [% IF ( no_next_barcode ) %]<div class="dialog alert"><strong>Error saving items</strong>: Unable to automatically determine values for barcodes. No item has been inserted.</div>[% END %]
-	    [% IF ( book_on_loan ) %]<div class="dialog alert"><strong>Cannot Delete</strong>: item is checked out.</div>[% END %]
-	    [% IF ( book_reserved ) %]<div class="dialogalert"><strong>Cannot Delete</strong>: item has a waiting hold.</div>[% END %]
+        [% IF ( book_on_loan ) %]<div class="dialog alert"><strong>Cannot delete</strong>: item is checked out.</div>[% END %]
+        [% IF ( book_reserved ) %]<div class="dialogalert"><strong>Cannot delete</strong>: item has a waiting hold.</div>[% END %]
 
     [% UNLESS ( action ) %]
 
@@ -136,15 +135,11 @@ $(document).ready(function(){
 	     <p>This will delete [% IF ( too_many_items ) %]all the[% ELSE %]the selected[% END %] items.</p>
 	     <input type="hidden" name="del" value="1" />
 	     <fieldset class="action">    
-		<div id="jobpanel">
-		    <div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
-		    <div id="jobfailed"></div>
-		</div>
         <input type="checkbox" name="del_records" id="del_records" /> <label for="del_records">Delete records if no items remain.</label>
         [% IF too_many_items %]
-            <input type="submit" id="mainformsubmit" name="mainformsubmit" value="Delete ALL submitted items" />
+            <input type="submit" name="mainformsubmit" value="Delete ALL submitted items" />
         [% ELSE %]
-            <input type="submit" id="mainformsubmit" name="mainformsubmit" value="Delete selected items" />
+            <input type="submit" name="mainformsubmit" value="Delete selected items" />
         [% END %]
 
 		<a href="/cgi-bin/koha/tools/batchMod.pl?del=1" class="cancel">Cancel</a>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
index c673ac9c27..743260478c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
@@ -235,7 +235,7 @@ $(document).ready(function(){
     </fieldset>
     <fieldset class="action">    
    <div id="jobpanel">
-       <div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
+       <div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
        <div id="jobfailed"></div>
    </div>
    <input type="submit" id="mainformsubmit" value="Save" />
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
index a724c364b9..2d7d5341ae 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
@@ -252,7 +252,7 @@ $(document).ready(function() {
           <a class="cancel" href="/cgi-bin/koha/tools/batch_record_modification.pl">Cancel</a>
         </fieldset>
         <div id="jobpanel">
-          <div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
+          <div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
           <div id="jobfailed"></div>
         </div>
       </form>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt
index e1119d13f1..a8a957271b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/manage-marc-import.tt
@@ -152,9 +152,7 @@ $(document).ready(function(){
 //]]>
 </script>
 <style type="text/css">
-	#jobpanel,#jobstatus,#jobfailed { display : none; }
-	#jobstatus { margin:.4em; }
-    #jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; } span.change-status { font-style:italic; color:#666; display:none; }#marcPreview { width : 80%; margin-left : -40%; } @media (max-width: 767px) { #marcPreview { margin: 0; width : auto; } }
+    #jobpanel,#jobstatus,#jobfailed { display : none; }
 </style>
 </head>
 <body id="tools_manage-marc-import" class="tools">
@@ -360,7 +358,7 @@ $(document).ready(function(){
     [% END %]
     </fieldset>
   </form>
-  <div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
+  <div id="jobpanel"><div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
      <div id="jobfailed"></div></div>
   [% END %]
   [% IF ( can_revert ) %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt
index 529edd5a7b..45aeac9858 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt
@@ -7,8 +7,6 @@
 
 <style type="text/css">
     #fileuploadstatus,#fileuploadfailed,#fileuploadcancel,#jobpanel,#jobstatus,#jobfailed { display : none; }
-	#fileuploadstatus,#jobstatus { margin:.4em; }
-    #fileuploadprogress,#jobprogress { width:150px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; }
 </style>
 
 <script type="text/javascript">
@@ -154,8 +152,8 @@ function cbUpload( status, fileid ) {
 </fieldset>
 		
     <div id="fileuploadpanel">
-        <div id="fileuploadstatus">Upload progress:
-            <progress id="fileuploadprogress" min="0" max="100" value="0">
+        <div id="fileuploadstatus" class="progress_panel">Upload progress:
+            <progress id="fileuploadprogress" max="100" value="0">
             </progress>
             <span class="fileuploadpercent">0</span>%
         </div>
@@ -266,7 +264,7 @@ function cbUpload( status, fileid ) {
   </fieldset>
   <fieldset class="action"><input type="button" id="mainformsubmit" value="Stage for import" /></fieldset>
  
-       <div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
+       <div id="jobpanel"><div id="jobstatus" class="progress_panel">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
      <div id="jobfailed"></div></div>
   
 </form>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
index 4fa8092928..a1300fc07f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
@@ -7,8 +7,6 @@
 
 <style type="text/css">
     #fileuploadstatus,#fileuploadfailed,#jobpanel,#jobstatus,#jobfailed { display : none; }
-	#fileuploadstatus,#jobstatus { margin:.4em; }
-    #fileuploadprogress,#jobprogress { width:150px;height:10px;border:1px solid #666;background:url('[% interface %]/[% theme %]/img/progress.png') -300px 0px no-repeat; }
 </style>
 
 <script type="text/javascript">
@@ -89,7 +87,7 @@ $(document).ready(function(){
 <ul>
 	<li>Select an image file or ZIP file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
 </ul>
-<form method="post" action="[% SCRIPT_NAME %]" id="uploadfile" enctype="multipart/form-data">
+<form method="post" action="/cgi-bin/koha/tools/upload-cover-image.pl" id="uploadfile" enctype="multipart/form-data">
 <fieldset class="rows" id="uploadform">
 <legend>Upload images</legend>
 <ol>
@@ -104,8 +102,8 @@ $(document).ready(function(){
 </fieldset>
 
     <div id="uploadpanel">
-        <div id="fileuploadstatus">Upload progress:
-            <progress min="0" max="100" value="0" id="fileuploadprogress">
+        <div id="fileuploadstatus" class="progress_panel">Upload progress:
+            <progress max="100" value="0" id="fileuploadprogress">
             </progress>
             <span class="fileuploadpercent">0</span>%
         </div>
@@ -113,7 +111,7 @@ $(document).ready(function(){
     </div>
 </form>
 
-    <form method="post" id="processfile" action="[% SCRIPT_NAME %]" enctype="multipart/form-data">
+    <form method="post" id="processfile" action="/cgi-bin/koha/tools/upload-cover-image.pl" enctype="multipart/form-data">
 <fieldset class="rows">
         <input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
         <input type="hidden" name="runinbackground" id="runinbackground" value="" />
@@ -128,7 +126,7 @@ $(document).ready(function(){
       </li>
       <li class="radio">
         [% IF (filetype == 'image' ) %]<input type="radio" id="image" name="filetype" value="image" checked="checked" />[% ELSE %]<input type="radio" id="image" name="filetype" value="image" />[% END %]
-        <label for="imagefile">Image file</label>
+        <label for="image">Image file</label>
       </li>
       <li class="radio">
         [% IF ( filetype == 'image' ) %]<span id="bibnum">[% ELSE %]<span id="bibnum" style="display: none">[% END %]<label for="biblionumber">Enter cover biblionumber: </label><input type="text" id="biblionumber" name="biblionumber" value="[% biblionumber %]" size="15" /></span>
@@ -145,10 +143,6 @@ $(document).ready(function(){
     </ol>
   </fieldset>
   <fieldset class="action"><input type="submit" value="Process images" /></fieldset>
-
-       <div id="jobpanel"><div id="jobstatus">Job progress: <div id="jobprogress"></div> <span id="jobprogresspercent">0</span>%</div>
-     <div id="jobfailed"></div></div>
-
 </form>
 
 </div>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload.tt
index b185206551..1c0df4fcf8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload.tt
@@ -81,7 +81,7 @@
         </fieldset>
         </fieldset>
         <div id="fileuploadpanel">
-            <div id="fileuploadstatus">Upload progress:
+            <div id="fileuploadstatus" class="progress_panel">Upload progress:
             <progress id="fileuploadprogress" max="100" value="0">
             </progress>
             <span class="fileuploadpercent">0</span>%
-- 
2.39.5