diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index 7f42ed319..c746627cb 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -9,7 +9,6 @@
:preview-alt="job.title"
:icon-name="job.iconName"
:icon-class="getJobIconClass(job)"
- :icon-wrapper-class="getJobIconWrapperClass(job)"
:primary-text="job.title"
:secondary-text="job.meta"
:progress-total-percent="job.progressTotalPercent"
@@ -69,8 +68,22 @@
:icon-name="getAssetIconName(item.asset)"
:primary-text="getAssetPrimaryText(item.asset)"
:secondary-text="getAssetSecondaryText(item.asset)"
+ @mouseenter="onAssetEnter(item.asset.id)"
+ @mouseleave="onAssetLeave(item.asset.id)"
+ @contextmenu.prevent="handleAssetMenuClick($event, item.asset)"
@click.stop="emit('select-asset', item.asset)"
- />
+ >
+
+
+
+
@@ -106,6 +119,7 @@ const { assets, isSelected } = defineProps<{
const emit = defineEmits<{
(e: 'select-asset', asset: AssetItem): void
+ (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
(e: 'approach-end'): void
}>()
@@ -113,6 +127,7 @@ const { t } = useI18n()
const { jobItems } = useJobList()
const { getJobActions, runJobAction } = useJobActions()
const hoveredJobId = ref(null)
+const hoveredAssetId = ref(null)
type AssetListItem = { key: string; asset: AssetItem }
@@ -196,11 +211,14 @@ function onJobLeave(jobId: string) {
}
}
-function getJobIconWrapperClass(job: JobListItem): string | undefined {
- if (job.state === 'failed') {
- return 'bg-modal-card-placeholder-background'
+function onAssetEnter(assetId: string) {
+ hoveredAssetId.value = assetId
+}
+
+function onAssetLeave(assetId: string) {
+ if (hoveredAssetId.value === assetId) {
+ hoveredAssetId.value = null
}
- return undefined
}
function getJobIconClass(job: JobListItem): string | undefined {
@@ -209,13 +227,15 @@ function getJobIconClass(job: JobListItem): string | undefined {
if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
classes.push('animate-spin')
}
- if (job.state === 'failed') {
- classes.push('text-destructive-background')
- }
return classes.length ? classes.join(' ') : undefined
}
function handleJobAction(action: JobAction, job: JobListItem) {
void runJobAction(action, job)
}
+
+function handleAssetMenuClick(event: MouseEvent, asset: AssetItem) {
+ event.stopPropagation()
+ emit('context-menu', event, asset)
+}
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 9897a1d15..7b8ed9ec3 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -101,6 +101,7 @@
:assets="displayAssets"
:is-selected="isSelected"
@select-asset="handleAssetSelect"
+ @context-menu="handleAssetContextMenu"
@approach-end="handleApproachEnd"
/>
@@ -193,13 +191,23 @@
v-model:active-index="galleryActiveIndex"
:all-gallery-items="galleryItems"
/>
+