diff options
Diffstat (limited to 'src/components/SettingsPage.vue')
-rw-r--r-- | src/components/SettingsPage.vue | 73 |
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> |