From 3b69981ea0cc0caa701f1713fc5f7011dd96bcb1 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Tue, 13 Aug 2024 20:05:00 +0200
Subject: [PATCH] [5.x] Fix asset tile buttons in read-only mode (#10622)

---
 .../fieldtypes/assets/AssetTile.vue           | 59 ++++++++++---------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 0ee58285fb..f2f6a551b3 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -38,37 +38,40 @@
                     </template>
                 </template>
 
-                <div class="asset-controls" v-if="!readOnly">
-                    <div class="h-full w-full flex items-center justify-center space-x-1 rtl:space-x-reverse">
-                        <button @click="edit" class="btn btn-icon" :title="__('Edit')">
-                            <svg-icon name="micro/sharp-pencil" class="h-4 my-2" />
-                        </button>
-
-                        <button @click="remove" class="btn btn-icon" :title="__('Remove')">
-                            <span class="text-lg antialiased w-4">×</span>
-                        </button>
+                <div class="asset-controls">
+                    <div class="flex items-center justify-center space-x-1 rtl:space-x-reverse">
+                        <template v-if="!readOnly">
+                            <button @click="edit" class="btn btn-icon" :title="__('Edit')">
+                                <svg-icon name="micro/sharp-pencil" class="h-4 my-2" />
+                            </button>
+
+                            <button @click="remove" class="btn btn-icon" :title="__('Remove')">
+                                <span class="text-lg antialiased w-4">×</span>
+                            </button>
+                        </template>
+
+                        <template v-else>
+                            <button
+                                v-if="asset.url && asset.isMedia && this.canDownload"
+                                @click="open"
+                                class="btn btn-icon"
+                                :title="__('Open in a new window')"
+                            >
+                                <svg-icon name="light/external-link" class="h-4 my-2" />
+                            </button>
+
+                            <button
+                                v-if="asset.allowDownloading && this.canDownload"
+                                @click="download"
+                                class="btn btn-icon"
+                                :title="__('Download file')"
+                            >
+                                <svg-icon name="light/download" class="h-4 my-2" />
+                            </button>
+                        </template>
                     </div>
                 </div>
 
-                <div class="asset-controls" v-if="readOnly">
-                    <button
-                        v-if="asset.url && asset.isMedia && this.canDownload"
-                        @click="open"
-                        class="btn btn-icon"
-                        :title="__('Open in a new window')"
-                    >
-                        <svg-icon name="light/external-link" class="h-4 my-2" />
-                    </button>
-
-                    <button
-                        v-if="asset.allowDownloading && this.canDownload"
-                        @click="download"
-                        class="btn btn-icon"
-                        :title="__('Download file')"
-                    >
-                        <svg-icon name="download" class="h-4 my-2" />
-                    </button>
-                </div>
             </div>
         </div>