mirror of https://github.com/gchq/CyberChef.git
Improved magic and staleness indicator animations
This commit is contained in:
n1474335
parent
541e4ff8cd
commit
33b2fd8d69
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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!");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue