fix(ui): improve progress-step visibility and sticky header layout (77ab2c21) · Commits · e / devices / eOS Installer

app/index.html

+4 −4

Original line number	Diff line number	Diff line
		@@ -376,7 +376,7 @@
		></p>
		</div>
		</div>
		<div id="downloading" class="card inactive">
		<div id="downloading" class="card inactive flashing">
		<div class="card-header" data-translate="download-eos"></div>
		<div class="card-body">
		<p data-translate="this-might-take-some-time-please-be-patient"></p>
		@@ -394,7 +394,7 @@
		<input class="local-zip-input" type="file" accept=".zip" hidden />
		<p class="local-zip-error" style="display: none; color: red"></p>
		</div>
		<div class="text-center large-padding">
		<div class="download-progress-area text-center large-padding">
		<p class="downloading-progress"></p>
		<progress class="downloading-progress-bar" max="100"></progress>
		<p
		@@ -672,7 +672,7 @@
		<div class="card-header" data-translate="installing"></div>
		<div class="card-body">
		<p data-translate="this-might-take-some-time-please-be-patient"></p>
		<div class="text-center large-padding">
		<div class="install-progress-area text-center large-padding">
		<p class="installing-progress"></p>
		<progress class="installing-progress-bar" max="100"></progress>
		</div>
		@@ -754,7 +754,7 @@
		<div class="card-header" data-translate="sideload"></div>
		<div class="card-body">
		<p data-translate="this-might-take-some-time-please-be-patient"></p>
		<div class="text-center large-padding">
		<div class="install-progress-area text-center large-padding">
		<p class="installing-progress"></p>
		<progress class="installing-progress-bar" max="100"></progress>
		</div>

app/public/css/styles.css

+3 −1

Original line number	Diff line number	Diff line
		@@ -34,6 +34,8 @@ button.next:disabled {
		top: 0;
		position: fixed;
		width: 100%;
		z-index: 1200;
		background: var(--white);
		}
		#top-banner {
		background: var(--top-banner-color);
		@@ -113,7 +115,7 @@ button.next:disabled {
		/* <header> */
		/* <card> */
		.card {
		scroll-margin-top: 65px;
		scroll-margin-top: 140px;
		box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.1),
		0 1px 2px -1px rgba(0, 0, 0, 0.1);

app/src/viewManager.js

+25 −12

Original line number	Diff line number	Diff line
		@@ -39,18 +39,22 @@ export default class ViewManager {
		if (step.name === "downloading") {
		const progressArea = $copyStep.querySelector(".download-progress-area");
		const actions = $copyStep.querySelector(".download-actions");
		if (this.downloadChoiceEnabled) {
		if (progressArea) {
		progressArea.style.display = "none";
		}
		if (this.downloadChoiceEnabled) {
		this.bindDownloadChoice($copyStep, step);
		} else {
		if (actions) {
		actions.style.display = "none";
		}
		if (progressArea) {
		progressArea.style.display = "block";
		}
		} else if ($copyStep.classList.contains("flashing")) {
		const installProgressArea = $copyStep.querySelector(
		".install-progress-area",
		);
		if (installProgressArea) {
		installProgressArea.style.display = "none";
		}
		} else {
		const $button = $copyStep.querySelector("button");
		@@ -122,9 +126,10 @@ export default class ViewManager {
		const $currentStep = document.getElementById(currentStep.id);
		if ($currentStep) {
		const $button = $currentStep.getElementsByClassName("next");
		const shouldRenderCheck = !$currentStep.classList.contains("flashing");
		if ($button[0] && shouldRenderCheck) {
		const $check = document.createElement("IMG");
		$check.src = "assets/images/icons/check.svg";
		if ($button[0]) {
		$button[0].replaceWith($check);
		}

		@@ -203,6 +208,7 @@ export default class ViewManager {
		this.WDebug.log(`Unzipping ${name}: ${v}/${100}`, `Unzipping-${name}`);
		}
		onDownloadingEnd() {
		this.showProgressAreaIfHidden();
		let $progressBar = document.querySelector(
		`.active .downloading-progress-bar`,
		);
		@@ -232,6 +238,7 @@ export default class ViewManager {
		}

		async onInstalling(name, loaded, total) {
		this.showInstallProgressAreaIfHidden();
		const v = Math.round((loaded / total) * 100);
		let $progressBar = document.querySelector(
		`.active .installing-progress-bar`,
		@@ -267,7 +274,6 @@ export default class ViewManager {
		const localBtn = $copyStep.querySelector(".use-local-zip-button");
		const fileInput = $copyStep.querySelector(".local-zip-input");
		const errorEl = $copyStep.querySelector(".local-zip-error");
		const progressArea = $copyStep.querySelector(".download-progress-area");
		const progressBar = $copyStep.querySelector(".downloading-progress-bar");
		const progressText = $copyStep.querySelector(".downloading-progress");

		@@ -279,7 +285,6 @@ export default class ViewManager {
		errorEl.innerText = "";
		}
		this.controller.clearLocalZip();
		this.showProgressAreaIfHidden(progressArea);
		if (progressBar) {
		progressBar.value = 0;
		progressBar.classList.remove("success");
		@@ -319,7 +324,6 @@ export default class ViewManager {
		errorEl.style.display = "none";
		errorEl.innerText = "";
		}
		this.showProgressAreaIfHidden(progressArea);
		if (progressBar) {
		progressBar.value = 0;
		progressBar.classList.remove("success");
		@@ -341,6 +345,15 @@ export default class ViewManager {
		area.style.display = "block";
		}
		}

		showInstallProgressAreaIfHidden(progressAreaOverride) {
		const area =
		progressAreaOverride \|\|
		document.querySelector(".active .install-progress-area");
		if (area && area.style.display === "none") {
		area.style.display = "block";
		}
		}
		}

		document.addEventListener("DOMContentLoaded", async () => {