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)

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -140,6 +140,7 @@ root(isDark)
 		z-index 1
 		line-height $header-height
 		padding 0 16px
+		font-size 14px
 		color isDark ? #e3e5e8 : #888
 		background isDark ? #313543 : #fff
 		box-shadow 0 1px rgba(#000, 0.15)

src/client/app/desktop/views/pages/deck/deck.vue

@@ -150,7 +150,6 @@ export default Vue.extend({
 root(isDark)
 	display flex
 	flex 1
-	justify-content center
 	padding 16px 0 16px 16px
 	overflow auto
 
@@ -160,6 +159,13 @@ root(isDark)
 		&:last-of-type
 			margin-right 0
 
+	> *
+		&:first-child
+			margin-left auto
+
+		&:last-child
+			margin-right auto
+
 	> button
 		padding 0 16px
 		color isDark ? #93a0a5 : #888

src/models/user.ts

@@ -48,6 +48,7 @@ type IUserBase = {
 	usernameLower: string;
 	avatarId: mongo.ObjectID;
 	bannerId: mongo.ObjectID;
+	wallpaperId: mongo.ObjectID;
 	data: any;
 	description: string;
 	pinnedNoteId: mongo.ObjectID;
@@ -412,6 +413,10 @@ export const pack = (
 		? `${config.drive_url}/${_user.bannerId}`
 		: null;
 
+	_user.wallpaperUrl = _user.wallpaperId != null
+		? `${config.drive_url}/${_user.wallpaperId}`
+		: null;
+
 	if (!meId || !meId.equals(_user.id) || !opts.detail) {
 		delete _user.avatarId;
 		delete _user.bannerId;

src/server/api/endpoints/i/update.ts

@@ -45,6 +45,11 @@ module.exports = async (params, user, app) => new Promise(async (res, rej) => {
 	if (bannerIdErr) return rej('invalid bannerId param');
 	if (bannerId !== undefined) updates.bannerId = bannerId;
 
+	// Get 'wallpaperId' parameter
+	const [wallpaperId, wallpaperIdErr] = $.type(ID).optional().nullable().get(params.wallpaperId);
+	if (wallpaperIdErr) return rej('invalid wallpaperId param');
+	if (wallpaperId !== undefined) updates.wallpaperId = wallpaperId;
+
 	// Get 'isLocked' parameter
 	const [isLocked, isLockedErr] = $.bool.optional().get(params.isLocked);
 	if (isLockedErr) return rej('invalid isLocked param');
@@ -85,6 +90,16 @@ module.exports = async (params, user, app) => new Promise(async (res, rej) => {
 		}
 	}
 
+	if (wallpaperId) {
+		const wallpaper = await DriveFile.findOne({
+			_id: wallpaperId
+		});
+
+		if (wallpaper != null && wallpaper.metadata.properties.avgColor) {
+			updates.wallpaperColor = wallpaper.metadata.properties.avgColor;
+		}
+	}
+
 	await User.update(user._id, {
 		$set: updates
 	});