diff options
author | John Molakvoæ <skjnldsv@users.noreply.github.com> | 2020-07-29 08:26:13 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-07-29 08:26:13 +0200 |
commit | 5a214455814199549d68e4aaaf3af9f9522bba92 (patch) | |
tree | de028f7f9eb79e6093c2aebb09b2e2c8ce5088bd | |
parent | a3754df35c836dcdf1dbc54dbe49ae76e82844f7 (diff) | |
parent | e6a11990120b73eed051de5f8a89647923f2656d (diff) |
Merge pull request #1645 from call-me-matt/unhide-pic-btn
-rw-r--r-- | css/ContactDetailsAvatar.scss | 22 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 105 |
2 files changed, 104 insertions, 23 deletions
diff --git a/css/ContactDetailsAvatar.scss b/css/ContactDetailsAvatar.scss index e1523e62..def6b5d9 100644 --- a/css/ContactDetailsAvatar.scss +++ b/css/ContactDetailsAvatar.scss @@ -57,6 +57,9 @@ background-size: cover; // White background for avatars with transparency, also in dark theme background-color: #fff; + &:hover + .contact-avatar-options__popovermenubtn { + opacity: .25; + } } &__options { position: absolute; @@ -68,7 +71,6 @@ display: block; width: 100%; height: 100%; - opacity: .5; background-color: rgba(0, 0, 0, .2); &:hover, &:active, @@ -78,6 +80,24 @@ &__popovermenu { // center margin: calc((100% - 44px) / 2); + } + &__popovermenubtn { + height: 45px; + width: 45px; + border-radius: 50%; + z-index: 11; + background: rgba(0, 0, 0, .2); + opacity: 0; + &:hover, + &:active, + &:focus { + opacity: 1; + } + // bottom right + margin: calc((100% + 5px) / 2); + } + &__popovermenu, + &__popovermenubtn { & .action-item__menutoggle { // hide three dot menu, in favour of icon-picture-force-white z-index: -1; diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index 3fc6f1ec..b5eb5323 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/src/components/ContactDetails/ContactDetailsAvatar.vue @@ -24,15 +24,24 @@ <template> <div class="contact-header-avatar"> - <div class="contact-header-avatar__wrapper"> + <div v-click-outside="closeMenu" class="contact-header-avatar__wrapper"> <div class="contact-header-avatar__background" @click="toggleModal" /> <div v-if="contact.photo" :style="{ 'backgroundImage': `url(${contact.photoUrl})` }" - class="contact-header-avatar__photo" - @click="toggleModal" /> + class="avatar contact-header-avatar__options contact-avatar-options contact-header-avatar__photo" + @click="toggleModal"> + <input id="contact-avatar-upload" + ref="uploadInput" + type="file" + class="hidden" + accept="image/*" + @change="processFile"> + </div> - <div v-click-outside="closeMenu" class="contact-header-avatar__options"> + <div v-if="!contact.photo" + v-click-outside="closeMenu" + class="contact-header-avatar__options"> <a v-tooltip.bottom="t('contacts', 'Add a new picture')" href="#" class="contact-avatar-options" @@ -53,17 +62,41 @@ size="large" :title="contact.displayName" @close="toggleModal"> + <!-- attention, this menu exists twice in this file --> <template #actions> - <ActionButton v-if="!isReadOnly" icon="icon-upload" @click="selectFileInput"> - {{ t('contacts', 'Upload new picture') }} + <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"> + <ActionButton + v-if="!isReadOnly" + icon="icon-folder" + @click="selectFilePicker"> {{ t('contacts', 'Choose from files') }} </ActionButton> - <ActionLink :href="`${contact.url}?photo`" icon="icon-download" target="_blank"> + <template v-if="!isReadOnly"> + <ActionButton + v-for="network in supportedSocial" + :key="network" + :icon="'icon-' + network.toLowerCase()" + @click="getSocialAvatar(network)"> + {{ 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" + :href="`${contact.url}?photo`" + icon="icon-download" + target="_blank"> {{ t('contacts', 'Download picture') }} </ActionLink> - <ActionButton v-if="!isReadOnly" icon="icon-delete" @click="removePhoto"> + <ActionButton + v-if="!isReadOnly && contact.photo" + icon="icon-delete" + @click="removePhoto"> {{ t('contacts', 'Delete picture') }} </ActionButton> </template> @@ -75,19 +108,46 @@ </Modal> <!-- out of the avatar__options because of the overflow hidden --> - <Actions v-if="!isReadOnly" :open="opened" class="contact-avatar-options__popovermenu"> - <ActionButton icon="icon-upload" @click="selectFileInput"> + <!-- attention, this menu exists twice in this file --> + <Actions + default-icon="icon-picture-force-white" + :open.sync="opened" + :class="contact.photo ? 'contact-avatar-options__popovermenubtn' : 'contact-avatar-options__popovermenu'" + :style="opened ? { 'opacity' : 1 } : { }"> + <ActionButton + v-if="!isReadOnly" + icon="icon-upload" + @click="selectFileInput"> {{ t('contacts', 'Upload a new picture') }} </ActionButton> - <ActionButton icon="icon-picture" @click="selectFilePicker"> + <ActionButton + v-if="!isReadOnly" + icon="icon-folder" + @click="selectFilePicker"> {{ t('contacts', 'Choose from files') }} </ActionButton> + <template v-if="!isReadOnly"> + <ActionButton + v-for="network in supportedSocial" + :key="network" + :icon="'icon-' + network.toLowerCase()" + @click="getSocialAvatar(network)"> + {{ 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" + :href="`${contact.url}?photo`" + icon="icon-download" + target="_blank"> + {{ t('contacts', 'Download picture') }} + </ActionLink> <ActionButton - v-for="network in supportedSocial" - :key="network" - :icon="'icon-' + network.toLowerCase()" - @click="getSocialAvatar(network)"> - {{ t('contacts', 'Get from ' + network) }} + v-if="!isReadOnly && contact.photo" + icon="icon-delete" + @click="removePhoto"> + {{ t('contacts', 'Delete picture') }} </ActionButton> </Actions> </div> @@ -95,11 +155,12 @@ </template> <script> + import debounce from 'debounce' +import Modal from '@nextcloud/vue/dist/Components/Modal' import Actions from '@nextcloud/vue/dist/Components/Actions' -import ActionLink from '@nextcloud/vue/dist/Components/ActionLink' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' -import Modal from '@nextcloud/vue/dist/Components/Modal' +import ActionLink from '@nextcloud/vue/dist/Components/ActionLink' import { getFilePickerBuilder } from '@nextcloud/dialogs' import { generateUrl, generateRemoteUrl } from '@nextcloud/router' @@ -115,10 +176,10 @@ export default { name: 'ContactDetailsAvatar', components: { + Modal, Actions, - ActionLink, ActionButton, - Modal, + ActionLink, }, props: { @@ -314,8 +375,8 @@ export default { * Remove the contact's picture */ removePhoto() { + this.maximizeAvatar = false this.contact.vCard.removeProperty('photo') - this.maximizeAvatar = !this.maximizeAvatar this.$store.dispatch('updateContact', this.contact) }, |