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 + }); + }); +}