Attachment 53436 Details for Bug 16538 – Bug 16538: Improve the style of progress bars

[patch] Bug 16538: Improve the style of progress bars

Bug-16538-Improve-the-style-of-progress-bars.patch (text/plain), 16.18 KB, created by Jonathan Druart on 2016-07-15 14:09:57 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Jonathan Druart

Created: 2016-07-15 14:09:57 UTC

Size: 16.18 KB

patch

obsolete

>From f62df1bc1add6f4493b1e42361287681ea95e9dd 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>
>---
> koha-tmpl/intranet-tmpl/prog/css/staff-global.css  | 24 +++++++++++++++++++++-
> .../prog/en/modules/offline_circ/process_koc.tt    |  6 +-----
> .../prog/en/modules/tools/batchMod-del.tt          | 13 ++++--------
> .../prog/en/modules/tools/batchMod-edit.tt         |  2 +-
> .../en/modules/tools/batch_record_modification.tt  |  2 +-
> .../prog/en/modules/tools/manage-marc-import.tt    |  6 ++----
> .../prog/en/modules/tools/stage-marc-import.tt     |  8 +++-----
> .../prog/en/modules/tools/upload-images.tt         | 16 +++++----------
> .../intranet-tmpl/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 d2db82e..525cd0e 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 a126288..01275e0 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 e339e3a..8014d9e 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 c673ac9..7432604 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 a724c36..2d7d534 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 e1119d1..a8a9572 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 529edd5..45aeac9 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 4fa8092..a1300fc 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 b185206..1c0df4f 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.8.1

Actions: View | Diff | Splinter Review

Attachments on bug 16538: 51581 | 51582 | 51583 | 53389 | 53401 | 53436