Improve avatar/banner setting

2 files changed, 119 insertions, 63 deletions

diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index e6219c2d56..b859816edb 100644
--- a/src/client/pages/settings/profile.vue
+++ b/src/client/pages/settings/profile.vue
@@ -1,7 +1,11 @@
 <template>
-<section class="mk-settings-page-profile _section">
+<section class="llvierxe _section">
 	<div class="_title"><fa :icon="faUser"/> {{ $t('profile') }}<small style="display: block; font-weight: normal; opacity: 0.6;">@{{ $store.state.i.username }}@{{ host }}</small></div>
 	<div class="_content">
+		<div class="header" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }" @click="changeBanner">
+			<mk-avatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true" @click.stop="changeAvatar"/>
+		</div>
+	
 		<mk-input v-model="name" :max="30">
 			<span>{{ $t('_profile.name') }}</span>
 		</mk-input>
@@ -21,18 +25,6 @@
 			<template #prefix><fa :icon="faBirthdayCake"/></template>
 		</mk-input>
 
-		<mk-input type="file" @change="onAvatarChange">
-			<span>{{ $t('avatar') }}</span>
-			<template #icon><fa :icon="faImage"/></template>
-			<template #desc v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
-		</mk-input>
-
-		<mk-input type="file" @change="onBannerChange">
-			<span>{{ $t('banner') }}</span>
-			<template #icon><fa :icon="faImage"/></template>
-			<template #desc v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
-		</mk-input>
-
 		<details class="fields">
 			<summary>{{ $t('_profile.metadata') }}</summary>
 			<div class="row">
@@ -64,14 +56,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faUnlockAlt, faCogs, faImage, faUser, faMapMarkerAlt, faBirthdayCake } from '@fortawesome/free-solid-svg-icons';
+import { faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake } from '@fortawesome/free-solid-svg-icons';
 import { faSave } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
 import MkTextarea from '../../components/ui/textarea.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import i18n from '../../i18n';
-import { apiUrl, host } from '../../config';
+import { host } from '../../config';
+import { selectFile } from '../../scripts/select-file';
 
 export default Vue.extend({
 	i18n,
@@ -103,9 +96,7 @@ export default Vue.extend({
 			isBot: false,
 			isCat: false,
 			saving: false,
-			avatarUploading: false,
-			bannerUploading: false,
-			faSave, faUnlockAlt, faCogs, faImage, faUser, faMapMarkerAlt, faBirthdayCake
+			faSave, faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake
 		}
 	},
 
@@ -130,52 +121,18 @@ export default Vue.extend({
 	},
 
 	methods: {
-		onAvatarChange([file]) {
-			this.avatarUploading = true;
-
-			const data = new FormData();
-			data.append('file', file);
-			data.append('i', this.$store.state.i.token);
-
-			fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
-				body: data
-			})
-			.then(response => response.json())
-			.then(f => {
-				this.avatarId = f.id;
-				this.avatarUploading = false;
-			})
-			.catch(e => {
-				this.avatarUploading = false;
-					this.$root.dialog({
-					type: 'error',
-					text: e
+		changeAvatar(e) {
+			selectFile(this, e.currentTarget || e.target, this.$t('avatar')).then(file => {
+				this.$root.api('i/update', {
+					avatarId: file.id,
 				});
 			});
 		},
 
-		onBannerChange([file]) {
-			this.bannerUploading = true;
-
-			const data = new FormData();
-			data.append('file', file);
-			data.append('i', this.$store.state.i.token);
-
-			fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
-				body: data
-			})
-			.then(response => response.json())
-			.then(f => {
-				this.bannerId = f.id;
-				this.bannerUploading = false;
-			})
-			.catch(e => {
-				this.bannerUploading = false;
-				this.$root.dialog({
-					type: 'error',
-					text: e
+		changeBanner(e) {
+			selectFile(this, e.currentTarget || e.target, this.$t('banner')).then(file => {
+				this.$root.api('i/update', {
+					bannerId: file.id,
 				});
 			});
 		},
@@ -226,10 +183,31 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.mk-settings-page-profile {
+.llvierxe {
 	> ._content {
-		> *:first-child {
-			margin-top: 0;
+		> .header {
+			position: relative;
+			height: 150px;
+			overflow: hidden;
+			background-size: cover;
+			background-position: center;
+			border-radius: 5px;
+			border: solid 1px var(--divider);
+			box-sizing: border-box;
+			cursor: pointer;
+
+			> .avatar {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				display: block;
+				width: 72px;
+				height: 72px;
+				margin: auto;
+				cursor: pointer;
+			}
 		}
 
 		> .fields {
diff --git a/src/client/scripts/select-file.ts b/src/client/scripts/select-file.ts
new file mode 100644
index 0000000000..1025b23e03
--- /dev/null
+++ b/src/client/scripts/select-file.ts
@@ -0,0 +1,78 @@
+import { faUpload, faCloud, faLink } from '@fortawesome/free-solid-svg-icons';
+import { selectDriveFile } from './select-drive-file';
+import { apiUrl } from '../config';
+
+export function selectFile(component: any, src: any, label: string, multiple = false) {
+	return new Promise((res, rej) => {
+		const chooseFileFromPc = () => {
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.multiple = multiple;
+			input.onchange = () => {
+				const dialog = component.$root.dialog({
+					type: 'waiting',
+					text: component.$t('uploading') + '...',
+					showOkButton: false,
+					showCancelButton: false,
+					cancelableByBgClick: false
+				});
+
+				const promises = Array.from(input.files).map(file => new Promise((ok, err) => {
+					const data = new FormData();
+					data.append('file', file);
+					data.append('i', component.$store.state.i.token);
+
+					fetch(apiUrl + '/drive/files/create', {
+						method: 'POST',
+						body: data
+					})
+					.then(response => response.json())
+					.then(ok)
+					.catch(err);
+				}));
+
+				Promise.all(promises).then(driveFiles => {
+					res(multiple ? driveFiles : driveFiles[0]);
+				}).catch(e => {
+					component.$root.dialog({
+						type: 'error',
+						text: e
+					});
+				}).finally(() => {
+					dialog.close();
+				});
+			};
+			input.click();
+		};
+
+		const chooseFileFromDrive = () => {
+			selectDriveFile(component.$root, multiple).then(files => {
+				res(files);
+			});
+		};
+
+		const chooseFileFromUrl = () => {
+
+		};
+
+		component.$root.menu({
+			items: [{
+				text: label,
+				type: 'label'
+			}, {
+				text: component.$t('upload'),
+				icon: faUpload,
+				action: chooseFileFromPc
+			}, {
+				text: component.$t('fromDrive'),
+				icon: faCloud,
+				action: chooseFileFromDrive
+			}, /*{
+				text: component.$t('fromUrl'),
+				icon: faLink,
+				action: chooseFileFromUrl
+			}*/],
+			source: src
+		});
+	});
+}