From 4470b09807019983fd9552c7e1af19cf6f22d6c8 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Fri, 17 Sep 2021 09:45:52 +0200
Subject: [PATCH] People: Remove unrecognized faces #22

---
 frontend/src/css/results.css         |  7 ++++++
 frontend/src/dialog/photo/people.vue | 37 +++++++++++++---------------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/frontend/src/css/results.css b/frontend/src/css/results.css
index d39329825..c46b02f0a 100644
--- a/frontend/src/css/results.css
+++ b/frontend/src/css/results.css
@@ -245,6 +245,13 @@ body.chrome #photoprism .search-results .result {
     display: none;
 }
 
+#photoprism .cards-view .input-reject,
+#photoprism .mosaic-view .input-reject {
+    opacity: 0.75;
+    top: 4px;
+    right: 4px;
+}
+
 #photoprism .cards-view .input-private,
 #photoprism .mosaic-view .input-private {
     visibility: hidden;
diff --git a/frontend/src/dialog/photo/people.vue b/frontend/src/dialog/photo/people.vue
index e53e557f2..8aae00a10 100644
--- a/frontend/src/dialog/photo/people.vue
+++ b/frontend/src/dialog/photo/people.vue
@@ -29,23 +29,20 @@
                    :transition="false"
                    aspect-ratio="1"
                    class="accent lighten-2">
+              <v-btn v-if="!marker.SubjectUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject"
+                     icon flat small absolute :title="$gettext('Remove')"
+                     @click.stop.prevent="onReject(marker)">
+                <v-icon color="white" class="action-reject">clear</v-icon>
+              </v-btn>
             </v-img>
 
             <v-card-actions class="card-details pa-0">
-              <v-layout v-if="marker.Review || marker.Invalid" row wrap align-center>
-                <v-flex xs6 class="text-xs-center pa-0">
-                  <v-btn color="transparent" :disabled="busy"
-                         large depressed block :round="false"
-                         class="action-archive text-xs-center"
-                         :title="$gettext('Reject')" @click.stop="reject(marker)">
-                    <v-icon dark>clear</v-icon>
-                  </v-btn>
-                </v-flex>
-                <v-flex xs6 class="text-xs-center pa-0">
+              <v-layout v-if="marker.Invalid" row wrap align-center>
+                <v-flex xs12 class="text-xs-center pa-0">
                   <v-btn color="transparent" :disabled="busy"
                          large depressed block :round="false"
                          class="action-approve text-xs-center"
-                         :title="$gettext('Approve')" @click.stop="approve(marker)">
+                         :title="$gettext('Approve')" @click.stop="onApprove(marker)">
                     <v-icon dark>check</v-icon>
                   </v-btn>
                 </v-flex>
@@ -63,9 +60,9 @@
                       solo-inverted
                       clearable
                       clear-icon="eject"
-                      @click:clear="clearSubject(marker)"
-                      @change="rename(marker)"
-                      @keyup.enter.native="rename(marker)"
+                      @click:clear="onClearSubject(marker)"
+                      @change="onRename(marker)"
+                      @keyup.enter.native="onRename(marker)"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
@@ -90,8 +87,8 @@
                       prepend-inner-icon="person_add"
                       browser-autocomplete="off"
                       class="input-name pa-0 ma-0"
-                      @change="rename(marker)"
-                      @keyup.enter.native="rename(marker)"
+                      @change="onRename(marker)"
+                      @keyup.enter.native="onRename(marker)"
                   >
                   </v-combobox>
                 </v-flex>
@@ -133,19 +130,19 @@ export default {
   methods: {
     refresh() {
     },
-    reject(marker) {
+    onReject(marker) {
       this.busy = true;
       marker.reject().finally(() => this.busy = false);
     },
-    approve(marker) {
+    onApprove(marker) {
       this.busy = true;
       marker.approve().finally(() => this.busy = false);
     },
-    clearSubject(marker) {
+    onClearSubject(marker) {
       this.busy = true;
       marker.clearSubject(marker).finally(() => this.busy = false);
     },
-    rename(marker) {
+    onRename(marker) {
       this.busy = true;
       marker.rename().finally(() => this.busy = false);
     },