diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/AvatarSection.vue')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/AvatarSection.vue | 67 |
1 files changed, 23 insertions, 44 deletions
diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue index ce3c80d4820..a99f228668c 100644 --- a/apps/settings/src/components/PersonalInfo/AvatarSection.vue +++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue @@ -1,41 +1,23 @@ <!-- - - @copyright 2022 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <section id="vue-avatar-section"> - <HeaderBar :input-id="avatarChangeSupported ? inputId : null" + <HeaderBar :is-heading="true" :readable="avatar.readable" :scope.sync="avatar.scope" /> <div v-if="!showCropper" class="avatar__container"> <div class="avatar__preview"> <NcAvatar v-if="!loading" + :key="version" :user="userId" :aria-label="t('settings', 'Your profile picture')" - :disabled-menu="true" - :disabled-tooltip="true" + :disable-tooltip="true" :show-user-status="false" - :size="180" - :key="version" /> + :size="180" /> <div v-else class="icon-loading" /> </div> <template v-if="avatarChangeSupported"> @@ -46,7 +28,7 @@ <Upload :size="20" /> </template> </NcButton> - <NcButton :aria-label="t('settings', 'Choose profile picture from files')" + <NcButton :aria-label="t('settings', 'Choose profile picture from Files')" @click="openFilePicker"> <template #icon> <Folder :size="20" /> @@ -60,9 +42,8 @@ </template> </NcButton> </div> - <span>{{ t('settings', 'png or jpg, max. 20 MB') }}</span> + <span>{{ t('settings', 'The file must be a PNG or JPG') }}</span> <input ref="input" - :id="inputId" type="file" :accept="validMimeTypes.join(',')" @change="onChange"> @@ -99,15 +80,15 @@ import { getCurrentUser } from '@nextcloud/auth' import { getFilePickerBuilder, showError } from '@nextcloud/dialogs' import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus' -import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar' -import NcButton from '@nextcloud/vue/dist/Components/NcButton' +import NcAvatar from '@nextcloud/vue/components/NcAvatar' +import NcButton from '@nextcloud/vue/components/NcButton' import VueCropper from 'vue-cropperjs' -// eslint-disable-next-line node/no-extraneous-import +// eslint-disable-next-line n/no-extraneous-import import 'cropperjs/dist/cropper.css' -import Upload from 'vue-material-design-icons/Upload' -import Folder from 'vue-material-design-icons/Folder' -import Delete from 'vue-material-design-icons/Delete' +import Upload from 'vue-material-design-icons/Upload.vue' +import Folder from 'vue-material-design-icons/Folder.vue' +import Delete from 'vue-material-design-icons/DeleteOutline.vue' import HeaderBar from './shared/HeaderBar.vue' import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js' @@ -120,7 +101,6 @@ const VALID_MIME_TYPES = ['image/png', 'image/jpeg'] const picker = getFilePickerBuilder(t('settings', 'Choose your profile picture')) .setMultiSelect(false) .setMimeTypeFilter(VALID_MIME_TYPES) - .setModal(true) .setType(1) .allowDirectories(false) .build() @@ -170,12 +150,6 @@ export default { unsubscribe('settings:display-name:updated', this.handleDisplayNameUpdate) }, - computed: { - inputId() { - return `account-property-${this.avatar.name}` - }, - }, - methods: { activateLocalFilePicker() { // Set to null so that selecting the same file will trigger the change event @@ -225,7 +199,10 @@ export default { this.showCropper = false this.loading = true - this.$refs.cropper.getCroppedCanvas().toBlob(async (blob) => { + const canvasData = this.$refs.cropper.getCroppedCanvas() + const scaleFactor = canvasData.width > 512 ? 512 / canvasData.width : 1 + + this.$refs.cropper.scale(scaleFactor, scaleFactor).getCroppedCanvas().toBlob(async (blob) => { if (blob === null) { showError(t('settings', 'Error cropping profile picture')) this.cancel() @@ -278,16 +255,18 @@ export default { <style lang="scss" scoped> section { grid-row: 1/3; + padding: 10px 10px; } + .avatar { &__container { - margin: 0 auto; + margin: calc(var(--default-grid-baseline) * 2) auto 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px 0; - width: 300px; + width: min(100%, 300px); span { color: var(--color-text-lighter); @@ -318,7 +297,7 @@ section { justify-content: space-between; } - &::v-deep .cropper-view-box { + :deep(.cropper-view-box) { border-radius: 50%; } } |