diff options
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/SettingsPage.vue | 39 |
2 files changed, 42 insertions, 3 deletions
diff --git a/src/App.vue b/src/App.vue index 67915be..f121977 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-url="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", }, }), @@ -124,6 +125,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 da10500..b25a377 100644 --- a/src/components/SettingsPage.vue +++ b/src/components/SettingsPage.vue @@ -31,7 +31,18 @@ </v-window-item> <v-window-item :value="2"> <v-card-text> - <span class="text-h2">Card {{ n }}</span> + <v-text-field + label="Background Image URL" + prepend-icon="mdi-image" + variant="outlined" + shaped + v-model="backgroundImageURL" + ></v-text-field> + </v-card-text> + </v-window-item> + <v-window-item :value="3"> + <v-card-text> + <span class="text-h2">Card</span> </v-card-text> </v-window-item> </v-window> @@ -42,13 +53,15 @@ export default { name: "SettingsPage", props: ["realTitleSize", "realContentSize"], - emits: ["updateTitleSize", "updateContentSize"], + emits: ["updateTitleSize", "updateContentSize", "updateBackgroundImageURL"], computed: { currentTitle() { switch (this.location) { case 1: return "MainPage Settings"; + case 2: + return "Background Settings"; default: return "About Otonashi"; } @@ -64,9 +77,15 @@ export default { contentSize(s, _) { this.$emit("updateContentSize", s); }, + // eslint-disable-next-line no-unused-vars + backgroundImageURL(s, _) { + this.$emit("updateBackgroundImageURL", s); + this.writeToLS(); + }, }, mounted() { + this.loadFromLS(); // Sync titleSize with realTitleSize this.titleSize = this.realTitleSize; // Same @@ -74,9 +93,25 @@ export default { }, data: () => ({ + backgroundImageURL: "", titleSize: 35, contentSize: "text-h5", location: 1, }), + + methods: { + // LocalStorage + loadFromLS() { + this.backgroundImageURL = + JSON.parse(localStorage.getItem("BackgroundImageURL")) || + this.backgroundImageURL; + }, + writeToLS() { + localStorage.setItem( + "backgroundImageURL", + JSON.stringify(this.backgroundImageURL) + ); + }, + }, }; </script> |