mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 17:37:46 +00:00
3db1b153f3
## Summary Implemented responsive topbar badges with three display modes (full, compact, icon-only) using Tailwind breakpoints and PrimeVue Popover interactions. https://github.com/user-attachments/assets/57912253-b1b5-4a68-953e-0be942ff09c4 ## Changes - **What**: Replaced hardcoded 880px breakpoint with [Tailwind breakpoints](https://tailwindcss.com/docs/responsive-design) via [@vueuse/core](https://vueuse.org/core/useBreakpoints/) - `xl (≥1280px)`: Full display (icon + label + text) - `lg (≥1024px)`: Compact (icon + label, click for popover) - `<lg (<1024px)`: Icon-only (icon/label/dot, click for popover) - **What**: Added `CloudBadge` component to isolate static "Comfy Cloud BETA" badge from runtime store badges - **What**: Added `backgroundColor` prop to support different contexts (topbar vs dialog backgrounds) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6291-make-topbar-badges-responsive-and-fix-server-health-badges-showing-on-unrelated-dialogs-2986d73d365081d294e5c9a7af1aafb2) by [Unito](https://www.unito.io)
39 lines
808 B
Vue
39 lines
808 B
Vue
<template>
|
|
<TopbarBadge
|
|
:badge="cloudBadge"
|
|
:display-mode="displayMode"
|
|
:reverse-order="reverseOrder"
|
|
:no-padding="noPadding"
|
|
:background-color="backgroundColor"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { t } from '@/i18n'
|
|
import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
|
|
|
|
import TopbarBadge from './TopbarBadge.vue'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
displayMode?: 'full' | 'compact' | 'icon-only'
|
|
reverseOrder?: boolean
|
|
noPadding?: boolean
|
|
backgroundColor?: string
|
|
}>(),
|
|
{
|
|
displayMode: 'full',
|
|
reverseOrder: false,
|
|
noPadding: false,
|
|
backgroundColor: 'var(--comfy-menu-bg)'
|
|
}
|
|
)
|
|
|
|
const cloudBadge = computed<TopbarBadgeType>(() => ({
|
|
label: t('g.beta'),
|
|
text: 'Comfy Cloud'
|
|
}))
|
|
</script>
|