From 87e956fe7df28bb82c0c57e01044154d0eea9996 Mon Sep 17 00:00:00 2001 From: n1474335 Date: Wed, 16 Jan 2019 12:29:34 +0000 Subject: [PATCH] Added old loading icon back for initial page load. --- src/web/App.mjs | 3 ++ src/web/OutputWaiter.mjs | 13 ++++--- src/web/RecipeWaiter.mjs | 3 +- src/web/html/index.html | 8 ++--- src/web/static/images/bombe.svg | 4 +-- src/web/stylesheets/layout/_io.css | 6 ++-- src/web/stylesheets/preloader.css | 58 ++++++++++++++++++++++++------ 7 files changed, 69 insertions(+), 26 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 453fba22..e203b85c 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -124,6 +124,9 @@ class App { // Reset attemptHighlight flag this.options.attemptHighlight = true; + // Remove all current indicators + this.manager.recipe.updateBreakpointIndicator(false); + this.manager.worker.bake( this.getInput(), // The user's input this.getRecipeConfig(), // The configuration of the recipe diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index 39d6e51b..5e7ae7e8 100755 --- a/src/web/OutputWaiter.mjs +++ b/src/web/OutputWaiter.mjs @@ -334,12 +334,11 @@ class OutputWaiter { /** - * Save bombe object before it is removed so that it can be used later + * Save bombe object then remove it from the DOM so that it does not cause performance issues. */ saveBombe() { - this.bombeEl = document.getElementById("bombe").cloneNode(); - this.bombeEl.setAttribute("width", "100%"); - this.bombeEl.setAttribute("height", "100%"); + this.bombeEl = document.getElementById("bombe"); + this.bombeEl.parentNode.removeChild(this.bombeEl); } @@ -358,7 +357,7 @@ class OutputWaiter { const outputLoader = document.getElementById("output-loader"), outputElement = document.getElementById("output-text"), - loader = outputLoader.querySelector(".loader"); + animation = document.getElementById("output-loader-animation"); if (value) { this.manager.controls.hideStaleIndicator(); @@ -366,7 +365,7 @@ class OutputWaiter { // Start a timer to add the Bombe to the DOM just before we make it // visible so that there is no stuttering this.appendBombeTimeout = setTimeout(function() { - loader.appendChild(this.bombeEl); + animation.appendChild(this.bombeEl); }.bind(this), 150); // Show the loading screen @@ -380,7 +379,7 @@ class OutputWaiter { // Remove the Bombe from the DOM to save resources this.outputLoaderTimeout = setTimeout(function () { try { - loader.removeChild(this.bombeEl); + animation.removeChild(this.bombeEl); } catch (err) {} }.bind(this), 500); outputElement.disabled = false; diff --git a/src/web/RecipeWaiter.mjs b/src/web/RecipeWaiter.mjs index b913fede..a8326b27 100755 --- a/src/web/RecipeWaiter.mjs +++ b/src/web/RecipeWaiter.mjs @@ -340,10 +340,11 @@ class RecipeWaiter { /** * Moves or removes the breakpoint indicator in the recipe based on the position. * - * @param {number} position + * @param {number|boolean} position - If boolean, turn off all indicators */ updateBreakpointIndicator(position) { const operations = document.querySelectorAll("#rec-list li.operation"); + if (typeof position === "boolean") position = operations.length; for (let i = 0; i < operations.length; i++) { if (i === position) { operations[i].classList.add("break"); diff --git a/src/web/html/index.html b/src/web/html/index.html index a1f915b6..478d2bb3 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -142,9 +142,7 @@
-
- -
+
@@ -321,7 +319,9 @@
-
+
+ +
diff --git a/src/web/static/images/bombe.svg b/src/web/static/images/bombe.svg index 40857bdf..1fdca842 100644 --- a/src/web/static/images/bombe.svg +++ b/src/web/static/images/bombe.svg @@ -56,13 +56,13 @@ - + diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css index 0a1e4ec4..d4af353f 100755 --- a/src/web/stylesheets/layout/_io.css +++ b/src/web/stylesheets/layout/_io.css @@ -80,11 +80,13 @@ transition: all 0.5s ease; } -#output-loader .loader { +#output-loader-animation { + display: block; + position: absolute; width: 60%; height: 60%; - left: unset; top: 10%; + transition: all 0.5s ease; } #output-loader .loading-msg { diff --git a/src/web/stylesheets/preloader.css b/src/web/stylesheets/preloader.css index bce0cd03..690fe5c1 100755 --- a/src/web/stylesheets/preloader.css +++ b/src/web/stylesheets/preloader.css @@ -16,25 +16,54 @@ background-color: var(--secondary-border-colour); } -#loader-wrapper div { - animation: fadeIn 1s ease-in 0s; -} - .loader { display: block; + position: relative; + left: 50%; + top: 50%; + width: 150px; + height: 150px; + margin: -75px 0 0 -75px; + + border: 3px solid transparent; + border-top-color: #3498db; + border-radius: 50%; + + animation: spin 2s linear infinite; +} + +.loader:before, +.loader:after { + content: ""; position: absolute; - left: calc(50% - 200px); - top: calc(50% - 160px); - width: 400px; - height: 260px; + border: 3px solid transparent; + border-radius: 50%; +} + +.loader:before { + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border-top-color: #e74c3c; + animation: spin 3s linear infinite; +} + +.loader:after { + top: 13px; + left: 13px; + right: 13px; + bottom: 13px; + border-top-color: #f9c922; + animation: spin 1.5s linear infinite; } .loading-msg { display: block; - position: absolute; + position: relative; width: 400px; left: calc(50% - 200px); - top: calc(50% + 110px); + top: calc(50% + 50px); text-align: center; opacity: 0; font-size: 18px; @@ -116,6 +145,15 @@ /* Animations */ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + @keyframes bump { from { opacity: 0;