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" /> +