nanka iroiro

src/client/app/desktop/views/components/settings.vue

@@ -40,6 +40,7 @@
 				<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">%i18n:@customize%</button>
 			</div>
 			<div class="div">
+				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons" text="%i18n:@circle-icons%"/>
 				<mk-switch v-model="$store.state.settings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="%i18n:@gradient-window-header%"/>
@@ -293,6 +294,15 @@ export default Vue.extend({
 			this.$router.push('/i/customize-home');
 			this.$emit('done');
 		},
+		updateWallpaper() {
+			(this as any).apis.chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				(this as any).api('i/update', {
+					wallpaperId: file.id
+				});
+			});
+		},
 		onChangeFetchOnScroll(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'fetchOnScroll',

src/client/app/desktop/views/components/ui.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui">
+<div class="mk-ui" :style="style">
 	<x-header class="header"/>
 	<div class="content">
 		<slot></slot>
@@ -16,6 +16,15 @@ export default Vue.extend({
 	components: {
 		XHeader
 	},
+	computed: {
+		style(): any {
+			if (!this.$store.getters.isSignedIn || this.$store.state.i.wallpaperUrl == null) return {};
+			return {
+				backgroundColor: this.$store.state.i.wallpaperColor && this.$store.state.i.wallpaperColor.length == 3 ? `rgb(${ this.$store.state.i.wallpaperColor.join(',') })` : null,
+				backgroundImage: `url(${ this.$store.state.i.wallpaperUrl })`
+			};
+		}
+	},
 	mounted() {
 		document.addEventListener('keydown', this.onKeydown);
 	},
@@ -40,6 +49,9 @@ export default Vue.extend({
 	display flex
 	flex-direction column
 	flex 1
+	background-size cover
+	background-position center
+	background-attachment fixed
 
 	> .header
 		@media (max-width 1000px)