Mirror/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2024-11-02 14:11:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improved magic and staleness indicator animations

Browse Source
This commit is contained in:
n1474335 2018-07-27 15:18:08 +00:00
parent 541e4ff8cd
commit 33b2fd8d69
7 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/web/App.mjs
View File

@ -183,9 +183,10 @@ class App {
* Sets the user's input data.
*
* @param {string} input - The string to set the input to
* @param {boolean} [silent=false] - Suppress statechange event
*/
setInput(input) {
this.manager.input.set(input);
setInput(input, silent=false) {
this.manager.input.set(input, silent);
}
@ -419,12 +420,12 @@ class App {
if (this.uriParams.input) {
try {
const inputData = fromBase64(this.uriParams.input);
this.setInput(inputData);
this.setInput(inputData, true);
} catch (err) {}
}
this.autoBakePause = false;
this.autoBake();
window.dispatchEvent(this.manager.statechange);
}
@ -504,6 +505,7 @@ class App {
resetLayout() {
this.columnSplitter.setSizes([20, 30, 50]);
this.ioSplitter.setSizes([50, 50]);
this.manager.recipe.adjustWidth();
}

8
src/web/ControlsWaiter.mjs
View File

@ -355,9 +355,7 @@ ${navigator.userAgent}
*/
showStaleIndicator() {
const staleIndicator = document.getElementById("stale-indicator");
staleIndicator.style.visibility = "visible";
staleIndicator.style.opacity = 1;
staleIndicator.classList.remove("hidden");
}
@ -367,9 +365,7 @@ ${navigator.userAgent}
*/
hideStaleIndicator() {
const staleIndicator = document.getElementById("stale-indicator");
staleIndicator.style.opacity = 0;
staleIndicator.style.visibility = "hidden";
staleIndicator.classList.add("hidden");
}

5
src/web/InputWaiter.mjs
View File

@ -60,10 +60,11 @@ class InputWaiter {
* Sets the input in the input area.
*
* @param {string|File} input
* @param {boolean} [silent=false] - Suppress statechange event
*
* @fires Manager#statechange
*/
set(input) {
set(input, silent=false) {
const inputText = document.getElementById("input-text");
if (input instanceof File) {
this.setFile(input);
@ -72,7 +73,7 @@ class InputWaiter {
} else {
inputText.value = input;
this.closeFile();
window.dispatchEvent(this.manager.statechange);
if (!silent) window.dispatchEvent(this.manager.statechange);
const lines = input.length < (this.app.options.ioDisplayThreshold * 1024) ?
input.count("\n") + 1 : null;
this.setInputInfo(input.length, lines);

10
src/web/OutputWaiter.mjs
View File

@ -447,8 +447,6 @@ class OutputWaiter {
const recipeURL = "#recipe=" + Utils.encodeURIFragment(Utils.generatePrettyRecipe(newRecipeConfig));
const opSequence = options[0].recipe.map(o => o.op).join(", ");
log.log(`Running <a href="${recipeURL}">${opSequence}</a> will result in "${Utils.truncate(options[0].data, 20)}"`);
this.showMagicButton(opSequence, options[0].data, newRecipeConfig);
}
@ -477,10 +475,9 @@ class OutputWaiter {
*/
showMagicButton(opSequence, result, recipeConfig) {
const magicButton = document.getElementById("magic");
magicButton.setAttribute("data-original-title", `Running <i>${opSequence}</i> will result in "${Utils.truncate(result, 20)}"`);
magicButton.setAttribute("data-original-title", `Running <i>${opSequence}</i> will result in <span class="data-text">"${Utils.truncate(result, 30)}"</span>`);
magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
magicButton.style.visibility = "visible";
magicButton.style.opacity = 1;
magicButton.classList.remove("hidden");
}
@ -489,8 +486,7 @@ class OutputWaiter {
*/
hideMagicButton() {
const magicButton = document.getElementById("magic");
magicButton.style.visibility = "hidden";
magicButton.style.opacity = 0;
magicButton.classList.add("hidden");
magicButton.setAttribute("data-recipe", "");
magicButton.setAttribute("data-original-title", "Magic!");
}

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

@ -278,12 +278,12 @@
</span>
<div class="io-info" id="output-info"></div>
<div class="io-info" id="output-selection-info"></div>
<button type="button" class="btn btn-primary bmd-btn-icon" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
<button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
<svg width="22" height="22" viewBox="0 0 24 24">
<path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
</svg>
</button>
<span id="stale-indicator" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
<span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
<i class="material-icons">access_time</i>
</span>
</div>

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

@ -126,8 +126,9 @@
}
#stale-indicator {
visibility: hidden;
transition: all 0.3s;
opacity: 1;
visibility: visibile;
transition: margin 0s, opacity 0.3s;
margin-left: 5px;
cursor: help;
}
@ -148,12 +149,24 @@
}
#magic {
visibility: hidden;
transition: all 0.3s;
opacity: 1;
visibility: visibile;
transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
margin-left: 5px;
margin-bottom: 5px;
}
#magic.hidden,
#stale-indicator.hidden {
visibility: hidden;
transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
opacity: 0;
}
#magic.hidden {
margin-left: -32px;
}
#magic svg path {
fill: var(--primary-font-colour);
}

4
src/web/stylesheets/utils/_general.css
View File

@ -20,6 +20,10 @@ body {
color: var(--subtext-font-colour);
}
.data-text {
font-family: var(--fixed-width-font-family);
}
.word-wrap {
white-space: pre !important;
word-wrap: normal !important;