diff options
| -rw-r--r-- | src/App.vue | 12 | ||||
| -rw-r--r-- | src/components/SettingsPage.vue | 45 |
2 files changed, 54 insertions, 3 deletions
diff --git a/src/App.vue b/src/App.vue index 24f5b83..0641b2a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -54,6 +54,7 @@ v-else-if="atSettings" @update-title-size="updateTitleSize" @update-content-size="updateContentSize" + @update-background-image-u-r-l="updateBackgroundImageURL" :realTitleSize="parseInt(titleSize)" :realContentSize="contentSize" /> @@ -93,7 +94,7 @@ export default { snackbarText: "Default snackbar text (End-user shouldn't see this)", bg: { // backgroundColor: "grey", - // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)", + backgroundImage: "", backgroundPosition: "center", }, }), @@ -110,6 +111,12 @@ export default { }; }, + mounted() { + let backgroundImageURL = + JSON.parse(localStorage.getItem("backgroundImageURL")) || ""; + this.updateBackgroundImageURL(backgroundImageURL); + }, + methods: { toggleDrawer() { this.drawer = !this.drawer; @@ -124,6 +131,9 @@ export default { updateContentSize(s) { this.contentSize = s; }, + updateBackgroundImageURL(s) { + this.bg.backgroundImage = s ? `url(${s})` : ""; + }, }, }; </script> diff --git a/src/components/SettingsPage.vue b/src/components/SettingsPage.vue index 8dc35b1..79a92fe 100644 --- a/src/components/SettingsPage.vue +++ b/src/components/SettingsPage.vue @@ -30,6 +30,23 @@ </v-card-text> </v-window-item> <v-window-item :value="2"> + <v-card-text> + <v-text-field + label="Background Image URL" + prepend-icon="mdi-image" + variant="outlined" + shaped + v-model="backgroundImageURL" + ></v-text-field> + </v-card-text> + <v-card-actions class="d-flex justify-space-around"> + <v-btn variant="outlined" @click="saveBackgroundImageURL">Save</v-btn> + <v-btn variant="outlined" @click="resetBackgroundImageURL" + >Reset</v-btn + > + </v-card-actions> + </v-window-item> + <v-window-item :value="3"> <v-textarea height="300" no-resize readonly :value="debugLog"> </v-textarea> <v-card-actions class="d-flex justify-space-around"> @@ -40,7 +57,7 @@ <v-btn variant="outlined" @click="debugLog = ''">Clear Output</v-btn> </v-card-actions> </v-window-item> - <v-window-item :value="3"> + <v-window-item :value="4"> <v-card-text> <span class="text-h6" >Otonashi is a simple, easy-to-use classboard app, built by 135e2 @@ -58,7 +75,7 @@ export default { name: "SettingsPage", props: ["realTitleSize", "realContentSize"], - emits: ["updateTitleSize", "updateContentSize"], + emits: ["updateTitleSize", "updateContentSize", "updateBackgroundImageURL"], computed: { currentTitle() { @@ -66,6 +83,8 @@ export default { case 1: return "MainPage Settings"; case 2: + return "Background Settings"; + case 3: return "Developer Settings"; default: return "About Otonashi"; @@ -85,6 +104,7 @@ export default { }, mounted() { + this.loadFromLS(); // Sync titleSize with realTitleSize this.titleSize = this.realTitleSize; // Same @@ -92,6 +112,7 @@ export default { }, data: () => ({ + backgroundImageURL: "", titleSize: 35, contentSize: "text-h5", debugLog: "", @@ -100,6 +121,17 @@ export default { methods: { // LocalStorage + loadFromLS() { + this.backgroundImageURL = + JSON.parse(localStorage.getItem("backgroundImageURL")) || + this.backgroundImageURL; + }, + writeToLS() { + localStorage.setItem( + "backgroundImageURL", + JSON.stringify(this.backgroundImageURL) + ); + }, clearLS() { localStorage.clear(); this.debugLog += "LocalStorage cleared.\n"; @@ -107,6 +139,15 @@ export default { showLSDebug() { this.debugLog += `LS in JSON format: ${JSON.stringify(localStorage)}\n`; }, + saveBackgroundImageURL() { + this.$emit("updateBackgroundImageURL", this.backgroundImageURL); + this.writeToLS(); + }, + resetBackgroundImageURL() { + // Reset URL and emit event. + this.backgroundImageURL = ""; + this.saveBackgroundImageURL(); + }, }, }; </script> |