Merge branch 'AssetManagement/max-image-bigger' into 'master'

added possibility for clicking image to make it bigger

See merge request fronk/thetool!1515

public/js/pages/AssetManagement/AssetManagement.css

@@ -20,4 +20,45 @@
     justify-content: center;
     color: #aaa;
     font-size: 24px;
+}
+/* CSS for the full-screen image overlay */
+.tt-fullscreen-image-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    cursor: zoom-out; /* Indicate it's closable */
+    /* Ensure it can receive keyboard events for 'esc' */
+    outline: none;
+}
+
+.tt-fullscreen-image {
+    max-width: 90%;
+    max-height: 90%;
+    object-fit: contain;
+    cursor: default; /* Change cursor back to default when over the image */
+}
+
+.tt-fullscreen-close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+    z-index: 10000;
+    padding: 0;
+    line-height: 1;
+}
+
+.tt-fullscreen-close-btn:hover {
+    color: #f0f0f0;
 }

public/js/pages/AssetManagement/AssetManagement.js

@@ -109,20 +109,60 @@ Vue.component('tt-asset-image', {
     props: {
         imageId: Number,
     },
+    data() {
+        return {
+            isFullScreen: false,
+        };
+    },
     template: `
-      <div class="asset-image-container">
-        <img v-if="imageId" :src="'/File/show?id=' + imageId" @error="onImageError" class="asset-image"/>
+      <div class="asset-image-container" :style="{ cursor: imageId ? 'pointer' : 'default' }">
+        <img v-if="imageId" :src="'/File/show?id=' + imageId" @error="onImageError" @click="openFullScreen" class="asset-image"/>
         <div v-else class="asset-image-placeholder">
           <i class="fas fa-camera"></i>
         </div>
+
+        <div v-if="isFullScreen"
+             class="tt-fullscreen-image-overlay"
+             @click.self="closeFullScreen"
+             @keydown.esc="closeFullScreen"
+             tabindex="-1"
+             ref="fullScreenOverlay">
+          <img :src="'/File/show?id=' + imageId"
+               class="tt-fullscreen-image"
+               @click.stop /> <button class="tt-fullscreen-close-btn" @click="closeFullScreen">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
       </div>
     `,
     methods: {
         onImageError(event) {
             event.target.src = 'https://placehold.co/60x60/eee/ccc?text=Error'; // Fallback placeholder
+        },
+        openFullScreen() {
+            if (this.imageId) { // Only open if an image exists
+                this.isFullScreen = true;
+                this.$nextTick(() => {
+                    if (this.$refs.fullScreenOverlay) {
+                        this.$refs.fullScreenOverlay.focus(); // Focus the overlay to capture keydown events
+                    }
+                });
+            }
+        },
+        closeFullScreen() {
+            this.isFullScreen = false;
+        }
+    },
+    watch: {
+        isFullScreen(newVal) {
+            if (newVal) {
+                document.body.style.overflow = 'hidden'; // Prevent scrolling when full screen
+            } else {
+                document.body.style.overflow = ''; // Restore scrolling
+            }
         }
     }
-});
+});;
 
 
 // =================================================================================