1 files changed, 37 insertions, 6 deletions
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 2c39a942..0a09fad6 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -22,17 +22,23 @@ import rfcProps from '../../models/rfcProps';
   -->
 
 <template>
-	<div id="contact-header-avatar">
+	<div id="contact-header-avatar" :class="{'maximised':maximizeAvatar }">
 		<div class="contact-avatar-background" />
-		<img v-if="contact.photo" :src="contact.photo">
-		<input id="contact-avatar-upload" type="file" class="hidden"
-			accept="image/*" @change="processFile">
-		<label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" class="icon-upload-white" />
+		<img v-if="contact.photo" :src="contact.photo"
+			class="contact-header-avatar__picture"
+			@click="maximise">
+		<div class="avatar-options">
+			<input id="contact-avatar-upload" type="file" class="hidden"
+				accept="image/*" @change="processFile">
+			<label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" class="icon-upload-white" />
+			<div v-if="maximizeAvatar" class="icon-delete-white" @click="removePhoto" />
+			<div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="minimizePhoto" />
+			<div v-if="maximizeAvatar" class="icon-download-white" @click="downloadPhoto" />
+		</div>
 	</div>
 </template>
 
 <script>
-import rfcProps from '../../models/rfcProps.js'
 
 export default {
 	name: 'ContactAvatar',
@@ -43,6 +49,11 @@ export default {
 			required: true
 		}
 	},
+	data() {
+		return {
+			maximizeAvatar: false
+		}
+	},
 	methods: {
 		processFile(event) {
 			let file = event.target.files[0]
@@ -53,6 +64,26 @@ export default {
 				self.$store.dispatch('updateContact', self.contact)
 			}
 			reader.readAsDataURL(file)
+		},
+		maximise() {
+			// maximise avatar photo
+			this.maximizeAvatar = true
+		},
+		uploadPhoto() {
+			// upload avatar photo
+			console.log("upload") // eslint-disable-line
+		},
+		removePhoto() {
+			// remove avatar photo
+			console.log("remove") // eslint-disable-line
+		},
+		minimizePhoto() {
+			// minimize avatar photo
+			this.maximizeAvatar = false
+		},
+		downloadPhoto() {
+			// download avatar photo
+			console.log("download") // eslint-disable-line
 		}
 	}