From 3ac22ab1051c86b804f9615e0fd9a13cb51b4590 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Tue, 21 May 2019 02:27:08 +0200
Subject: [PATCH] Frontend: Add clear button to photo menu #15

---
 Makefile                      |  2 ++
 frontend/src/css/photos.css   |  5 +++++
 frontend/src/pages/photos.vue | 24 ++++++++++++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/Makefile b/Makefile
index 61b89c51f..f1255c94f 100644
--- a/Makefile
+++ b/Makefile
@@ -40,6 +40,8 @@ build-js:
 	(cd frontend &&	env NODE_ENV=production npm run build)
 build-go:
 	scripts/build.sh debug $(BINARY_NAME)
+watch-js:
+	(cd frontend &&	env NODE_ENV=development npm run dev)
 test-js:
 	(cd frontend &&	env NODE_ENV=development npm run test)
 test-chromium:
diff --git a/frontend/src/css/photos.css b/frontend/src/css/photos.css
index 554a5ce68..3c55fc3b2 100644
--- a/frontend/src/css/photos.css
+++ b/frontend/src/css/photos.css
@@ -28,3 +28,8 @@
 #photoprism .p-photo-list .v-datatable {
     border-radius: 10px;
 }
+
+#photoprism .p-photo-menu {
+    right: 8px;
+    bottom: 8px;
+}
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index a69ee6d3c..b2f4b3c80 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -79,9 +79,9 @@
                     bottom
                     right
                     direction="top"
-                    open-on-hover
+                    v-model="menuVisible"
                     transition="slide-y-reverse-transition"
-                    style="right: 8px; bottom: 8px;"
+                    class="p-photo-menu"
             >
                 <v-btn
                         slot="activator"
@@ -92,11 +92,22 @@
                     <v-icon v-if="selected.length === 0">menu</v-icon>
                     <span v-else>{{ selected.length }}</span>
                 </v-btn>
+                <v-btn
+                        fab
+                        dark
+                        small
+                        color="grey"
+                        @click.stop="clearSelection()"
+                        v-if="selected.length > 0"
+                >
+                    <v-icon>clear</v-icon>
+                </v-btn>
                 <v-btn
                         fab
                         dark
                         small
                         color="deep-purple lighten-2"
+                        @click.stop="batchLike()"
                 >
                     <v-icon>favorite</v-icon>
                 </v-btn>
@@ -132,6 +143,7 @@
                         dark
                         small
                         color="delete"
+                        @click.stop="batchDelete()"
                 >
                     <v-icon>delete</v-icon>
                 </v-btn>
@@ -379,6 +391,7 @@
                 'pageSize': 60,
                 'offset': 0,
                 'loadMoreDisabled': true,
+                'menuVisible': false,
                 'submitTimeout': false,
                 'selected': [],
                 'dialog': false,
@@ -414,8 +427,15 @@
             };
         },
         methods: {
+            batchLike() {
+                this.menuVisible = false;
+            },
+            batchDelete() {
+                this.menuVisible = false;
+            },
             clearSelection() {
                 this.selected = [];
+                this.menuVisible = false;
             },
             selectPhoto(photo) {
                 const index = this.selected.indexOf(photo.ID);