Andrey/uptime-kuma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

default icons for status page

Browse Source
This commit is contained in:
cyril59310 2025-12-28 03:16:32 +01:00
parent ebf1a5bb6f
commit 2785ddf522
2 changed files with 72 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lang/en.json
View File

@ -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"
}

70
src/pages/StatusPage.vue
View File

@ -138,6 +138,9 @@
<h1 class="mb-4 title-flex">
<!-- Logo -->
<span class="logo-wrapper" @click="showImageCropUploadMethod">
<button v-if="editMode" type="button" class="p-0 bg-transparent border-0 small-reset-btn reset-top-left" @click.stop="resetToDefaultImage">
<font-awesome-icon icon="times" class="text-danger" />
</button>
<img :src="logoURL" alt class="logo me-2" :class="logoClass" />
<font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
</span>
@ -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 {