Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added old loading icon back for initial page load.

This commit is contained in:
n1474335 2019-01-16 12:29:34 +00:00 committed by s2224834
parent 02b9dbdee9
commit 87e956fe7d
7 changed files with 69 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/web/App.mjs
View File

@ -124,6 +124,9 @@ class App {
// Reset attemptHighlight flag // Reset attemptHighlight flag
this.options.attemptHighlight = true; this.options.attemptHighlight = true;
// Remove all current indicators
this.manager.recipe.updateBreakpointIndicator(false);
this.manager.worker.bake( this.manager.worker.bake(
this.getInput(), // The user's input this.getInput(), // The user's input
this.getRecipeConfig(), // The configuration of the recipe this.getRecipeConfig(), // The configuration of the recipe

13
src/web/OutputWaiter.mjs
View File

@ -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() { saveBombe() {
this.bombeEl = document.getElementById("bombe").cloneNode(); this.bombeEl = document.getElementById("bombe");
this.bombeEl.setAttribute("width", "100%"); this.bombeEl.parentNode.removeChild(this.bombeEl);
this.bombeEl.setAttribute("height", "100%");
} }
@ -358,7 +357,7 @@ class OutputWaiter {
const outputLoader = document.getElementById("output-loader"), const outputLoader = document.getElementById("output-loader"),
outputElement = document.getElementById("output-text"), outputElement = document.getElementById("output-text"),
loader = outputLoader.querySelector(".loader"); animation = document.getElementById("output-loader-animation");
if (value) { if (value) {
this.manager.controls.hideStaleIndicator(); 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 // Start a timer to add the Bombe to the DOM just before we make it
// visible so that there is no stuttering // visible so that there is no stuttering
this.appendBombeTimeout = setTimeout(function() { this.appendBombeTimeout = setTimeout(function() {
loader.appendChild(this.bombeEl); animation.appendChild(this.bombeEl);
}.bind(this), 150); }.bind(this), 150);
// Show the loading screen // Show the loading screen
@ -380,7 +379,7 @@ class OutputWaiter {
// Remove the Bombe from the DOM to save resources // Remove the Bombe from the DOM to save resources
this.outputLoaderTimeout = setTimeout(function () { this.outputLoaderTimeout = setTimeout(function () {
try { try {
loader.removeChild(this.bombeEl); animation.removeChild(this.bombeEl);
} catch (err) {} } catch (err) {}
}.bind(this), 500); }.bind(this), 500);
outputElement.disabled = false; outputElement.disabled = false;

3
src/web/RecipeWaiter.mjs
View File

@ -340,10 +340,11 @@ class RecipeWaiter {
/** /**
* Moves or removes the breakpoint indicator in the recipe based on the position. * 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) { updateBreakpointIndicator(position) {
const operations = document.querySelectorAll("#rec-list li.operation"); const operations = document.querySelectorAll("#rec-list li.operation");
if (typeof position === "boolean") position = operations.length;
for (let i = 0; i < operations.length; i++) { for (let i = 0; i < operations.length; i++) {
if (i === position) { if (i === position) {
operations[i].classList.add("break"); operations[i].classList.add("break");

8
src/web/html/index.html
View File

@ -142,9 +142,7 @@
<body> <body>
<!-- Preloader overlay --> <!-- Preloader overlay -->
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="preloader" class="loader"> <div id="preloader" class="loader"></div>
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="400"></object>
</div>
<div id="preloader-msg" class="loading-msg"></div> <div id="preloader-msg" class="loading-msg"></div>
<div id="preloader-error" class="loading-error"></div> <div id="preloader-error" class="loading-error"></div>
</div> </div>
@ -321,7 +319,9 @@
</div> </div>
</div> </div>
<div id="output-loader"> <div id="output-loader">
<div class="loader"></div> <div id="output-loader-animation">
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
</div>
<div class="loading-msg"></div> <div class="loading-msg"></div>
</div> </div>
</div> </div>

4
src/web/static/images/bombe.svg
View File

@ -56,13 +56,13 @@
</script> </script>
<style> <style>
.row0 {--primary-color: #e5d41b;} .row0 {--primary-color: #e5d41b;}
.row1 {--primary-color: #BE1E2D;} .row1 {--primary-color: #be1e2d;}
.row2 {--primary-color: #337f24;} .row2 {--primary-color: #337f24;}
</style> </style>
<symbol id="rotor"> <symbol id="rotor">
<g transform="scale(0.1)"> <g transform="scale(0.1)">
<circle id="casing" class="ring-color" style="fill: var(--primary-color, #BE1E2D)" cx="692" cy="674" r="505"/> <circle id="casing" class="ring-color" style="fill: var(--primary-color, #be1e2d)" cx="692" cy="674" r="505"/>
<circle id="alphabet-ring" fill="#7a5340" cx="692" cy="674" r="477"/> <circle id="alphabet-ring" fill="#7a5340" cx="692" cy="674" r="477"/>
<circle id="face" fill="#412612" cx="692" cy="674" r="412"/> <circle id="face" fill="#412612" cx="692" cy="674" r="412"/>
<circle id="plate" fill="#F1F2F2" cx="692" cy="674" r="185"/> <circle id="plate" fill="#F1F2F2" cx="692" cy="674" r="185"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

6
src/web/stylesheets/layout/_io.css
View File

@ -80,11 +80,13 @@
transition: all 0.5s ease; transition: all 0.5s ease;
} }
#output-loader .loader { #output-loader-animation {
display: block;
position: absolute;
width: 60%; width: 60%;
height: 60%; height: 60%;
left: unset;
top: 10%; top: 10%;
transition: all 0.5s ease;
} }
#output-loader .loading-msg { #output-loader .loading-msg {

58
src/web/stylesheets/preloader.css
View File

@ -16,25 +16,54 @@
background-color: var(--secondary-border-colour); background-color: var(--secondary-border-colour);
} }
#loader-wrapper div {
animation: fadeIn 1s ease-in 0s;
}
.loader { .loader {
display: block; 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; position: absolute;
left: calc(50% - 200px); border: 3px solid transparent;
top: calc(50% - 160px); border-radius: 50%;
width: 400px; }
height: 260px;
.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 { .loading-msg {
display: block; display: block;
position: absolute; position: relative;
width: 400px; width: 400px;
left: calc(50% - 200px); left: calc(50% - 200px);
top: calc(50% + 110px); top: calc(50% + 50px);
text-align: center; text-align: center;
opacity: 0; opacity: 0;
font-size: 18px; font-size: 18px;
@ -116,6 +145,15 @@
/* Animations */ /* Animations */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bump { @keyframes bump {
from { from {
opacity: 0; opacity: 0;