mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 18:22:40 +00:00
b0f3b69bda
## Summary Fix nav sidebar badge count not visible due to missing text color, and increase badge size for better readability. ## Changes - **What**: Added explicit `text-base-background` color and increased min size (`min-h-5 min-w-5`) with padding to the StatusBadge in NavItem so the count number is visible in dark mode. ## Review Focus The parent NavItem div sets `text-base-foreground` which was overriding the StatusBadge's contrast severity text color, making the count invisible against the badge background. ## As-is <img width="1607" height="1076" alt="스크린샷 2026-03-10 오후 9 28 17" src="https://github.com/user-attachments/assets/f34de3fa-8930-4328-ba2b-03990a5e6f22" /> ## To-be <img width="1607" height="1058" alt="스크린샷 2026-03-10 오후 9 34 48" src="https://github.com/user-attachments/assets/e420c359-78b7-4f5d-9d03-a600c51b880c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9713-fix-add-text-color-and-increase-size-for-nav-badge-count-31f6d73d36508114874be2e31627099a) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
v-tooltip.right="{
|
|
value: tooltipText,
|
|
disabled: !isOverflowing,
|
|
pt: { text: { class: 'w-max whitespace-nowrap' } }
|
|
}"
|
|
class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none"
|
|
:class="
|
|
active
|
|
? 'bg-interface-menu-component-surface-selected'
|
|
: 'hover:bg-interface-menu-component-surface-hovered'
|
|
"
|
|
role="button"
|
|
@mouseenter="checkOverflow"
|
|
@click="onClick"
|
|
>
|
|
<NavIcon v-if="icon" :icon="icon" />
|
|
<i v-else class="text-neutral icon-[lucide--folder] shrink-0 text-xs" />
|
|
<span ref="textRef" class="min-w-0 truncate">
|
|
<slot />
|
|
</span>
|
|
<StatusBadge
|
|
v-if="badge !== undefined"
|
|
:label="String(badge)"
|
|
severity="contrast"
|
|
variant="circle"
|
|
class="ml-auto min-h-5 min-w-5 px-1 text-base-background"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
import StatusBadge from '@/components/common/StatusBadge.vue'
|
|
import type { NavItemData } from '@/types/navTypes'
|
|
|
|
import NavIcon from './NavIcon.vue'
|
|
|
|
const { icon, badge, active, onClick } = defineProps<{
|
|
icon: NavItemData['icon']
|
|
badge?: NavItemData['badge']
|
|
active?: boolean
|
|
onClick: () => void
|
|
}>()
|
|
|
|
const textRef = ref<HTMLElement | null>(null)
|
|
const isOverflowing = ref(false)
|
|
|
|
const checkOverflow = () => {
|
|
if (!textRef.value) return
|
|
isOverflowing.value =
|
|
textRef.value.scrollWidth > textRef.value.clientWidth + 1
|
|
}
|
|
|
|
const tooltipText = computed(() => textRef.value?.textContent ?? '')
|
|
</script>
|