diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-10-12 14:23:53 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2020-10-20 09:02:22 +0200 |
commit | fefe82209461c5a78b239935d64590a1c83b3e9c (patch) | |
tree | 0361c2b2db9fc17a025d5d08d7d6da5e6bdd8a1a /src/components/ContactDetails/ContactDetailsAvatar.vue | |
parent | 5c2eb89b0fe280eaf819b9690cf15146a81d8e0a (diff) |
Fix avatar display on read-only contacts and use global Avatar component
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src/components/ContactDetails/ContactDetailsAvatar.vue')
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 42 |
1 files changed, 26 insertions, 16 deletions
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index cd5a71b1..aa8af0e8 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -37,12 +37,20 @@ :style="{ 'backgroundImage': `url(${contact.photoUrl})` }" class="contact-header-avatar__photo" @click="toggleModal" /> + <Avatar v-else + :disable-tooltip="true" + :display-name="contact.displayName" + :is-no-user="true" + :size="75" + class="contact-header-avatar__photo" /> <!-- attention, this menu exists twice in this file --> <Actions - default-icon="icon-picture-force-white" + v-if="!isReadOnly || contact.photo" + :force-menu="true" :open.sync="opened" - class="contact-header-avatar__menu"> + class="contact-header-avatar__menu" + default-icon="icon-picture-force-white"> <template v-if="!isReadOnly"> <ActionButton icon="icon-upload" @@ -90,20 +98,18 @@ @close="toggleModal"> <!-- attention, this menu exists twice in this file --> <template #actions> - <ActionButton - v-if="!isReadOnly" - icon="icon-upload" - @click="selectFileInput"> - {{ t('contacts', 'Upload a new picture') }} - </ActionButton> - <ActionButton - v-if="!isReadOnly" - icon="icon-folder" - @click="selectFilePicker"> - {{ t('contacts', 'Choose from files') }} - </ActionButton> <template v-if="!isReadOnly"> <ActionButton + icon="icon-upload" + @click="selectFileInput"> + {{ t('contacts', 'Upload a new picture') }} + </ActionButton> + <ActionButton + icon="icon-folder" + @click="selectFilePicker"> + {{ t('contacts', 'Choose from files') }} + </ActionButton> + <ActionButton v-for="network in supportedSocial" :key="network" :icon="'icon-' + network.toLowerCase()" @@ -111,6 +117,7 @@ {{ t('contacts', 'Get from ' + network) }} </ActionButton> </template> + <!-- FIXME: the link seems to have a bigger font size than the button caption --> <ActionLink v-if="contact.photo" @@ -126,6 +133,7 @@ {{ t('contacts', 'Delete picture') }} </ActionButton> </template> + <img ref="img" :src="contact.photoUrl" class="contact-header-modal__photo"> @@ -134,6 +142,7 @@ </template> <script> +import Avatar from '@nextcloud/vue/dist/Components/Avatar' import Modal from '@nextcloud/vue/dist/Components/Modal' import Actions from '@nextcloud/vue/dist/Components/Actions' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' @@ -153,10 +162,11 @@ export default { name: 'ContactDetailsAvatar', components: { - Modal, - Actions, ActionButton, ActionLink, + Actions, + Avatar, + Modal, }, props: { |