Merge pull request #1832 from nextcloud/enhancement/unassigned-faces

enh(faces): Implement UnassignedFaces view

js/photos-node_modules_vue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-d17f7e.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

js/photos-src_mixins_AbortControllerMixin_js-src_views_Faces_vue.js.LICENSE.txt

@@ -1,3 +1,5 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
 /**
  * @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
  *

src/components/FaceCover.vue → src/components/Faces/FaceCover.vue

@@ -46,8 +46,8 @@
 <script>
 import { mapGetters } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
-import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
-import FaceCoverMixin from '../mixins/FaceCoverMixin.js'
+import FetchFacesMixin from '../../mixins/FetchFacesMixin.js'
+import FaceCoverMixin from '../../mixins/FaceCoverMixin.js'
 
 export default {
 	name: 'FaceCover',
@@ -142,73 +142,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.face-cover {
-	display: flex;
-	flex-direction: column;
-	padding: 10px;
-	border-radius: var(--border-radius-large);
-
-	&__crop-container {
-		overflow: hidden;
-		width: 128px;
-		height: 128px;
-		border-radius: 128px;
-		position: relative;
-		background: var(--color-background-darker);
-		--photos-face-width: 128px;
-
-		@media only screen and (max-width: 1020px) {
-			width: 95px;
-			height: 95px;
-			--photos-face-width: 95px;
-		}
-	}
-
-	&:hover, &:focus {
-		background: var(--color-background-hover);
-	}
-
-	&__details {
-		display: flex;
-		flex-direction: column;
-		width: 128px;
-		margin-top: 4px;
-		text-align: center;
-
-		@media only screen and (max-width: 1020px) {
-			width: 95px;
-		}
-
-		&__first-line {
-			display: flex;
-			height: 2em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		&__second-line {
-			margin-top: 6px;
-			color: var(--color-text-maxcontrast);
-		}
-
-		&__name {
-			flex-grow: 1;
-			margin: 0;
-		}
-	}
-}
-
-.face-cover--small {
-	* {
-		font-size: 15px !important;
-	}
-	.face-cover__details {
-		width: 60px !important;
-	}
-	.face-cover__crop-container {
-		width: 60px !important;
-		height: 60px !important;
-		--photos-face-width: 60px !important;
-	}
-}
+@import '../../mixins/FaceCover';
 </style>

src/components/FaceMergeForm.vue → src/components/Faces/FaceMergeForm.vue

@@ -32,8 +32,8 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import FaceCoverMixin from '../mixins/FaceCoverMixin.js'
-import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
+import FaceCoverMixin from '../../mixins/FaceCoverMixin.js'
+import FetchFacesMixin from '../../mixins/FetchFacesMixin.js'
 import FaceCover from './FaceCover.vue'
 
 export default {

src/components/Faces/UnassignedFacesCover.vue

@@ -0,0 +1,78 @@
+<!--
+ - @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
+ - @copyright Copyright (c) 2022 Marcel Klehr <mklehr@gmx.net>
+ -
+ - @author Louis Chemineau <louis@chmn.me>
+ - @author Marcel Klehr <mklehr@gmx.net>
+ -
+ - @license AGPL-3.0-or-later
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+<template>
+	<div :class="['face-cover', small && 'face-cover--small']" @click="$emit('click')">
+		<div class="face-cover__crop-container">
+			<AccountOffIcon :size="'auto'" :fill-color="colorMainBackground" />
+		</div>
+		<div class="face-cover__details">
+			<div v-if="!small" class="face-cover__details__second-line">
+				{{ n('photos', '%n unassigned photo', '%n unassigned photos', unassignedFilesCount) }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import FetchFacesMixin from '../../mixins/FetchFacesMixin.js'
+import FaceCoverMixin from '../../mixins/FaceCoverMixin.js'
+import AccountOffIcon from 'vue-material-design-icons/AccountOff.vue'
+
+export default {
+	name: 'UnassignedFacesCover',
+
+	components: { AccountOffIcon },
+
+	mixins: [
+		FetchFacesMixin,
+		FaceCoverMixin,
+	],
+
+	props: {
+		small: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		...mapGetters([
+			'unassignedFilesCount',
+		]),
+		colorMainBackground() {
+			return getComputedStyle(document.documentElement).getPropertyValue('--color-main-background')
+		},
+	},
+
+	async mounted() {
+		await this.fetchUnassignedFacesCount()
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../mixins/FaceCover';
+</style>

src/mixins/FaceContent.scss

@@ -0,0 +1,111 @@
+/**
+ * @copyright Copyright (c) 2023 Marcel Klehr <mklehr@gmx.net>
+ *
+ * @author Marcel Klehr <mklehr@gmx.net>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+.face {
+	display: flex;
+	flex-direction: column;
+
+	&__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		&__button {
+			margin-top: 32px;
+		}
+
+	}
+
+	&__header {
+		display: flex;
+		min-height: 60px;
+		align-items: center;
+		justify-content: space-between;
+		position: sticky;
+		z-index: 3;
+		background: var(--color-main-background);
+		padding: 0 64px;
+
+		@media only screen and (max-width: 1020px) {
+			padding: 0;
+			padding-left: 64px;
+		}
+
+		&__left {
+			height: 100%;
+			display: flex;
+			align-items: center;
+		}
+
+		&__title {
+			margin-left: 10px;
+			h2 {
+				margin-bottom: 0;
+			}
+		}
+
+		&__loader {
+			margin-left: 32px;
+		}
+
+		&__actions {
+			display: flex;
+			align-items: center;
+
+			button {
+				margin-left: 16px;
+			}
+		}
+	}
+
+	&__photos {
+		margin-top: 16px;
+		height: 100%;
+		min-height: 0; // Prevent it from overflowing in a flex context.
+		padding: 0 64px;
+
+		@media only screen and (max-width: 1020px) {
+			padding: 0;
+		}
+	}
+}
+
+.empty-content-with-illustration :deep .empty-content__icon {
+	width: 200px;
+	height: 200px;
+
+	svg {
+		width: 200px;
+		height: 200px;
+	}
+}
+
+.rename-form {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	height: 70px;
+	padding: 16px;
+
+	input {
+		width: 80%;
+	}
+}

src/mixins/FaceCover.scss

@@ -0,0 +1,90 @@
+/**
+ * @copyright Copyright (c) 2023 Marcel Klehr <mklehr@gmx.net>
+ *
+ * @author Marcel Klehr <mklehr@gmx.net>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+.face-cover {
+	display: flex;
+	flex-direction: column;
+	padding: 10px;
+	border-radius: var(--border-radius-large);
+
+	&__crop-container {
+		overflow: hidden;
+		width: 128px;
+		height: 128px;
+		border-radius: 128px;
+		position: relative;
+		background: var(--color-background-darker);
+		--photos-face-width: 128px;
+
+		@media only screen and (max-width: 1020px) {
+			width: 95px;
+			height: 95px;
+			--photos-face-width: 95px;
+		}
+	}
+
+	&:hover, &:focus {
+		background: var(--color-background-hover);
+	}
+
+	&__details {
+		display: flex;
+		flex-direction: column;
+		width: 128px;
+		margin-top: 4px;
+		text-align: center;
+
+		@media only screen and (max-width: 1020px) {
+			width: 95px;
+		}
+
+		&__first-line {
+			display: flex;
+			height: 2em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&__second-line {
+			margin-top: 6px;
+			color: var(--color-text-maxcontrast);
+		}
+
+		&__name {
+			flex-grow: 1;
+			margin: 0;
+		}
+	}
+}
+
+.face-cover--small {
+	* {
+		font-size: 15px !important;
+	}
+	.face-cover__details {
+		width: 60px !important;
+	}
+	.face-cover__crop-container {
+		width: 60px !important;
+		height: 60px !important;
+		--photos-face-width: 60px !important;
+	}
+}