fen/uptime-kuma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refine UI/UX for custom css / footer text. Add switch for show/hide powered by

Browse source
This commit is contained in:
Louis Lam 2022-04-17 14:53:13 +08:00
parent 1bc01d1077
commit 8eb83394f7
9 changed files with 87 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
db/patch-status-page-footer-css.sql Normal file
View file

@ -0,0 +1,6 @@
-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
BEGIN TRANSACTION;
ALTER TABLE status_page ADD footer_text TEXT;
ALTER TABLE status_page ADD custom_css TEXT;
ALTER TABLE status_page ADD show_powered_by BOOLEAN NOT NULL DEFAULT 1;
COMMIT;

2
package.json
View file

@ -91,6 +91,7 @@
"password-hash": "~1.2.2",
"postcss-rtlcss": "~3.4.1",
"postcss-scss": "~4.0.3",
"prismjs": "^1.27.0",
"prom-client": "~13.2.0",
"prometheus-api-metrics": "~3.2.1",
"qrcode": "~1.5.0",
@ -110,6 +111,7 @@
"vue-i18n": "~9.1.9",
"vue-image-crop-upload": "~3.0.3",
"vue-multiselect": "~3.0.0-alpha.2",
"vue-prism-editor": "^2.0.0-alpha.2",
"vue-qrcode": "~1.0.0",
"vue-router": "~4.0.14",
"vue-toastification": "~2.0.0-rc.5",

1
server/database.js
View file

@ -56,6 +56,7 @@ class Database {
"patch-status-page.sql": true,
"patch-proxy.sql": true,
"patch-monitor-expiry-notification.sql": true,
"patch-status-page-footer-css.sql": true,
}
/**

6
server/model/status_page.js
View file

@ -92,6 +92,9 @@ class StatusPage extends BeanModel {
published: !!this.published,
showTags: !!this.show_tags,
domainNameList: this.getDomainNameList(),
customCSS: this.custom_css,
footerText: this.footer_text,
showPoweredBy: !!this.show_powered_by,
};
}
@ -104,6 +107,9 @@ class StatusPage extends BeanModel {
theme: this.theme,
published: !!this.published,
showTags: !!this.show_tags,
customCSS: this.custom_css,
footerText: this.footer_text,
showPoweredBy: !!this.show_powered_by,
};
}

3
server/socket-handlers/status-page-socket-handler.js
View file

@ -155,6 +155,9 @@ module.exports.statusPageSocketHandler = (socket) => {
//statusPage.search_engine_index = ;
statusPage.show_tags = config.showTags;
//statusPage.password = null;
statusPage.footer_text = config.footerText;
statusPage.custom_css = config.customCSS;
statusPage.show_powered_by = config.showPoweredBy;
statusPage.modified_date = R.isoDateTime();
await R.store(statusPage);

4
src/assets/app.scss
View file

@ -469,6 +469,10 @@ textarea.form-control {
color: $primary;
}
.prism-editor__textarea {
outline: none !important;
}
// Localization
@import "localization.scss";

2
src/languages/de-DE.js
View file

@ -443,6 +443,6 @@ export default {
"Fingerprint:": "Fingerabdruck:",
"No status pages": "Keine Status-Seiten",
Customize: "Anpassen",
"Custom Footer": "Eigener Footer (Leerlassen für Standard)",
"Custom Footer": "Eigener Footer",
"Custom CSS": "Eigenes CSS",
};

2
src/languages/en.js
View file

@ -355,7 +355,7 @@ export default {
serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
stackfield: "Stackfield",
Customize: "Customize",
"Custom Footer": "Custom Footer (empty string for default)",
"Custom Footer": "Custom Footer",
"Custom CSS": "Custom CSS",
smtpDkimSettings: "DKIM Settings",
smtpDkimDesc: "Please refer to the Nodemailer DKIM {0} for usage.",

89
src/pages/StatusPage.vue
View file

@ -16,11 +16,18 @@
<input id="title" v-model="config.title" type="text" class="form-control">
</div>
<!-- Description -->
<div class="my-3">
<label for="description" class="form-label">{{ $t("Description") }}</label>
<textarea id="description" v-model="config.description" class="form-control"></textarea>
</div>
<!-- Footer Text -->
<div class="my-3">
<label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label>
<textarea id="footer-text" v-model="config.footerText" class="form-control"></textarea>
</div>
<div class="my-3 form-check form-switch">
<input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
<label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
@ -31,6 +38,12 @@
<label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
</div>
<!-- Show Powered By -->
<div class="my-3 form-check form-switch">
<input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox">
<label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
</div>
<div v-if="false" class="my-3">
<label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
@ -51,6 +64,12 @@
</ul>
</div>
<!-- Custom CSS -->
<div class="my-3">
<div class="mb-1">{{ $t("Custom CSS") }}</div>
<prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
</div>
<div class="danger-zone">
<button class="btn btn-danger me-2" @click="deleteDialog">
<font-awesome-icon icon="trash" />
@ -119,11 +138,6 @@
<font-awesome-icon icon="bullhorn" />
{{ $t("Create Incident") }}
</button>
<button class="btn btn-primary me-2" @click="customizeStatusPage">
<font-awesome-icon icon="cog" />
{{ $t("Customize") }}
</button>
</div>
</div>
@ -180,15 +194,6 @@
</div>
</div>
<!-- Customize -->
<div v-if="editMode && enableEditCustomizeMode" class="mb-4 p-4 alert shadow-box customize" role="alert">
<strong v-if="enableEditCustomizeMode">{{ $t("Custom CSS") }}:</strong>
<Editable v-model="config.customCSS" tag="div" :contenteditable="enableEditCustomizeMode" class="content p-2" />
<br />
<strong v-if="enableEditCustomizeMode">{{ $t("Custom Footer") }}:</strong>
<Editable v-model="config.poweredBy" tag="h4" :contenteditable="enableEditCustomizeMode" :noNL="true" class="alert-heading p-2" />
</div>
<!-- Overall Status -->
<div class="shadow-box list p-4 overall-status mb-4">
<div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
@ -253,8 +258,14 @@
</div>
<footer class="mt-5 mb-4">
<p v-if="config.poweredBy" v-html="config.poweredBy"></p>
<p v-else>{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a></p>
<div class="custom-footer-text text-start">
<strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
</div>
<Editable v-model="config.footerText" tag="div" :contenteditable="enableEditMode" :noNL="false" class="alert-heading p-2" />
<p v-if="config.showPoweredBy">
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
</p>
</footer>
</div>
@ -278,6 +289,14 @@ import dayjs from "dayjs";
import Favico from "favico.js";
import { getResBaseURL } from "../util-frontend";
import Confirm from "../components/Confirm.vue";
// import Prism Editor
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-css";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
const toast = useToast();
@ -296,6 +315,7 @@ export default {
PublicGroupList,
ImageCropUpload,
Confirm,
PrismEditor,
},
// Leave Page for vue route change
@ -324,7 +344,6 @@ export default {
slug: null,
enableEditMode: false,
enableEditIncidentMode: false,
enableEditCustomizeMode: false,
hasToken: false,
config: {},
selectedMonitor: null,
@ -439,6 +458,13 @@ export default {
this.$root.getSocket().emit("getStatusPage", this.slug, (res) => {
if (res.ok) {
this.config = res.config;
if (!this.config.customCSS) {
this.config.customCSS = "body {\n" +
" \n" +
"}\n";
}
} else {
toast.error(res.msg);
}
@ -541,6 +567,10 @@ export default {
},
methods: {
highlighter(code) {
return highlight(code, languages.css);
},
updateHeartbeatList() {
// If editMode, it will use the data from websocket.
if (! this.editMode) {
@ -726,14 +756,6 @@ export default {
this.config.domainNameList.splice(index, 1);
},
/** customize status page */
customizeStatusPage() {
if (this.editMode) {
// toggle modal
this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
}
},
}
};
</script>
@ -863,7 +885,7 @@ footer {
}
}
.incident, .customize {
.incident {
.content {
&[contenteditable="true"] {
min-height: 60px;
@ -922,4 +944,19 @@ footer {
}
}
/* required class */
.css-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
border-radius: 1rem;
padding: 10px 5px;
border: 1px solid #ced4da;
.dark & {
background: $dark-bg;
border: 1px solid $dark-border-color;
}
}
</style>