From b0031977e1982e737f02ca2ff735710b2346c09e Mon Sep 17 00:00:00 2001 From: Phil Ringnalda Date: Fri, 11 Oct 2024 15:54:50 -0700 Subject: [PATCH] Bug 37795: Adjust job-progress.inc for Bootstrap 5 changes Four main changes: The color classes progress-bar-success and progress-bar-danger are now named bg-success and bg-danger. The aria attributes have moved from the progress-bar to the progress wrapper. Having them on the progress-bar is still supported for BS5, but won't be in BS6, so we might as well move them now rather than forgetting to move them later. Having the percentage number in a span, the % symbol in text, and the label for "Not started" "Started" "Finished" "Failed" in another span no longer works because the progress-bar content is in a column flexbox. Just setting all of it at once in the content of the progress-bar works fine. Before, overflow from the label being longer than the progress-bar happened by wrapping the "%" and "Started" invisibly down below the progress-bar. Now it is cropped off by overflow: hidden, so we have to deal with showing "2% Star" rather than showing "2%" and dropping the whole "Started" like we did before. The best solution seems to be making the background of the progress div, which is what shows to the right of the filled part of the progress-bar, a little darker grey so white text is readable if you squint. Test plan: 1. You need enough records to import so that you can at least see a bit of progress before it finishes. Ideally, you would have a file of 10K or so bibs, but with ktd, you can have 400-odd: Cataloging - Export catalog data, change the Output format to XML and the filename to koha.marcxml and export. 2. Cataloging - Stage records for import, Browse to your file, Upload file. Since you named it koha.marcxml, it's recognized as MARCXML and you can just click Stage for import 3. Without the patch, at this point you get an orange full-width bar, with a white "%" in the middle, which doesn't change even after the "View batch" link appears signalling it's done. With the patch, you start with an orange bar labelled "0% Not started" which changes to a green "0.00% Started" that animates too quickly to read to "100% Finished". Right click the bar, Inspect, double-click the "width: 100%" to edit it, click past the 100 and delete the 00 and press Enter to see a static 1%. You should be able to read the "100% Finished" even spread across the green and dark gray, at least by selecting the text if no other way. Sponsored-by: Chetco Community Public Library Signed-off-by: David Nind Signed-off-by: Martin Renvoize Signed-off-by: Katrin Fischer --- .../prog/en/includes/job_progress.inc | 5 ++-- .../prog/en/includes/str/job_progress.inc | 1 + .../intranet-tmpl/prog/js/job_progress.js | 27 +++++++++---------- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc index 14ecb96083..7241ce8348 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc @@ -1,5 +1,4 @@ -
-
- 0% +
+
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc index 7fc7f2a349..7e70975462 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc @@ -4,4 +4,5 @@ var JOB_PROGRESS_STARTED = _("Started"); var JOB_PROGRESS_FINISHED = _("Finished"); var JOB_PROGRESS_FAILED = _("Failed"); + var JOB_PROGRESS_PERCENT = _("%"); diff --git a/koha-tmpl/intranet-tmpl/prog/js/job_progress.js b/koha-tmpl/intranet-tmpl/prog/js/job_progress.js index acd75e3d2a..3ae641dcf8 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/job_progress.js +++ b/koha-tmpl/intranet-tmpl/prog/js/job_progress.js @@ -3,30 +3,29 @@ function updateProgress(job_id, callbacks) { let recheck = true; if ( job.status == "new" ) { - $('#job-percent-' + job_id).text(0); - $('#job-status-' + job_id).text(JOB_PROGRESS_NOT_STARTED); - $('#progress-bar-' + job_id).attr('aria-valuenow', 0).css("width", "100%"); + $('#progress-' + job_id).attr('aria-valuenow', 0); + $('#progress-bar-' + job_id).width("100%"); + $('#progress-bar-' + job_id).text("0" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_NOT_STARTED); } else if ( job.status == "started" ) { const progress = job["progress"]; const size = job["size"]; const percent = progress > 0 ? ( progress / size ) * 100 : 0; - $('#job-percent-' + job_id).text(percent.toFixed(2)); - $('#job-status-' + job_id).text(JOB_PROGRESS_STARTED); - $('#progress-bar-' + job_id).attr('aria-valuenow', percent); + $('#progress-' + job_id).attr('aria-valuenow', percent); $('#progress-bar-' + job_id).width(Math.floor(percent) +"%"); + $('#progress-bar-' + job_id).text(percent.toFixed(2) + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_STARTED); typeof callbacks.progress_callback === 'function' && callbacks.progress_callback(); } else if ( job.status == "finished" ) { - $('#job-percent-' + job_id).text(100); - $('#job-status-' + job_id).text(JOB_PROGRESS_FINISHED); - $('#progress-bar-' + job_id).addClass("progress-bar-success"); - $('#progress-bar-' + job_id).attr('aria-valuenow', 100).css("width", "100%"); + $('#progress-bar-' + job_id).addClass("bg-success"); + $('#progress-' + job_id).attr('aria-valuenow', 100); + $('#progress-bar-' + job_id).css("width", "100%"); + $('#progress-bar-' + job_id).text("100" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_FINISHED); recheck = false; typeof callbacks.finish_callback === 'function' && callbacks.finish_callback(); } else if ( job.status == "failed" ) { - $('#job-percent-' + job_id).text(0); - $('#job-status-' + job_id).text(JOB_PROGRESS_FAILED); - $('#progress-bar-' + job_id).addClass("progress-bar-danger"); - $('#progress-bar-' + job_id).attr('aria-valuenow', 0).css("width", "100%"); + $('#progress-bar-' + job_id).addClass("bg-danger"); + $('#progress' + job_id).attr('aria-valuenow', 0); + $('#progress-bar-' + job_id).css("width", "100%"); + $('#progress-bar-' + job_id).text("0" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_FAILED); recheck = false; } -- 2.39.5