From 50515d6c7e0aaf4ffc94fbc2b0ca34fcc40e96d1 Mon Sep 17 00:00:00 2001
From: Ashish Baravaliya <49753983+AshishBarvaliya@users.noreply.github.com>
Date: Mon, 24 Jul 2023 07:22:17 -0400
Subject: [PATCH] feat: Disabling editing disables zoom (#19221)

* feat: Disabling editing disables zoom

* Update changeset

* Allow downloading when readonly

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: ian <licitdev@gmail.com>
---
 .changeset/hot-colts-type.md                 |  5 +++++
 app/src/interfaces/file-image/file-image.vue | 22 +++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/hot-colts-type.md

diff --git a/.changeset/hot-colts-type.md b/.changeset/hot-colts-type.md
new file mode 100644
index 0000000000..fe1343f1ee
--- /dev/null
+++ b/.changeset/hot-colts-type.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Enabled zoom view on readonly image interfaces
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index 5c52d37097..57a5a5e185 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -31,7 +31,7 @@
 
 			<div class="shadow" />
 
-			<div v-if="!disabled" class="actions">
+			<div class="actions">
 				<v-button v-tooltip="t('zoom')" icon rounded @click="lightboxActive = true">
 					<v-icon name="zoom_in" />
 				</v-button>
@@ -44,15 +44,17 @@
 				>
 					<v-icon name="download" />
 				</v-button>
-				<v-button v-tooltip="t('edit')" icon rounded @click="editImageDetails = true">
-					<v-icon name="open_in_new" />
-				</v-button>
-				<v-button v-if="updateAllowed" v-tooltip="t('edit_image')" icon rounded @click="editImageEditor = true">
-					<v-icon name="tune" />
-				</v-button>
-				<v-button v-tooltip="t('deselect')" icon rounded @click="deselect">
-					<v-icon name="close" />
-				</v-button>
+				<template v-if="!disabled">
+					<v-button v-tooltip="t('edit')" icon rounded @click="editImageDetails = true">
+						<v-icon name="open_in_new" />
+					</v-button>
+					<v-button v-if="updateAllowed" v-tooltip="t('edit_image')" icon rounded @click="editImageEditor = true">
+						<v-icon name="tune" />
+					</v-button>
+					<v-button v-tooltip="t('deselect')" icon rounded @click="deselect">
+						<v-icon name="close" />
+					</v-button>
+				</template>
 			</div>
 
 			<div class="info">