From 2785ddf522c84ef78c55f6442132b4a0a07f582a Mon Sep 17 00:00:00 2001 From: cyril59310 Date: Sun, 28 Dec 2025 03:16:32 +0100 Subject: [PATCH] default icons for status page --- src/lang/en.json | 3 +- src/pages/StatusPage.vue | 70 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/src/lang/en.json b/src/lang/en.json index 727358fdc..4b7511758 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -1246,5 +1246,6 @@ "labelDomainNameExpiryNotification": "Domain Name Expiry Notification", "domainExpiryDescription": "Trigger notification when domain names expires in:", "minimumIntervalWarning": "Intervals below 20 seconds may result in poor performance.", - "lowIntervalWarning": "Are you sure want to set the interval value below 20 seconds? Performance may be degraded, particularly if there are a large number of monitors." + "lowIntervalWarning": "Are you sure want to set the interval value below 20 seconds? Performance may be degraded, particularly if there are a large number of monitors.", + "Image reset to default": "Image reset to default" } diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 74a5c3f66..f2fcebf7c 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -138,6 +138,9 @@

+ @@ -962,6 +965,21 @@ export default { } }, + /** + * Reset logo image to default (public/icon.svg) + * @returns {void} + */ + resetToDefaultImage() { + if (! this.editMode) { + return; + } + + this.imgDataUrl = "/icon.svg"; + this.config.icon = this.imgDataUrl; + toast.success(this.$t("Image reset to default")); + }, + + /** * Create an incident for this status page * @returns {void} @@ -1181,6 +1199,58 @@ footer { cursor: pointer; box-shadow: 0 15px 70px rgba(0, 0, 0, 0.9); } + + /* Reset button placed at top-left of the logo */ + .reset-top-left { + position: absolute; + top: 0; + left: -15px; + z-index: 2; + width: 20px; + height: 20px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: white; + border: none; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); + cursor: pointer; + padding: 0; + transition: transform $easing-in 0.18s, box-shadow $easing-in 0.18s, background-color $easing-in 0.18s; + transform-origin: center; + + &:hover { + background-color: rgba(0, 0, 0, 0.06); + transform: scale(1.18); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); + } + + &:hover ~ .icon-upload { + transform: none !important; + } + } + + .small-reset-btn { + transition: transform $easing-in 0.18s, box-shadow $easing-in 0.18s, background-color $easing-in 0.18s; + font-size: 18px; + width: 18px; + height: 18px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: transparent; + border: none; + cursor: pointer; + + &:hover { + background-color: rgba(0, 0, 0, 0.04); + transform: scale(1.18); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); + } + } } .logo {