[1.7.0rc2] Delete timelapse progress label is not placed properly

[The-EG]

The problem

One of the labels on the Delete Timelapses progress bar isn't placed properly:

It looks like it's the 'front' label that isn't centered:

Did the issue persist even in safe mode?

Yes, it did persist

If you could not test in safe mode, please state why

No response

Version of OctoPrint

1.7.0rc2

Operating system running OctoPrint

Raspberry Pi OS

Printer model & used firmware incl. version

No response

Browser and version of browser, operating system running browser

Waterfox G3.2.4.1

Checklist of files to include below

• Systeminfo Bundle (always include!)
• Contents of the JavaScript browser console (always include in cases of issues with the user interface)
• Screenshots and/or videos showing the problem (always include in case of issues with the user interface)
• GCODE file with which to reproduce (always include in case of issues with GCODE analysis or printing behaviour)

Additional information & file uploads

octoprint-systeminfo-20210812075555.zip

No errors or additional output in the javascript console:

[cp2004]

Was as a result of #4105, the JavaScript progress modal component needs to be updated in the same way the rest of the progress bars were from what I can see.

OctoPrint/src/octoprint/static/js/app/helpers.js

Lines 998 to 1163 in 19388fc

	/**
	* Shows a progress modal depending on a supplied promise.
	*
	* Will listen to the supplied promise, update the progress on .progress events and
	* enabling the close button and (optionally) closing the dialog on promise resolve.
	*
	* The calling code should call "notify" on the deferred backing the promise and supply:
	*
	* * the text to display on the progress bar and the optional output field and
	* a boolean value indicating whether the operation behind that update was successful or not
	* * a short text to display on the progress bar, a long text to display on the optional output
	* field and a boolean value indicating whether the operation behind that update was
	* successful or not
	*
	* Non-successful progress updates will remove the barClassSuccess class from the progress bar and
	* apply the barClassFailure class and also apply the outputClassFailure to the produced line
	* in the output.
	*
	* To determine the progress, calling code should supply the prognosed maximum number of
	* progress events. An internal counter will increment on each progress event and used together
	* with the max value to calculate the percentage to display on the progress bar.
	*
	* If no max value is set, the progress bar will show a striped animation at 100% fill status
	* to visualize "unknown but ongoing" status.
	*
	* Available options:
	*
	* * title: the title of the modal, defaults to "Progress"
	* * message: the message of the modal, defaults to ""
	* * buttonText: the text on the close button, defaults to "Close"
	* * max: maximum number of expected progress events (when 100% will be reached), defaults
	* to undefined
	* * close: whether to close the dialog on completion, defaults to false
	* * output: whether to display the progress texts in an output field, defaults to false
	* * dialogClass: additional class to apply to the dialog div
	* * barClassSuccess: additional class for the progress bar while all progress events are
	* successful
	* * barClassFailure: additional class for the progress bar when a progress event was
	* unsuccessful
	* * outputClassSuccess: additional class for successful output lines
	* * outputClassFailure: additional class for unsuccessful output lines
	*
	* @param options modal options
	* @param promise promise to monitor
	* @returns {*|jQuery} the modal object
	*/
	function showProgressModal(options, promise) {
	var title = options.title || gettext("Progress");
	var message = options.message || "";
	var buttonText = options.button || gettext("Close");
	var max = options.max || undefined;
	var close = options.close || false;
	var output = options.output || false;
	var dialogClass = options.dialogClass || "";
	var barClassSuccess = options.barClassSuccess || "";
	var barClassFailure = options.barClassFailure || "bar-danger";
	var outputClassSuccess = options.outputClassSuccess || "";
	var outputClassFailure = options.outputClassFailure || "text-error";
	var modalHeader = $("<h3>" + title + "</h3>");
	var paragraph = $("<p>" + message + "</p>");
	var progress = $('<div class="progress progress-text-centered"></div>');
	var progressBar = $('<div class="bar"></div>').addClass(barClassSuccess);
	var progressTextBack = $('<span class="progress-text-back"></span>');
	var progressTextFront = $('<span class="progress-text-front"></span>').width(
	progress.width()
	);
	if (max === undefined) {
	progress.addClass("progress-striped active");
	progressBar.width("100%");
	}
	progressBar.append(progressTextFront);
	progress.append(progressTextBack).append(progressBar);
	var button = $('<button class="btn">' + buttonText + "</button>")
	.prop("disabled", true)
	.attr("data-dismiss", "modal")
	.attr("aria-hidden", "true");
	var modalBody = $("<div></div>")
	.addClass("modal-body")
	.append(paragraph)
	.append(progress);
	var pre;
	if (output) {
	pre = $(
	"<pre class='pre-scrollable pre-output' style='height: 70px; font-size: 0.8em'></pre>"
	);
	modalBody.append(pre);
	}
	var modal = $("<div></div>")
	.addClass("modal hide fade")
	.addClass(dialogClass)
	.append($("<div></div>").addClass("modal-header").append(modalHeader))
	.append(modalBody)
	.append($("<div></div>").addClass("modal-footer").append(button));
	modal.modal({keyboard: false, backdrop: "static", show: true});
	var counter = 0;
	promise
	.progress(function () {
	var short, long, success;
	if (arguments.length === 2) {
	short = long = arguments[0];
	success = arguments[1];
	} else if (arguments.length === 3) {
	short = arguments[0];
	long = arguments[1];
	success = arguments[2];
	} else {
	throw Error(
	"Invalid parameters for showProgressModal, expected either (text, success) or (short, long, success)"
	);
	}
	var value;
	if (max === undefined || max <= 0) {
	value = 100;
	} else {
	counter++;
	value = Math.max(Math.min((counter * 100) / max, 100), 0);
	}
	// update progress bar
	progressBar.width(String(value) + "%");
	progressTextFront.text(short);
	progressTextBack.text(short);
	progressTextFront.width(progress.width());
	// if not successful, apply failure class
	if (!success && !progressBar.hasClass(barClassFailure)) {
	progressBar.removeClass(barClassSuccess).addClass(barClassFailure);
	}
	if (output && pre) {
	if (success) {
	pre.append(
	$("<span class='" + outputClassSuccess + "'>" + long + "</span>")
	);
	} else {
	pre.append(
	$("<span class='" + outputClassFailure + "'>" + long + "</span>")
	);
	}
	pre.scrollTop(pre[0].scrollHeight - pre.height());
	}
	})
	.done(function () {
	button.prop("disabled", false);
	if (close) {
	modal.modal("hide");
	}
	})
	.fail(function () {
	button.prop("disabled", false);
	});
	return modal;
	}

[foosel]

Fix ready for 1.7.0rc3.