added settings Page and components

2023-12-06 11:51:42 +01:00
parent 45c651e853
commit 6a4a799c85
21 changed files with 1301 additions and 99 deletions
--- a/pages/settings.vue
+++ b/pages/settings.vue
@ -0,0 +1,175 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
+        </div>
+        <div id="content-body">
+            <div class="buttonOptions">
+                <input :class="[(darkMode && accountSelected) ? 'selected-input-darkmode' : '',
+                (darkMode && !accountSelected) ? 'input-darkmode' : '',
+                (!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
+                (!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
+                    @click="ActivateAccount">
+                <input :class="[(darkMode && appearanceSelected) ? 'selected-input-darkmode' : '',
+                (darkMode && !appearanceSelected) ? 'input-darkmode' : '',
+                (!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
+                (!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
+                    value="Appearance" @click="ActivateAppearance">
+                <input :class="[(darkMode && usersSelected) ? 'selected-input-darkmode' : '',
+                (darkMode && !usersSelected) ? 'input-darkmode' : '',
+                (!darkMode && usersSelected) ? 'selected-input-lightmode' : '',
+                (!darkMode && !usersSelected) ? 'input-lightmode' : '',]" type="button" id="users" value="Users"
+                    @click="ActivateUsers">
+            </div>
+            <UserProfile v-if="accountSelected"/>
+            <UserAccount v-if="accountSelected"/>
+            <UserAppearance v-if="appearanceSelected"/>
+            <UserRightsList v-if="usersSelected"/>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+import UserProfile from "../components/server/UserProfile.vue";
+import UserAccount from "../components/server/UserAccount.vue";
+import UserAppearance from "../components/server/UserAppearance.vue";
+import UserRightsList from "../components/server/UserRightsList.vue";
+
+definePageMeta({
+    layout: 'default'
+})
+
+const darkMode = ref(true)
+
+const accountSelected = ref(true)
+const appearanceSelected = ref(false)
+const usersSelected = ref(false)
+
+// fuctions to change the option button
+const ActivateAccount = () => {
+    accountSelected.value = true;
+    appearanceSelected.value = false;
+    usersSelected.value = false;
+};
+const ActivateAppearance = () => {
+    accountSelected.value = false;
+    appearanceSelected.value = true;
+    usersSelected.value = false;
+};
+const ActivateUsers = () => {
+    accountSelected.value = false;
+    appearanceSelected.value = false;
+    usersSelected.value = true;
+};
+</script>
+  
+<script>
+export default {
+    name: "SettingsPage",
+}
+</script>   
+      
+      
+<style>
+* {
+    box-sizing: border-box;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
+}
+
+#content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+}
+
+#page-name {
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+    text-decoration: underline;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+#content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+}
+
+.buttonOptions {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+}
+
+input#account,
+input#appearance,
+input#users {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 12.5rem;
+    height: 2.5rem;
+    border-radius: 0.625rem;
+    border: none;
+    text-align: center;
+    letter-spacing: 5%;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
+    margin-right: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.input-darkmode {
+    color: #fff;
+    background-color: #2c2c2c;
+}
+
+.selected-input-darkmode {
+    color: #fff;
+    background-color: #454545;
+}
+
+.input-lightmode {
+    color: #000;
+    background-color: #E4E4E4;
+}
+
+.selected-input-lightmode {
+    color: #000;
+    background-color: #D9D9D9;
+}
+
+.input-darkmode:hover,
+.input-lightmode:hover,
+.selected-input-darkmode:hover,
+.selected-input-lightmode:hover {
+    cursor: pointer;
+}
+</style>