7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-22 10:21:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Convert Settings to components

Browse Source
This commit is contained in:
Nelson Chan
2021-10-20 18:54:20 +08:00
parent 74d2b38cb6
commit f9bb48de13
12 changed files with 1190 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/settings/Appearance.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div>
<div class="my-4">
<label for="language" class="form-label">
{{ $t("Language") }}
</label>
<select id="language" v-model="$i18n.locale" class="form-select">
<option
v-for="(lang, i) in $i18n.availableLocales"
:key="`Lang${i}`"
:value="lang"
>
{{ $i18n.messages[lang].languageName }}
</option>
</select>
</div>
<div class="my-4">
<label for="timezone" class="form-label">{{ $t("Theme") }}</label>
<div>
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
id="btncheck1"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="light"
/>
<label class="btn btn-outline-primary" for="btncheck1">
{{ $t("Light") }}
</label>
<input
id="btncheck2"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="dark"
/>
<label class="btn btn-outline-primary" for="btncheck2">
{{ $t("Dark") }}
</label>
<input
id="btncheck3"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="auto"
/>
<label class="btn btn-outline-primary" for="btncheck3">
{{ $t("Auto") }}
</label>
</div>
</div>
</div>
<div class="my-4">
<label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
<div>
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
id="btncheck4"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="normal"
/>
<label class="btn btn-outline-primary" for="btncheck4">
{{ $t("Normal") }}
</label>
<input
id="btncheck5"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="bottom"
/>
<label class="btn btn-outline-primary" for="btncheck5">
{{ $t("Bottom") }}
</label>
<input
id="btncheck6"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="none"
/>
<label class="btn btn-outline-primary" for="btncheck6">
{{ $t("None") }}
</label>
</div>
</div>
</div>
</div>
</template>
<script>
import { setPageLocale } from "../../util-frontend";
export default {
watch: {
"$i18n.locale"() {
localStorage.locale = this.$i18n.locale;
setPageLocale();
},
},
};
</script>
<style lang="scss" scoped>
@import "../../assets/vars.scss";
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-check:hover + .btn-outline-primary {
color: #fff;
.dark & {
color: #000;
}
}
.dark {
.list-group-item {
background-color: $dark-bg2;
color: $dark-font-color;
}
}
</style>