diff options
Diffstat (limited to 'src/components/settings/Appearance.vue')
| -rw-r--r-- | src/components/settings/Appearance.vue | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/src/components/settings/Appearance.vue b/src/components/settings/Appearance.vue new file mode 100644 index 0000000..a1391d6 --- /dev/null +++ b/src/components/settings/Appearance.vue @@ -0,0 +1,190 @@ +<template> + <div> + <div class="my-4"> + <label for="language" class="form-label"> + {{ $t("Language") }} + </label> + <select id="language" v-model="$root.language" 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> + + <!-- Timeline --> + <div class="my-4"> + <label class="form-label">{{ $t("styleElapsedTime") }}</label> + <div> + <div class="btn-group" role="group"> + <input + id="styleElapsedTimeShowNoLine" + v-model="$root.styleElapsedTime" + type="radio" + class="btn-check" + name="styleElapsedTime" + autocomplete="off" + value="no-line" + /> + <label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine"> + {{ $t("styleElapsedTimeShowNoLine") }} + </label> + + <input + id="styleElapsedTimeShowWithLine" + v-model="$root.styleElapsedTime" + type="radio" + class="btn-check" + name="styleElapsedTime" + autocomplete="off" + value="with-line" + /> + <label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine"> + {{ $t("styleElapsedTimeShowWithLine") }} + </label> + + <input + id="styleElapsedTimeNone" + v-model="$root.styleElapsedTime" + type="radio" + class="btn-check" + name="styleElapsedTime" + autocomplete="off" + value="none" + /> + <label class="btn btn-outline-primary" for="styleElapsedTimeNone"> + {{ $t("None") }} + </label> + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + +}; +</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> |