From 6d6d668cb034b6d0b87131126eecba874d4949cf Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Wed, 8 Apr 2020 16:16:23 +0200
Subject: [PATCH] Frontend: Photos view UX and clean-up

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/component/p-photo-clipboard.vue |  2 +-
 frontend/src/component/p-photo-details.vue   |  5 +-
 frontend/src/component/p-photo-list.vue      | 71 +++++++++++++++-----
 frontend/src/component/p-photo-mosaic.vue    |  8 +++
 frontend/src/css/photos.css                  | 10 ++-
 frontend/src/pages/album/photos.vue          |  1 +
 frontend/src/pages/photos.vue                |  1 +
 7 files changed, 75 insertions(+), 23 deletions(-)

diff --git a/frontend/src/component/p-photo-clipboard.vue b/frontend/src/component/p-photo-clipboard.vue
index 09bae47c0..85035d2a9 100644
--- a/frontend/src/component/p-photo-clipboard.vue
+++ b/frontend/src/component/p-photo-clipboard.vue
@@ -31,7 +31,7 @@
                         @click.stop="dialog.share = true"
                         :disabled="selection.length === 0"
                         v-if="context !== 'archive'"
-                        class="p-photo-clipboard-private"
+                        class="p-photo-clipboard-share"
                 >
                     <v-icon>share</v-icon>
                 </v-btn>
diff --git a/frontend/src/component/p-photo-details.vue b/frontend/src/component/p-photo-details.vue
index 25212a725..b528d7354 100644
--- a/frontend/src/component/p-photo-details.vue
+++ b/frontend/src/component/p-photo-details.vue
@@ -68,10 +68,7 @@
                                 <h3 class="body-2 mb-2" :title="photo.PhotoTitle">
                                     <button @click.exact="editPhoto(index)">
                                         {{ photo.PhotoTitle | truncate(80) }}
-                                        <v-icon v-if="photo.PhotoPrivate" size="16" title="Private">vpn_key</v-icon>
-                                        <v-icon v-if="photo.PhotoStory" size="16"
-                                                title="Shared with your friends in the story feed">wifi
-                                        </v-icon>
+                                        <v-icon v-if="hover" size="16" title="edit">edit</v-icon>
                                     </button>
                                 </h3>
                                 <div class="caption">
diff --git a/frontend/src/component/p-photo-list.vue b/frontend/src/component/p-photo-list.vue
index 6f65221b8..a788e7e34 100644
--- a/frontend/src/component/p-photo-list.vue
+++ b/frontend/src/component/p-photo-list.vue
@@ -9,21 +9,35 @@
             v-model="selected"
             :no-data-text="this.$gettext('No photos matched your search')"
     >
-        <template slot="items" slot-scope="props" class="p-photo">
+        <template slot="items" slot-scope="props">
             <td>
-                <v-btn icon small :ripple="false"
-                       class="p-photo-select"
-                       @click.stop.prevent="$clipboard.toggle(props.item)">
-                    <v-icon v-if="selection.length && $clipboard.has(props.item)" color="accent darken-2">check_circle</v-icon>
-                    <v-icon v-else-if="!$clipboard.has(props.item)" color="accent lighten-4">radio_button_off</v-icon>
-                </v-btn>
+                <v-img :src="props.item.getThumbnailUrl('tile_50')"
+                       aspect-ratio="1"
+                       class="accent lighten-2"
+                       style="cursor: pointer"
+                       @click.exact="openPhoto(props.index)"
+                >
+                    <v-layout
+                            slot="placeholder"
+                            fill-height
+                            align-center
+                            justify-center
+                            ma-0
+                    >
+                        <v-progress-circular indeterminate
+                                             color="accent lighten-5"></v-progress-circular>
+                    </v-layout>
+                </v-img>
             </td>
-            <td class="p-photo-desc">
-                <button @click.stop.prevent="openPhoto(props.index)">
-                    {{ props.item.PhotoTitle }}
-                </button>
+            <td class="p-photo-desc" @click.exact="toggleSelection(props)">
+                <v-hover>
+                    <button @click.stop.prevent="editPhoto(props.index)" slot-scope="{ hover }">
+                        {{ props.item.PhotoTitle }}
+                        <v-icon v-if="hover" size="16" title="edit">edit</v-icon>
+                    </button>
+                </v-hover>
             </td>
-            <td class="hidden-xs-only p-photo-desc">
+            <td class="hidden-xs-only p-photo-desc" @click.exact="toggleSelection(props)">
                 <button v-if="props.item.LocationID" @click.stop.prevent="openLocation(props.index)">
                     {{ props.item.getLocation() }}
                 </button>
@@ -31,7 +45,7 @@
                     {{ props.item.getLocation() }}
                 </span>
             </td>
-            <td class="hidden-sm-and-down p-photo-desc">
+            <td class="hidden-sm-and-down p-photo-desc" @click.exact="toggleSelection(props)">
                 <button @click.stop.prevent="editPhoto(props.index)">
                     {{ props.item.CameraMake }} {{ props.item.CameraModel }}
                 </button>
@@ -41,11 +55,12 @@
                     {{ props.item.TakenAt | luxon:locale }}
                 </button>
             </td>
-            <td><v-btn icon small flat :ripple="false"
+            <td>
+                <v-btn icon small flat :ripple="false"
                        class="p-photo-like"
                        @click.stop.prevent="props.item.toggleLike()">
-                <v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
-                <v-icon v-else color="accent lighten-4">favorite_border</v-icon>
+                    <v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
+                    <v-icon v-else color="accent lighten-4">favorite_border</v-icon>
                 </v-btn>
             </td>
         </template>
@@ -75,7 +90,31 @@
                 ],
             };
         },
+        watch: {
+            photos: function (photos) {
+                this.selected.splice(0);
+
+                for (let i = 0; i <= photos.length; i++) {
+                    if(this.$clipboard.has(photos[i])) {
+                        this.selected.push(photos[i]);
+                    }
+                }
+            },
+            selection: function () {
+                this.selected.splice(0);
+
+                for (let i = 0; i <= this.photos.length; i++) {
+                    if(this.$clipboard.has(this.photos[i])) {
+                        this.selected.push(this.photos[i]);
+                    }
+                }
+            },
+        },
         methods: {
+            toggleSelection(props) {
+                this.$clipboard.toggle(props.item);
+                props.selected = this.$clipboard.has(props.item);
+            }
         }
     };
 </script>
diff --git a/frontend/src/component/p-photo-mosaic.vue b/frontend/src/component/p-photo-mosaic.vue
index 020f3a9be..7f2492090 100644
--- a/frontend/src/component/p-photo-mosaic.vue
+++ b/frontend/src/component/p-photo-mosaic.vue
@@ -53,6 +53,13 @@
                                 <v-icon v-if="photo.PhotoFavorite" color="white" class="t-like t-on">favorite</v-icon>
                                 <v-icon v-else color="accent lighten-3" class="t-like t-off">favorite_border</v-icon>
                             </v-btn>
+
+                            <v-btn v-if="hover" :flat="!hover" :ripple="false"
+                                   icon small absolute
+                                   class="p-photo-edit"
+                                   @click.stop.prevent="editPhoto(index)">
+                                <v-icon color="white">edit</v-icon>
+                            </v-btn>
                         </v-img>
 
                     </v-card>
@@ -68,6 +75,7 @@
             photos: Array,
             selection: Array,
             openPhoto: Function,
+            editPhoto: Function,
             album: Object,
         },
         methods: {
diff --git a/frontend/src/css/photos.css b/frontend/src/css/photos.css
index 4a7d27704..3685b604b 100644
--- a/frontend/src/css/photos.css
+++ b/frontend/src/css/photos.css
@@ -1,9 +1,9 @@
 #photoprism .p-col-select {
-    width: 50px;
+    width: 66px;
 }
 
 #photoprism .p-photo-list tr td:first-child {
-    padding: 0 0 0 16px;
+    padding: 0 0 0 8px;
     text-align: center;
 }
 
@@ -12,6 +12,12 @@
     margin-right: 0;
 }
 
+#photoprism .p-photo-tiles .p-photo-edit,
+#photoprism .p-photo-mosaic .p-photo-edit,
+#photoprism .p-photo-details .p-photo-edit {
+    top: 4px; right: 4px;
+}
+
 #photoprism .p-photo-tiles .p-photo-like,
 #photoprism .p-photo-mosaic .p-photo-like,
 #photoprism .p-photo-details .p-photo-like {
diff --git a/frontend/src/pages/album/photos.vue b/frontend/src/pages/album/photos.vue
index 0b7b85566..49b4122fb 100644
--- a/frontend/src/pages/album/photos.vue
+++ b/frontend/src/pages/album/photos.vue
@@ -19,6 +19,7 @@
                             :photos="results"
                             :selection="selection"
                             :album="model"
+                            :edit-photo="editPhoto"
                             :open-photo="openPhoto"></p-photo-mosaic>
             <p-photo-list v-else-if="settings.view === 'list'"
                           :photos="results"
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index b1a199242..15b0fd31b 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -16,6 +16,7 @@
             <p-photo-mosaic v-if="settings.view === 'mosaic'"
                             :photos="results"
                             :selection="selection"
+                            :edit-photo="editPhoto"
                             :open-photo="openPhoto"></p-photo-mosaic>
             <p-photo-list v-else-if="settings.view === 'list'"
                           :photos="results"