show image options button on avatar

Signed-off-by: call-me-matt <nextcloud@matthiasheinisch.de>
nextcloud · Jul 27, 2020 · 4d0df73 · 4d0df73
1 parent d66fc3e
commit 4d0df73
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 23 deletions.
diff --git 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
@@ -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-picture"
+						@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,31 +108,59 @@
 			</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-picture"
+					@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>
 	</div>
 </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)
 		},