From 9ac6c640e5c3b0d17ca7f3650e908e55f7fe7a8e Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Tue, 9 Aug 2022 00:00:55 +0800
Subject: feat(SettingsPage): support HomePage settings

- Add support for titleSize and contentSize
---
 src/App.vue                     | 27 ++++++++++++---
 src/components/HomePage.vue     |  2 ++
 src/components/SettingsPage.vue | 73 +++++++++++++++++++++++++++++++++++++++--
 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>
-- 
cgit v1.2.3