diff --git a/src/web/App.mjs b/src/web/App.mjs
index 60491ef4..606b2aff 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -633,7 +633,7 @@ 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 {number} timeout - The number of milliseconds before the alert closes automatically
+ * @param {number} [timeout=0] - 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
@@ -646,14 +646,12 @@ class App {
* // Pops up a box with the message "Happy Christmas!" that will disappear after 5 seconds.
* this.alert("Happy Christmas!", 5000);
*/
- alert(str, timeout, silent) {
+ alert(str, timeout=0, silent=false) {
const time = new Date();
log.info("[" + time.toLocaleString() + "] " + str);
if (silent) return;
- timeout = timeout || 0;
-
this.currentSnackbar = $.snackbar({
content: str,
timeout: timeout,
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 13b06d61..419f726d 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -709,7 +709,7 @@
- Raise issue on GitHub
+ Raise issue on GitHub
What
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index d7d628cb..2c8be70e 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -337,6 +337,29 @@
fill: var(--primary-font-colour);
}
+.pulse {
+ box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
+ animation: pulse 1.5s 1;
+}
+
+.pulse:hover {
+ animation-play-state: paused;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 70% {
+ transform: scale(1.1);
+ box-shadow: 0 0 0 20px rgba(90, 153, 212, 0);
+ }
+ 100% {
+ transform: scale(1);
+ box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
+ }
+}
+
#input-find-options,
#output-find-options {
display: flex;
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 77902d09..3eed5e2d 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -39,7 +39,9 @@ div#output {
.split {
box-sizing: border-box;
- overflow: auto;
+ /* overflow: auto;
+ Removed to enable Background Magic button pulse to overflow.
+ Replace this rule if it seems to be causing problems. */
position: relative;
}
diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs
index 6bbe8f4a..4a08fe8d 100755
--- a/src/web/waiters/OutputWaiter.mjs
+++ b/src/web/waiters/OutputWaiter.mjs
@@ -1083,6 +1083,7 @@ class OutputWaiter {
magicButton.setAttribute("data-original-title", `${opSequence} will produce "${Utils.escapeHtml(Utils.truncate(result), 30)}"`);
magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
magicButton.classList.remove("hidden");
+ magicButton.classList.add("pulse");
}
@@ -1092,6 +1093,7 @@ class OutputWaiter {
hideMagicButton() {
const magicButton = document.getElementById("magic");
magicButton.classList.add("hidden");
+ magicButton.classList.remove("pulse");
magicButton.setAttribute("data-recipe", "");
magicButton.setAttribute("data-original-title", "Magic!");
}