show edit btn also when mouse over photo, removed transition

nextcloud · May 28, 2020 · 4c2683d · 4c2683d
1 parent fc89384
commit 4c2683d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 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 + .overlay {
+			opacity: .25;
+		}
 	}
 	&__options {
 		position: absolute;
@@ -70,7 +73,6 @@
 		height: 35px;
 		z-index: 11;
 		cursor: pointer;
-		transition: .5s ease;
 		opacity: 0;
 		border-radius: 50%;
 		background: rgba(0, 0, 0, .5);

diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -24,11 +24,6 @@
 <template>
 	<div class="contact-header-avatar">
 		<div class="contact-header-avatar__wrapper">
-			<div v-if="contact.photo"
-				class="overlay"
-				@click.stop.prevent="toggleMenu">
-				<div class="overlay-icon icon-picture-force-white" />
-			</div>
 			<div class="contact-header-avatar__background" @click="toggleModal" />
 
 			<div v-if="contact.photo"
@@ -44,6 +39,12 @@
 					@change="processFile">
 			</div>
 
+			<div v-if="contact.photo"
+				class="overlay"
+				@click.stop.prevent="toggleMenu">
+				<div class="overlay-icon icon-picture-force-white" />
+			</div>
+
 			<div v-if="!contact.photo"
 				v-click-outside="closeMenu"
 				class="contact-header-avatar__options">