From 26eec66f89b87dfff1f977069f44fa5c86254a68 Mon Sep 17 00:00:00 2001 From: WerWolv Date: Thu, 1 Feb 2024 10:18:54 +0100 Subject: [PATCH] web: Make progress bar prettier --- dist/web/source/index.html | 62 +++++++++++++++++++--------------- dist/web/source/style.css | 41 ++++++++++++++++++++++ dist/web/source/wasm-config.js | 47 ++++++++++++++------------ 3 files changed, 101 insertions(+), 49 deletions(-) diff --git a/dist/web/source/index.html b/dist/web/source/index.html index a981d8311..7e925cd37 100644 --- a/dist/web/source/index.html +++ b/dist/web/source/index.html @@ -61,38 +61,44 @@ -
- -

A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.

-

Available both natively and on the web

-
ImHex runs directly in your web browser with the help of Emscripten and WebAssembly.
+
+ +

A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.

+

Available both natively and on the web

+
ImHex runs directly in your web browser with the help of Emscripten and WebAssembly.
-
-
-

- Not loading in your Browser? Try the native version -

-

-
-
- -
-
-
- -
-
- -
- Homepage -

Made with ♥️ by the ImHex Team

- GitHub +
+
+

+ Not loading in your Browser? Try the native version +

+
+
+
+
+
- - - + +
+
+
+ +
+
+ +
+ Homepage +

Made with ♥️ by the ImHex Team

+ GitHub +
+
+ + + + + \ No newline at end of file diff --git a/dist/web/source/style.css b/dist/web/source/style.css index bd0a53222..05048d6d9 100644 --- a/dist/web/source/style.css +++ b/dist/web/source/style.css @@ -132,4 +132,45 @@ a:hover { height: 72px; opacity: 0; } +} + + +:root { + --progress: 25%; +} + +.progress-bar-container { + margin: 100px auto; + width: 600px; + text-align: center; +} + +.progress { + padding: 6px; + border-radius: 30px; + background: rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), + 0 1px rgba(255, 255, 255, 0.08); +} + +.progress-bar { + color: rgba(240, 240, 240, 0.9); + height: 18px; + border-radius: 30px; + font-size: 13px; + font-family: monospace; + font-weight: bold; + text-wrap: avoid; + white-space: nowrap; + overflow: hidden; + background-image: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.2), + rgba(255, 255, 255, 0.0) + ); +} + +.progress-moved .progress-bar { + width: var(--progress); + background-color: #3864cb; } \ No newline at end of file diff --git a/dist/web/source/wasm-config.js b/dist/web/source/wasm-config.js index 31ae5e4aa..caa16107b 100644 --- a/dist/web/source/wasm-config.js +++ b/dist/web/source/wasm-config.js @@ -7,25 +7,26 @@ function monkeyPatch(progressFun) { new URL(response.url).origin.length + 1 ); const reportingResponse = new Response( - new ReadableStream({ - async start(controller) { - const contentLength = response.headers.get("content-length"); - const total = parseInt(contentLength, 10); - const reader = response.clone().body.getReader(); - let loaded = 0; - for (; ;) { - const { done, value } = await reader.read(); - if (done) { - progressFun(file, total, total); - break; + new ReadableStream( + { + async start(controller) { + const contentLength = response.headers.get("content-length"); + const total = parseInt(contentLength, 10); + const reader = response.clone().body.getReader(); + let loaded = 0; + for (; ;) { + const { done, value } = await reader.read(); + if (done) { + progressFun(file, total, total); + break; + } + loaded += value.byteLength; + progressFun(file, loaded, total); + controller.enqueue(value); } - loaded += value.byteLength; - progressFun(file, loaded, total); - controller.enqueue(value); + controller.close(); } - controller.close(); - } - }, + }, { status: response.status, statusText: response.statusText @@ -39,10 +40,14 @@ function monkeyPatch(progressFun) { return _instantiateStreaming(reportingResponse, ...args); } } -monkeyPatch((file, done, total) => { - let percent = ((done/total)*100).toFixed(2); - let mib = (done/1024**2).toFixed(2); - document.getElementById("progress").innerHTML = `Downloading: ${percent}% (${mib}MiB)`; +monkeyPatch((file, done, total) => { + let percent = ((done / total) * 100).toFixed(0); + let mibNow = (done / 1024**2).toFixed(1); + let mibTotal = (total / 1024**2).toFixed(1); + + let root = document.querySelector(':root'); + root.style.setProperty("--progress", `${percent}%`) + document.getElementById("progress-bar-content").innerHTML = `${percent}%  [${mibNow} MiB / ${mibTotal} MiB]`; }); function glfwSetCursorCustom(wnd, shape) {