Merge FaceCover and FaceCoverSmall

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

src/components/FaceCover.vue

@@ -23,7 +23,7 @@
  -->
 
 <template>
-	<router-link class="face-cover" :to="`/faces/${baseName}`">
+	<div :class="['face-cover', small && 'face-cover--small']" @click="$emit('click')">
 		<div class="face-cover__crop-container">
 			<img ref="image"
 				class="face-cover__image"
@@ -36,11 +36,11 @@
 					{{ baseName }}
 				</h2>
 			</div>
-			<div v-if="facesFiles[baseName]" class="face-cover__details__second-line">
+			<div v-if="facesFiles[baseName] && !small" class="face-cover__details__second-line">
 				{{ n('photos', '%n photos', '%n photos', facesFiles[baseName].length,) }}
 			</div>
 		</div>
-	</router-link>
+	</div>
 </template>
 
 <script>
@@ -62,6 +62,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		small: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -113,12 +117,16 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		this.observer.disconnect()
+	},
+
 	methods: {
 		async fetchFiles() {
 			await this.fetchFaceContent(this.face.basename)
 		},
 		waitForVisible(el, listener) {
-			const observer = new IntersectionObserver((entries, observer) => {
+			this.observer = new IntersectionObserver((entries, observer) => {
 				entries.forEach(entry => {
 					if (entry.intersectionRatio > 0) {
 						listener()
@@ -127,7 +135,7 @@ export default {
 				})
 			})
 
-			observer.observe(el)
+			this.observer.observe(el)
 		},
 	},
 }
@@ -156,6 +164,14 @@ export default {
 		}
 	}
 
+	&.face-cover--small {
+		.face-cover__crop-container {
+			width: 60px !important;
+			height: 60px !important;
+			--photos-face-width: 60px !important;
+		}
+	}
+
 	&:hover, &:focus {
 		background: var(--color-background-hover);
 	}
@@ -188,5 +204,14 @@ export default {
 			margin: 0;
 		}
 	}
+
+	&.face-cover--small {
+		* {
+			font-size: 15px !important;
+		}
+		.face-cover__details {
+			width: 60px !important;
+		}
+	}
 }
 </style>

src/components/FaceMergeForm.vue

@@ -21,9 +21,10 @@
  -->
 <template>
 	<div class="merge-form face-list">
-		<FaceCoverSmall v-for="face in filteredFaces"
+		<FaceCover v-for="face in filteredFaces"
 			:key="face.basename"
 			:base-name="face.basename"
+			small
 			@click="handleSelect(face.basename)" />
 	</div>
 </template>
@@ -33,11 +34,11 @@ import { mapGetters } from 'vuex'
 
 import FaceCoverMixin from '../mixins/FaceCoverMixin.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
-import FaceCoverSmall from './FaceCoverSmall.vue'
+import FaceCover from './FaceCover.vue'
 
 export default {
 	name: 'FaceMergeForm',
-	components: { FaceCoverSmall },
+	components: { FaceCover },
 	mixins: [
 		FaceCoverMixin,
 		FetchFacesMixin,

src/views/Faces.vue

@@ -45,9 +45,11 @@
 		</div>
 
 		<div v-else-if="!noFaces" class="faces__list">
-			<FaceCover v-for="face in orderedFaces"
+			<router-link v-for="face in orderedFaces"
 				:key="face.basename"
-				:base-name="face.basename" />
+				:to="`/faces/${face.basename}`">
+				<FaceCover :base-name="face.basename" />
+			</router-link>
 		</div>
 	</div>
 </template>