mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 17:10:07 +00:00
Style: Fix move cursors that should be grabs (#5989)
## Summary Align with designs that use `grab`/`grabbing` instead of `move`. ## Review Focus Additionally - Fixes the use of `@apply` in the places I touched - Removed some `style.css` rules that were always overridden by the component ## Screenshots ### Before https://github.com/user-attachments/assets/9ca65b92-33e5-4feb-853c-9c5ece574ab5 ### After https://github.com/user-attachments/assets/51569025-0156-473e-be93-5662c345901b ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5989-Style-Fix-move-cursors-that-should-be-grabs-2876d73d3650813bbe95c761c5d46e03) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -5,7 +5,15 @@
|
||||
:class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
|
||||
>
|
||||
<div ref="panelRef" class="actionbar-content flex items-center select-none">
|
||||
<span ref="dragHandleRef" class="drag-handle cursor-move mr-2" />
|
||||
<span
|
||||
ref="dragHandleRef"
|
||||
:class="
|
||||
cn(
|
||||
'drag-handle cursor-grab w-3 h-max mr-2',
|
||||
isDragging && 'cursor-grabbing'
|
||||
)
|
||||
"
|
||||
/>
|
||||
<ComfyQueueButton />
|
||||
</div>
|
||||
</Panel>
|
||||
@@ -26,6 +34,7 @@ import type { Ref } from 'vue'
|
||||
import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
import ComfyQueueButton from './ComfyQueueButton.vue'
|
||||
|
||||
@@ -257,8 +266,4 @@ watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
|
||||
:deep(.p-panel-header) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
@apply w-3 h-max;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
@mouseleave="() => handleMouseLeave()"
|
||||
@click="handleClick"
|
||||
>
|
||||
<i class="icon-[lucide--play] fill-path-white w-4 h-4" />
|
||||
<i class="icon-[lucide--play] text-white size-4" />
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
@@ -64,9 +64,3 @@ const handleClick = async () => {
|
||||
await commandStore.execute('Comfy.QueueSelectedOutputNodes')
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep.fill-path-white > path {
|
||||
fill: white;
|
||||
stroke: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user