aboutsummaryrefslogtreecommitdiff
path: root/src/components/SettingsPage.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/SettingsPage.vue')
-rw-r--r--src/components/SettingsPage.vue73
1 files changed, 71 insertions, 2 deletions
diff --git a/src/components/SettingsPage.vue b/src/components/SettingsPage.vue
index b3174bf..da10500 100644
--- a/src/components/SettingsPage.vue
+++ b/src/components/SettingsPage.vue
@@ -1,13 +1,82 @@
<template>
- <v-file-input show-size label="Wallpaper"></v-file-input>
+ <v-card class="mx-auto" variant="outlined" max-height="500">
+ <v-card-title class="text-h5 font-weight-regular align-center">
+ <span>{{ currentTitle }}</span>
+ </v-card-title>
+ <v-window v-model="location" show-arrows="hover">
+ <v-window-item :value="1">
+ <v-card-text>
+ <v-container fluid>
+ <v-row>
+ <v-col>
+ <v-card-text>Title Size: {{ titleSize }}px</v-card-text>
+ <v-slider
+ v-model="titleSize"
+ :min="25"
+ :max="35"
+ step="1"
+ ></v-slider>
+ </v-col>
+ <v-col>
+ <v-card-text>Content Size</v-card-text>
+ <v-radio-group v-model="contentSize" column>
+ <v-radio label="text-h4" value="text-h4"></v-radio>
+ <v-radio label="text-h5" value="text-h5"></v-radio>
+ <v-radio label="text-h6" value="text-h6"></v-radio>
+ </v-radio-group>
+ </v-col>
+ </v-row>
+ </v-container>
+ </v-card-text>
+ </v-window-item>
+ <v-window-item :value="2">
+ <v-card-text>
+ <span class="text-h2">Card {{ n }}</span>
+ </v-card-text>
+ </v-window-item>
+ </v-window>
+ </v-card>
</template>
<script>
export default {
name: "SettingsPage",
+ props: ["realTitleSize", "realContentSize"],
+ emits: ["updateTitleSize", "updateContentSize"],
+
+ computed: {
+ currentTitle() {
+ switch (this.location) {
+ case 1:
+ return "MainPage Settings";
+ default:
+ return "About Otonashi";
+ }
+ },
+ },
+
+ watch: {
+ // eslint-disable-next-line no-unused-vars
+ titleSize(s, _) {
+ this.$emit("updateTitleSize", s);
+ },
+ // eslint-disable-next-line no-unused-vars
+ contentSize(s, _) {
+ this.$emit("updateContentSize", s);
+ },
+ },
+
+ mounted() {
+ // Sync titleSize with realTitleSize
+ this.titleSize = this.realTitleSize;
+ // Same
+ this.contentSize = this.realContentSize;
+ },
data: () => ({
- //
+ titleSize: 35,
+ contentSize: "text-h5",
+ location: 1,
}),
};
</script>