diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index e6219c2d5..b859816ed 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 000000000..1025b23e0
--- /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
+ });
+ });
+}