From a1882b67c41fe9901a0cd8059b5cc78a5beadec0 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel@debian.org>
Date: Tue, 26 Nov 2024 09:28:28 +0100
Subject: Adding upstream version 2.0.0~beta.0+dfsg.

Signed-off-by: Daniel Baumann <daniel@debian.org>
---
 src/components/settings/Appearance.vue | 190 +++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 src/components/settings/Appearance.vue

(limited to 'src/components/settings/Appearance.vue')

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>
-- 
cgit v1.2.3