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

Replaced Bootstrap alert with Material Design snackbar

This commit is contained in:
n1474335 2018-06-20 00:18:59 +01:00
parent 67dffbec32
commit 4338e2626b
13 changed files with 2227 additions and 2288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4393
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -111,6 +111,7 @@
"otp": "^0.1.3",
"popper.js": "^1.12.9",
"scryptsy": "^2.0.0",
"snackbarjs": "^1.1.0",
"sortablejs": "^1.7.0",
"split.js": "^1.3.5",
"ssdeep.js": "0.0.2",

76
src/web/App.mjs
View File

@ -105,7 +105,7 @@ class App {
handleError(err, logToConsole) {
if (logToConsole) log.error(err);
const msg = err.displayStr || err.toString();
this.alert(msg, "danger", this.options.errorTimeout, !this.options.showErrors);
this.alert(msg, this.options.errorTimeout, !this.options.showErrors);
}
@ -319,8 +319,8 @@ class App {
if (this.operations.hasOwnProperty(favourites[i])) {
validFavs.push(favourites[i]);
} else {
this.alert("The operation \"" + Utils.escapeHtml(favourites[i]) +
"\" is no longer available. It has been removed from your favourites.", "info");
this.alert(`The operation "${Utils.escapeHtml(favourites[i])}" is no longer available. ` +
"It has been removed from your favourites.");
}
}
return validFavs;
@ -336,7 +336,6 @@ class App {
if (!this.isLocalStorageAvailable()) {
this.alert(
"Your security settings do not allow access to local storage so your favourites cannot be saved.",
"danger",
5000
);
return false;
@ -367,7 +366,7 @@ class App {
const favourites = JSON.parse(localStorage.favourites);
if (favourites.indexOf(name) >= 0) {
this.alert("'" + name + "' is already in your favourites", "info", 2000);
this.alert(`'${name}' is already in your favourites`, 3000);
return;
}
@ -556,63 +555,35 @@ class App {
* Pops up a message to the user and writes it to the console log.
*
* @param {string} str - The message to display (HTML supported)
* @param {string} style - The colour of the popup
* "danger" = red
* "warning" = amber
* "info" = blue
* "success" = green
* @param {number} timeout - The number of milliseconds before the popup closes automatically
* @param {number} timeout - The number of milliseconds before the alert closes automatically
* 0 for never (until the user closes it)
* @param {boolean} [silent=false] - Don't show the message in the popup, only print it to the
* console
*
* @example
* // Pops up a red box with the message "[current time] Error: Something has gone wrong!"
* // that will need to be dismissed by the user.
* this.alert("Error: Something has gone wrong!", "danger", 0);
* // Pops up a box with the message "Error: Something has gone wrong!" that will need to be
* // dismissed by the user.
* this.alert("Error: Something has gone wrong!", 0);
*
* // Pops up a blue information box with the message "[current time] Happy Christmas!"
* // that will disappear after 5 seconds.
* this.alert("Happy Christmas!", "info", 5000);
* // Pops up a box with the message "Happy Christmas!" that will disappear after 5 seconds.
* this.alert("Happy Christmas!", 5000);
*/
alert(str, style, timeout, silent) {
alert(str, timeout, silent) {
const time = new Date();
log.info("[" + time.toLocaleString() + "] " + str);
if (silent) return;
style = style || "danger";
timeout = timeout || 0;
const alertEl = document.getElementById("alert"),
alertContent = document.getElementById("alert-content");
alertEl.classList.remove("alert-danger");
alertEl.classList.remove("alert-warning");
alertEl.classList.remove("alert-info");
alertEl.classList.remove("alert-success");
alertEl.classList.add("alert-" + style);
// If the box hasn't been closed, append to it rather than replacing
if (alertEl.style.display === "block") {
alertContent.innerHTML +=
"<br><br>[" + time.toLocaleTimeString() + "] " + str;
} else {
alertContent.innerHTML =
"[" + time.toLocaleTimeString() + "] " + str;
}
// Stop the animation if it is in progress
$("#alert").stop();
alertEl.style.display = "block";
alertEl.style.opacity = 1;
if (timeout > 0) {
clearTimeout(this.alertTimeout);
this.alertTimeout = setTimeout(function(){
$("#alert").slideUp(100);
}, timeout);
}
this.currentSnackbar = $.snackbar({
content: str,
timeout: timeout,
htmlAllowed: true,
onClose: () => {
this.currentSnackbar.remove();
}
});
}
@ -653,15 +624,6 @@ class App {
}
/**
* Handler for the alert close button click event.
* Closes the alert box.
*/
alertCloseClick() {
document.getElementById("alert").style.display = "none";
}
/**
* Handler for CyerChef statechange events.
* Fires whenever the input or recipe changes in any way.

7
src/web/ControlsWaiter.mjs
View File

@ -211,7 +211,6 @@ class ControlsWaiter {
if (!this.app.isLocalStorageAvailable()) {
this.app.alert(
"Your security settings do not allow access to local storage so your recipe cannot be saved.",
"danger",
5000
);
return false;
@ -221,7 +220,7 @@ class ControlsWaiter {
const recipeStr = document.querySelector("#save-texts .tab-pane.active textarea").value;
if (!recipeName) {
this.app.alert("Please enter a recipe name", "danger", 2000);
this.app.alert("Please enter a recipe name", 3000);
return;
}
@ -238,7 +237,7 @@ class ControlsWaiter {
localStorage.savedRecipes = JSON.stringify(savedRecipes);
localStorage.recipeId = recipeId;
this.app.alert("Recipe saved as \"" + recipeName + "\".", "success", 2000);
this.app.alert(`Recipe saved as "${recipeName}".`, 3000);
}
@ -322,7 +321,7 @@ class ControlsWaiter {
$("#rec-list [data-toggle=popover]").popover();
} catch (e) {
this.app.alert("Invalid recipe", "danger", 2000);
this.app.alert("Invalid recipe", 2000);
}
}

2
src/web/InputWaiter.mjs
View File

@ -264,7 +264,7 @@ class InputWaiter {
}
if (r.hasOwnProperty("error")) {
this.app.alert(r.error, "danger", 10000);
this.app.alert(r.error, 10000);
}
if (r.hasOwnProperty("fileBuffer")) {

1
src/web/Manager.mjs
View File

@ -183,7 +183,6 @@ class Manager {
// Misc
window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));
document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
}

4
src/web/OutputWaiter.mjs
View File

@ -267,9 +267,9 @@ class OutputWaiter {
}
if (success) {
this.app.alert("Copied raw output successfully.", "success", 2000);
this.app.alert("Copied raw output successfully.", 2000);
} else {
this.app.alert("Sorry, the output could not be copied.", "danger", 2000);
this.app.alert("Sorry, the output could not be copied.", 3000);
}
// Clean up

2
src/web/RecipeWaiter.mjs
View File

@ -372,7 +372,7 @@ class RecipeWaiter {
// Disable auto-bake if this is a manual op
if (op.manualBake && this.app.autoBake_) {
this.manager.controls.setAutoBake(false);
this.app.alert("Auto-Bake is disabled by default when using this operation.", "info", 5000);
this.app.alert("Auto-Bake is disabled by default when using this operation.", 5000);
}
}

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

@ -146,10 +146,6 @@
<button type="button" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
<i class="material-icons">star</i>
</button>
<div id="alert" class="alert alert-danger">
<button type="button" class="close" id="alert-close">&times;</button>
<span id="alert-content"></span>
</div>
<div id="content-wrapper">
<div id="banner" class="row">
<div class="col" style="text-align: left; padding-left: 10px;">

1
src/web/index.js
View File

@ -10,6 +10,7 @@ import "./stylesheets/index.js";
// Libs
import "babel-polyfill";
import "arrive";
import "snackbarjs";
import "bootstrap-material-design";
import "bootstrap-colorpicker";
import moment from "moment-timezone";

22
src/web/stylesheets/components/_alert.css
View File

@ -1,22 +0,0 @@
/**
* Alert styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
#alert {
position: fixed;
width: 30%;
margin: 30px auto;
top: 10px;
left: 0;
right: 0;
z-index: 2000;
display: none;
}
#alert a {
text-decoration: underline;
}

1
src/web/stylesheets/index.css
View File

@ -19,7 +19,6 @@
@import "./preloader.css";
/* Components */
@import "./components/_alert.css";
@import "./components/_button.css";
@import "./components/_list.css";
@import "./components/_operation.css";

1
src/web/stylesheets/utils/_overrides.css
View File

@ -90,7 +90,6 @@ a:focus {
.nav-tabs>li>a,
.form-control,
.popover,
.alert,
.panel,
.modal-content,
.tooltip-inner,