[6.x] Asset Browser: Show actions in context menu (#11791)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: duncanmcclean

resources/js/components/assets/Browser/Grid.vue

@@ -4,38 +4,37 @@
             <breadcrumbs v-if="!restrictFolderNavigation" :path="path" @navigated="selectFolder" />
             <ui-slider size="sm" class="mr-2 w-24!" variant="subtle" v-model="thumbnailSize" :min="60" :max="300" :step="25" />
         </ui-panel-header>
-        <!-- Folders -->
+
         <ui-card class="space-y-8">
+            <!-- Folders -->
             <section class="folder-grid-listing" v-if="folders.length">
                 <div
                     class="group/folder relative"
                     v-for="folder in folders"
                     :key="folder.path"
                     v-if="!restrictFolderNavigation"
                 >
-                    <button @dblclick="selectFolder(folder.path)" class="w-[80px] h-[66px] group">
-                        <ui-icon name="asset-folder" class="size-full text-blue-400/90 hover:text-blue-400" />
-                        <div
-                            class="font-mono text-xs text-gray-500 text-center overflow-hidden text-ellipsis whitespace-nowrap"
-                            v-text="folder.basename"
-                            :title="folder.basename"
-                        />
-                    </button>
-                    <dropdown-list
-                        v-if="folderActions(folder).length"
-                        class="absolute top-1 opacity-0 group-hover:opacity-100 end-2"
-                        :class="{ 'opacity-100': actionOpened === folder.path }"
-                        @opened="actionOpened = folder.path"
-                        @closed="actionOpened = null"
-                    >
-                        <data-list-inline-actions
-                            :item="folder.path"
-                            :url="folderActionUrl"
-                            :actions="folderActions(folder)"
-                            @started="actionStarted"
-                            @completed="actionCompleted"
-                        />
-                    </dropdown-list>
+                    <Context>
+                        <template #trigger>
+                            <button @dblclick="selectFolder(folder.path)" class="group h-[66px] w-[80px]">
+                                <ui-icon name="asset-folder" class="size-full text-blue-400/90 hover:text-blue-400" />
+                                <div
+                                    class="overflow-hidden text-center font-mono text-xs text-ellipsis whitespace-nowrap text-gray-500"
+                                    v-text="folder.basename"
+                                    :title="folder.basename"
+                                />
+                            </button>
+                        </template>
+                        <ContextMenu v-if="folderActions(folder).length">
+                            <data-list-inline-actions
+                                :item="folder.path"
+                                :url="folderActionUrl"
+                                :actions="folderActions(folder)"
+                                @started="actionStarted"
+                                @completed="actionCompleted"
+                            />
+                        </ContextMenu>
+                    </Context>
                 </div>
                 <div v-if="creatingFolder" class="group/folder relative">
                     <div class="group h-[66px] w-[80px]">
@@ -59,62 +58,70 @@
             </section>
 
             <!-- Assets -->
-            <section class="asset-grid-listing"
-                v-if="assets.length"
-                :style="{ gridTemplateColumns: gridSize }"
-            >
+            <section class="asset-grid-listing" v-if="assets.length" :style="{ gridTemplateColumns: gridSize }">
                 <div
                     v-for="(asset, index) in assets"
                     :key="asset.id"
                     class="group relative"
-                    :class="{ 'selected': isSelected(asset.id) }"
+                    :class="{ selected: isSelected(asset.id) }"
                 >
-                    <div class="asset-tile group relative" :class="{ 'bg-checkerboard': asset.can_be_transparent }">
-                        <button
-                            class="size-full"
-                            @click.stop="toggleSelection(asset.id, index, $event)"
-                            @dblclick.stop="$emit('edit-asset', asset)"
-                        >
-                            <div class="relative flex items-center justify-center aspect-square size-full">
-                                <div class="asset-thumb">
-                                    <img
-                                        v-if="asset.is_image"
-                                        :src="asset.thumbnail"
-                                        loading="lazy"
-                                        :class="{
-                                            'size-full p-4': asset.extension === 'svg',
-                                            'p-1 rounded-lg': asset.orientation === 'square'
-                                        }"
+                    <Context>
+                        <template #trigger>
+                            <div class="asset-tile group relative" :class="{ 'bg-checkerboard': asset.can_be_transparent }">
+                                <button
+                                    class="size-full"
+                                    @click.stop="toggleSelection(asset.id, index, $event)"
+                                    @dblclick.stop="$emit('edit-asset', asset)"
+                                >
+                                    <div class="relative flex aspect-square size-full items-center justify-center">
+                                        <div class="asset-thumb">
+                                            <img
+                                                v-if="asset.is_image"
+                                                :src="asset.thumbnail"
+                                                loading="lazy"
+                                                :class="{
+                                                    'size-full p-4': asset.extension === 'svg',
+                                                    'rounded-lg p-1': asset.orientation === 'square',
+                                                }"
+                                            />
+                                            <file-icon v-else :extension="asset.extension" class="size-1/2" />
+                                        </div>
+                                    </div>
+                                </button>
+                                <dropdown-list
+                                    class="absolute top-1 opacity-0 group-hover:opacity-100 end-2"
+                                    :class="{ 'opacity-100': actionOpened === asset.id }"
+                                    @opened="actionOpened = asset.id"
+                                    @closed="actionOpened = null"
+                                >
+                                    <dropdown-item
+                                        :text="__(canEdit ? 'Edit' : 'View')"
+                                        @click="edit(asset.id)"
+                                    />
+                                    <div class="divider" v-if="asset.actions.length" />
+                                    <data-list-inline-actions
+                                        :item="asset.id"
+                                        :url="actionUrl"
+                                        :actions="asset.actions"
+                                        @started="actionStarted"
+                                        @completed="actionCompleted"
                                     />
-                                    <file-icon v-else :extension="asset.extension" class="size-1/2" />
-                                </div>
+                                </dropdown-list>
                             </div>
-                        </button>
-                        <dropdown-list
-                            class="absolute top-1 opacity-0 group-hover:opacity-100 end-2"
-                            :class="{ 'opacity-100': actionOpened === asset.id }"
-                            @opened="actionOpened = asset.id"
-                            @closed="actionOpened = null"
-                        >
-                            <dropdown-item
-                                :text="__(canEdit ? 'Edit' : 'View')"
-                                @click="edit(asset.id)"
-                            />
-                            <div class="divider" v-if="asset.actions.length" />
+                        </template>
+                        <ContextMenu>
+                            <ContextItem icon="edit" :text="__(canEdit ? 'Edit' : 'View')" @click="edit(asset.id)" />
+                            <ContextSeparator />
                             <data-list-inline-actions
                                 :item="asset.id"
                                 :url="actionUrl"
                                 :actions="asset.actions"
                                 @started="actionStarted"
                                 @completed="actionCompleted"
                             />
-                        </dropdown-list>
-                    </div>
-                    <div
-                        class="asset-filename"
-                        v-text="truncateFilename(asset.basename)"
-                        :title="asset.basename"
-                    />
+                        </ContextMenu>
+                    </Context>
+                    <div class="asset-filename" v-text="truncateFilename(asset.basename)" :title="asset.basename" />
                 </div>
             </section>
         </ui-card>
@@ -129,11 +136,23 @@ import AssetBrowserMixin from './AssetBrowserMixin';
 import Breadcrumbs from './Breadcrumbs.vue';
 import { debounce } from 'lodash-es';
 import { EditableArea, EditableInput, EditablePreview, EditableRoot } from 'reka-ui';
-import { Editable } from '@statamic/ui';
+import { Context, ContextMenu, ContextItem, ContextLabel, ContextSeparator, Editable } from '@statamic/ui';
 
 export default {
     mixins: [AssetBrowserMixin],
-    components: { Editable, EditableInput, EditablePreview, EditableArea, EditableRoot, Breadcrumbs },
+    components: {
+        ContextItem,
+        ContextLabel,
+        ContextMenu,
+        ContextSeparator,
+        Context,
+        Editable,
+        EditableInput,
+        EditablePreview,
+        EditableArea,
+        EditableRoot,
+        Breadcrumbs,
+    },
     props: {
         assets: { type: Array },
         selectedAssets: { type: Array },
@@ -142,7 +161,6 @@ export default {
 
     data() {
         return {
-            actionOpened: null,
             thumbnailSize: 200,
             newFolderName: null,
         };

resources/js/components/ui/Context/Context.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { useAttrs } from 'vue';
+import { cva } from 'cva';
+import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'reka-ui';
+import { Button } from '@statamic/ui';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+
+const props = defineProps({
+    align: { type: String, default: 'start' },
+    offset: { type: Number, default: 5 },
+    side: { type: String, default: 'bottom' },
+});
+
+const contextContentClasses = cva({
+    base: [
+        'rounded-xl w-64 bg-gray-50 dark:bg-gray-800 outline-hidden overflow-hidden group z-50',
+        'border border-gray-200 dark:border-black shadow-lg popoverAnimation',
+    ],
+})({});
+</script>
+
+<template>
+    <ContextMenuRoot>
+        <ContextMenuTrigger data-ui-context-trigger>
+            <slot name="trigger">
+                <Button icon="ui/dots" variant="ghost" size="sm" v-bind="attrs" />
+            </slot>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+            <ContextMenuContent
+                data-ui-context-content
+                :class="[contextContentClasses, $attrs.class]"
+                :align
+                :sideOffset="offset"
+                :side
+            >
+                <slot />
+            </ContextMenuContent>
+        </ContextMenuPortal>
+    </ContextMenuRoot>
+</template>

resources/js/components/ui/Context/Footer.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { useSlots } from 'vue';
+import { cva } from 'cva';
+import { Icon } from '@statamic/ui';
+
+defineProps({
+    icon: { type: String, default: null },
+    text: { type: String, default: null },
+});
+
+const slots = useSlots();
+const usingSlot = !!slots.default;
+
+const footerClasses = cva({
+    base: 'text-gray-600 antialiased py-2 px-3 text-sm rounded-b-xl group/footer',
+    variant: {
+        noSlot: 'flex items-center gap-2',
+    },
+});
+</script>
+
+<template>
+    <footer :class="footerClasses({ noSlot: !usingSlot })" data-ui-context-footer>
+        <slot v-if="usingSlot" />
+        <div v-else class="flex items-center gap-2">
+            <div
+                v-if="icon"
+                class="flex size-6 items-center justify-center rounded-lg bg-gray-100 p-1 text-gray-700 dark:bg-gray-900 dark:text-gray-500"
+            >
+                <Icon :name="icon" />
+            </div>
+            <div
+                class="grow truncate text-sm text-gray-600 antialiased group-hover/footer:text-gray-950 dark:text-gray-400 dark:group-hover/footer:text-gray-200"
+            >
+                {{ text }}
+            </div>
+        </div>
+    </footer>
+</template>

resources/js/components/ui/Context/Header.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useSlots } from 'vue';
+import { cva } from 'cva';
+import { Icon, Button } from '@statamic/ui';
+
+defineProps({
+    icon: { type: String, default: null },
+    linkToConfig: { type: Boolean, default: false },
+    appendIcon: { type: String, default: null },
+    appendHref: { type: String, default: null },
+    text: { type: String, default: null },
+});
+
+const slots = useSlots();
+const usingSlot = !!slots.default;
+
+const headerClasses = cva({
+    base: 'col-span-2 px-3.5 py-3 bg-white dark:bg-gray-900 font-medium border-b border-gray-200 dark:border-black text-sm text-gray-800 dark:text-gray-300',
+    variants: {
+        usingSlot: {
+            true: 'grid grid-cols-[auto_1fr_auto]',
+        },
+    },
+});
+</script>
+
+<template>
+    <header :class="headerClasses({ usingSlot: usingSlot })" data-ui-dropdown-header>
+        <div
+            v-if="icon"
+            class="-ms-1 me-2 flex size-6 items-center justify-center rounded-lg bg-gray-100 p-1 text-gray-700 dark:bg-gray-800 dark:text-gray-400"
+        >
+            <Icon :name="icon" />
+        </div>
+        <div class="col-start-2 grow truncate">
+            <slot v-if="usingSlot" />
+            <template v-else>{{ text }}</template>
+        </div>
+        <Button
+            v-if="appendIcon"
+            :href="appendHref"
+            :icon="appendIcon"
+            class="[&_svg]:text-gray-700 dark:[&_svg]:text-gray-400"
+            size="xs"
+        />
+    </header>
+</template>

resources/js/components/ui/Context/Item.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ContextMenuItem } from 'reka-ui';
+import { useSlots } from 'vue';
+import { Icon } from '@statamic/ui';
+
+defineProps({
+    href: { type: String, default: null },
+    icon: { type: String, default: null },
+    text: { type: String, default: null },
+});
+
+const slots = useSlots();
+const hasDefaultSlot = !!slots.default;
+</script>
+
+<template>
+    <ContextMenuItem
+        :class="[
+            'col-span-2 grid grid-cols-subgrid items-center',
+            'rounded-lg px-1 py-1.5 text-sm antialiased',
+            'text-gray-700 dark:text-gray-300',
+            'not-data-disabled:cursor-pointer data-disabled:opacity-50',
+            'hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-950',
+            'outline-hidden focus-visible:bg-gray-100 dark:focus-visible:bg-gray-950',
+        ]"
+        data-ui-context-item
+        :as="href ? 'a' : 'div'"
+        :href="href"
+    >
+        <div v-if="icon" class="flex size-6 items-center justify-center p-1 text-gray-500">
+            <Icon :name="icon" class="size-3.5!" />
+        </div>
+        <div class="col-start-2 ps-2">
+            <slot v-if="hasDefaultSlot" />
+            <template v-else>{{ text }}</template>
+        </div>
+    </ContextMenuItem>
+</template>