[5.x] Fix asset tile buttons in read-only mode (#10622)

statamic · Aug 13, 2024 · 3b69981 · 3b69981
1 parent c6180f6
commit 3b69981
Showing 1 changed file with 31 additions and 28 deletions.
diff --git 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>