Feature: add a Button to Open the Edit Dialog #4701

frontend/src/component/photo/dialog/edit/labels.vue

@@ -3,7 +3,9 @@
     <v-form ref="form" validate-on="blur" accept-charset="UTF-8" @submit.prevent>
       <v-row class="pa-2-md-and-up d-flex align-stretch" align="start">
         <v-col class="pa-2 hidden-sm-and-down align-stretch" cols="12" md="2" xxl="1">
-          <p-photo-preview :model="model"></p-photo-preview>
+          <v-card tile color="background" class="pa-0 ma-0 elevation-0 flex-grow-1">
+            <v-img :src="model.thumbnailUrl('tile_500')" aspect-ratio="1" rounded="6" class="card elevation-0 clickable" @click.exact="openPhoto()"></v-img>
+          </v-card>
         </v-col>
         <v-col class="pa-2-md-and-up" cols="12" md="10" xxl="11">
           <v-data-table

frontend/src/component/viewer.vue

@@ -341,6 +341,26 @@ export default {
             },
           });
         }
+
+        // Add edit button if user has permission to edit pictures,
+        // see https://photoswipe.com/adding-ui-elements/.
+        if (this.canEdit) {
+          lightbox.pswp.ui.registerElement({
+            name: "edit-button",
+            className: "pswp__button--edit-button pswp__button--mdi", // Sets the icon style/size in viewer.css.
+            order: 10,
+            isButton: true,
+            html: {
+              isCustomSVG: true,
+              inner: `<path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" id="pswp__icn-edit" />`,
+              outlineID: "pswp__icn-edit", // Add this to the <path> in the inner property.
+              size: 26, // Depends on the original SVG viewBox, e.g. use 24 for viewBox="0 0 24 24".
+            },
+            onClick: () => {
+              return this.onEdit();
+            },
+          });
+        }
       });
 
       // Trigger onChange() event handler when slide is changed and on initialization,
@@ -685,13 +705,13 @@ export default {
       new Photo().find(this.model.UID).then((p) => p.downloadAll());
     },
     onEdit() {
-      this.onPause();
+      this.pauseSlideshow();
 
       const pswp = this.pswp();
       let index = 0;
 
       // remove duplicates
-      let filtered = pswp.items.filter(function (p, i, s) {
+      let filtered = this.models?.filter(function (p, i, s) {
         return !(i > 0 && p.UID === s[i - 1].UID);
       });