Replaced Bootstrap alert with Material Design snackbar
parent
67dffbec32
commit
4338e2626b
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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")) {
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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">×</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;">
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -19,7 +19,6 @@
|
|||
@import "./preloader.css";
|
||||
|
||||
/* Components */
|
||||
@import "./components/_alert.css";
|
||||
@import "./components/_button.css";
|
||||
@import "./components/_list.css";
|
||||
@import "./components/_operation.css";
|
||||
|
|
|
@ -90,7 +90,6 @@ a:focus {
|
|||
.nav-tabs>li>a,
|
||||
.form-control,
|
||||
.popover,
|
||||
.alert,
|
||||
.panel,
|
||||
.modal-content,
|
||||
.tooltip-inner,
|
||||
|
|
Loading…
Reference in New Issue