diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 27 | ||||
| -rw-r--r-- | src/components/HomePage.vue | 2 | ||||
| -rw-r--r-- | src/components/SettingsPage.vue | 73 | ||||
| -rw-r--r-- | src/components/SubCard.vue | 4 |
4 files changed, 98 insertions, 8 deletions
diff --git a/src/App.vue b/src/App.vue index 20f769c..67915be 100644 --- a/src/App.vue +++ b/src/App.vue @@ -48,11 +48,22 @@ </v-snackbar> <v-main> <v-container class="float-end w-50"> - <HomePage v-if="atHome" /> - <EditPage v-if="atEdit" @snackbar-notification="setSnackbarText" /> - <SettingsPage v-if="atSettings" /> + <HomePage v-if="atHome" :contentSize="contentSize" /> + <EditPage v-else-if="atEdit" @snackbar-notification="setSnackbarText" /> + <SettingsPage + v-else-if="atSettings" + @update-title-size="updateTitleSize" + @update-content-size="updateContentSize" + :realTitleSize="parseInt(titleSize)" + :realContentSize="contentSize" + /> </v-container> </v-main> + <!-- This is a dirty workaround to use styles inside the template. Further + help needed. --> + <component :is="`style`"> + .v-card-title { font-size: {{ titleSize }}; } + </component> </v-app> </template> @@ -72,6 +83,8 @@ export default { }, data: () => ({ + titleSize: "35px", + contentSize: "text-h5", drawer: null, atHome: true, atEdit: false, @@ -79,7 +92,7 @@ export default { snackbar: false, snackbarText: "Default snackbar text (End-user shouldn't see this)", bg: { - backgroundColor: "grey", + // backgroundColor: "grey", // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)", backgroundPosition: "center", }, @@ -105,6 +118,12 @@ export default { this.snackbarText = text; this.snackbar = true; }, + updateTitleSize(s) { + this.titleSize = `${s}px`; + }, + updateContentSize(s) { + this.contentSize = s; + }, }, }; </script> diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue index 3a50c80..20843b5 100644 --- a/src/components/HomePage.vue +++ b/src/components/HomePage.vue @@ -6,6 +6,7 @@ :key="i" :title="k" :content="markdownToHtml(v)" + :contentSize="contentSize" /> </div> </template> @@ -16,6 +17,7 @@ import { marked } from "marked"; export default { name: "HomePage", + props: ["contentSize"], components: { SubCard, 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> diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue index 5a08e3b..3590fa0 100644 --- a/src/components/SubCard.vue +++ b/src/components/SubCard.vue @@ -2,7 +2,7 @@ <v-card variant="outlined"> <v-card-item> <v-card-title>{{ title }}</v-card-title> - <div v-html="content"></div> + <div :class="contentSize" v-html="content"></div> </v-card-item> </v-card> </template> @@ -13,6 +13,6 @@ export default { data: () => ({ // }), - props: ["title", "content"], + props: ["title", "content", "contentSize"], }; </script> |