Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-06 21:50:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: apply Tailwind CSS class sorting across codebase

Browse Source 
Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019bd8c8-bce1-70bc-a125-baf2a1503ee8
This commit is contained in:
Alexander Brown
2026-01-19 16:19:18 -08:00
parent 0bbb2d73e1
commit e7ce294aeb
168 changed files with 1777 additions and 1103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/topbar/CurrentUserButton.vue
View File

@@ -11,14 +11,20 @@
<div
:class="
cn(
'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
compact && 'size-full aspect-square'
'flex items-center justify-center gap-1 rounded-full hover:bg-interface-button-hover-surface',
compact && 'aspect-square size-full'
)
"
>
<UserAvatar :photo-url="photoURL" :class="compact && 'size-full'" />
<UserAvatar
:photo-url="photoURL"
:class="compact && 'size-full'"
/>
<i v-if="showArrow" class="icon-[lucide--chevron-down] size-3 px-1" />
<i
v-if="showArrow"
class="icon-[lucide--chevron-down] size-3 px-1"
/>
</div>
</Button>

66
src/components/topbar/CurrentUserPopover.vue
View File

@@ -1,10 +1,10 @@
<!-- A popover that shows current user information and actions -->
<template>
<div
class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
class="current-user-popover -m-3 w-80 rounded-lg border border-border-default bg-base-background p-2 shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
>
<!-- User Info Section -->
<div class="flex flex-col items-center px-0 py-3 mb-4">
<div class="mb-4 flex flex-col items-center px-0 py-3">
<UserAvatar
class="mb-1"
:photo-url="userPhotoUrl"
@@ -18,32 +18,41 @@
<h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
{{ userDisplayName || $t('g.user') }}
</h3>
<p v-if="userEmail" class="my-0 truncate text-sm text-muted">
<p
v-if="userEmail"
class="my-0 truncate text-sm text-muted"
>
{{ userEmail }}
</p>
<span
v-if="subscriptionTierName"
class="my-0 text-xs text-foreground bg-secondary-background-hover rounded-full uppercase px-2 py-0.5 font-bold mt-2"
class="text-foreground my-0 mt-2 rounded-full bg-secondary-background-hover px-2 py-0.5 text-xs font-bold uppercase"
>
{{ subscriptionTierName }}
</span>
</div>
<!-- Credits Section -->
<div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
<i class="icon-[lucide--component] text-amber-400 text-sm" />
<div
v-if="isActiveSubscription"
class="flex items-center gap-2 px-4 py-2"
>
<i class="icon-[lucide--component] text-sm text-amber-400" />
<Skeleton
v-if="authStore.isFetchingBalance"
width="4rem"
height="1.25rem"
class="w-full"
/>
<span v-else class="text-base font-semibold text-base-foreground">{{
<span
v-else
class="text-base font-semibold text-base-foreground"
>{{
formattedBalance
}}</span>
<i
v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
/>
<Button
variant="secondary"
@@ -56,7 +65,10 @@
</Button>
</div>
<div v-else class="flex justify-center px-4">
<div
v-else
class="flex justify-center px-4"
>
<SubscribeButton
:fluid="false"
:label="$t('subscription.subscribeToComfyCloud')"
@@ -66,32 +78,32 @@
/>
</div>
<Divider class="my-2 mx-0" />
<Divider class="mx-0 my-2" />
<div
v-if="isActiveSubscription"
class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
data-testid="partner-nodes-menu-item"
@click="handleOpenPartnerNodesInfo"
>
<i class="icon-[lucide--tag] text-muted-foreground text-sm" />
<span class="text-sm text-base-foreground flex-1">{{
<i class="icon-[lucide--tag] text-sm text-muted-foreground" />
<span class="flex-1 text-sm text-base-foreground">{{
$t('subscription.partnerNodesCredits')
}}</span>
</div>
<div
class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
data-testid="plans-pricing-menu-item"
@click="handleOpenPlansAndPricing"
>
<i class="icon-[lucide--receipt-text] text-muted-foreground text-sm" />
<span class="text-sm text-base-foreground flex-1">{{
<i class="icon-[lucide--receipt-text] text-sm text-muted-foreground" />
<span class="flex-1 text-sm text-base-foreground">{{
$t('subscription.plansAndPricing')
}}</span>
<span
v-if="canUpgrade"
class="text-xs font-bold text-base-background bg-base-foreground px-1.5 py-0.5 rounded-full"
class="rounded-full bg-base-foreground px-1.5 py-0.5 text-xs font-bold text-base-background"
>
{{ $t('subscription.upgrade') }}
</span>
@@ -99,36 +111,36 @@
<div
v-if="isActiveSubscription"
class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
data-testid="manage-plan-menu-item"
@click="handleOpenPlanAndCreditsSettings"
>
<i class="icon-[lucide--file-text] text-muted-foreground text-sm" />
<span class="text-sm text-base-foreground flex-1">{{
<i class="icon-[lucide--file-text] text-sm text-muted-foreground" />
<span class="flex-1 text-sm text-base-foreground">{{
$t('subscription.managePlan')
}}</span>
</div>
<div
class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
data-testid="user-settings-menu-item"
@click="handleOpenUserSettings"
>
<i class="icon-[lucide--settings-2] text-muted-foreground text-sm" />
<span class="text-sm text-base-foreground flex-1">{{
<i class="icon-[lucide--settings-2] text-sm text-muted-foreground" />
<span class="flex-1 text-sm text-base-foreground">{{
$t('userSettings.accountSettings')
}}</span>
</div>
<Divider class="my-2 mx-0" />
<Divider class="mx-0 my-2" />
<div
class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
data-testid="logout-menu-item"
@click="handleLogout"
>
<i class="icon-[lucide--log-out] text-muted-foreground text-sm" />
<span class="text-sm text-base-foreground flex-1">{{
<i class="icon-[lucide--log-out] text-sm text-muted-foreground" />
<span class="flex-1 text-sm text-base-foreground">{{
$t('auth.signOut.signOut')
}}</span>
</div>

9
src/components/topbar/LoginButton.vue
View File

@@ -3,7 +3,7 @@
v-if="!isLoggedIn"
variant="textonly"
size="icon"
:class="cn('group rounded-full text-base-foreground p-0', className)"
:class="cn('group rounded-full p-0 text-base-foreground', className)"
:aria-label="t('g.login')"
@click="handleSignIn()"
@mouseenter="showPopover"
@@ -22,13 +22,14 @@
@mouseover="cancelHidePopover"
>
<div>
<div class="mb-1">{{ t('auth.loginButton.tooltipHelp') }}</div>
<div class="mb-1">
{{ t('auth.loginButton.tooltipHelp') }}
</div>
<a
:href="apiNodesOverviewUrl"
target="_blank"
class="text-neutral-500 hover:text-primary"
>{{ t('auth.loginButton.tooltipLearnMore') }}</a
>
>{{ t('auth.loginButton.tooltipLearnMore') }}</a>
</div>
</Popover>
</template>

6
src/components/topbar/TopMenuHelpButton.vue
View File

@@ -4,8 +4,10 @@
variant="textonly"
@click="toggleHelpCenter"
>
<div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
<i class="icon-[lucide--circle-help] ml-0.5" />
<div class="not-md:hidden">
{{ $t('menu.helpAndFeedback') }}
</div>
<i class="ml-0.5 icon-[lucide--circle-help]" />
<span
v-if="shouldShowRedDot"
class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"

29
src/components/topbar/TopbarBadge.vue
View File

@@ -18,7 +18,11 @@
>
{{ badge.label }}
</div>
<div v-else class="size-2 shrink-0 rounded-full" :class="dotClasses" />
<div
v-else
class="size-2 shrink-0 rounded-full"
:class="dotClasses"
/>
<Popover
ref="popover"
append-to="body"
@@ -37,8 +41,13 @@
>
{{ badge.label }}
</div>
<div class="text-sm font-inter">{{ badge.text }}</div>
<div v-if="badge.tooltip" class="text-xs">
<div class="font-inter text-sm">
{{ badge.text }}
</div>
<div
v-if="badge.tooltip"
class="text-xs"
>
{{ badge.tooltip }}
</div>
</div>
@@ -90,8 +99,13 @@
>
{{ badge.label }}
</div>
<div class="text-sm font-inter">{{ badge.text }}</div>
<div v-if="badge.tooltip" class="text-xs">
<div class="font-inter text-sm">
{{ badge.text }}
</div>
<div
v-if="badge.tooltip"
class="text-xs"
>
{{ badge.tooltip }}
</div>
</div>
@@ -117,7 +131,10 @@
>
{{ badge.label }}
</div>
<div class="font-inter text-sm" :class="textClasses">
<div
class="font-inter text-sm"
:class="textClasses"
>
{{ badge.text }}
</div>
</div>

2
src/components/topbar/WorkflowOverflowMenu.vue
View File

@@ -2,7 +2,7 @@
<div>
<Button
v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
class="rounded-none h-full w-auto aspect-square"
class="aspect-square h-full w-auto rounded-none"
variant="muted-textonly"
size="icon"
:aria-label="$t('g.moreWorkflows')"

12
src/components/topbar/WorkflowTabPopover.vue
View File

@@ -2,7 +2,7 @@
<div
ref="positionRef"
class="absolute bottom-0 left-1/2 -translate-x-1/2"
></div>
/>
<Popover
ref="popoverRef"
append-to="body"
@@ -24,7 +24,7 @@
:src="thumbnailUrl"
class="block h-[200px] rounded-lg object-cover p-2"
:style="{ width: `${POPOVER_WIDTH}px` }"
/>
>
</div>
<div class="workflow-preview-footer">
<span class="workflow-preview-name">{{ workflowFilename }}</span>
@@ -143,7 +143,7 @@ defineExpose({
@reference '../../assets/css/style.css';
.workflow-preview-content {
@apply flex flex-col rounded-xl overflow-hidden;
@apply flex flex-col overflow-hidden rounded-xl;
max-width: var(--popover-width);
background-color: var(--comfy-menu-bg);
color: var(--fg-color);
@@ -163,11 +163,11 @@ defineExpose({
}
.workflow-preview-footer {
@apply pt-1 pb-2 px-3;
@apply px-3 pt-1 pb-2;
}
.workflow-preview-name {
@apply block text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap;
@apply block overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap;
color: var(--fg-color);
}
</style>
@@ -178,7 +178,7 @@ defineExpose({
.workflow-popover-fade {
--p-popover-background: transparent;
--p-popover-content-padding: 0;
@apply bg-transparent rounded-xl shadow-lg;
@apply rounded-xl bg-transparent shadow-lg;
transition: opacity 0.15s ease-out !important;
}

39
src/components/topbar/WorkflowTabs.vue
View File

@@ -8,7 +8,7 @@
v-if="showOverflowArrows"
variant="muted-textonly"
size="icon"
class="overflow-arrow overflow-arrow-left h-full w-auto aspect-square"
class="overflow-arrow overflow-arrow-left aspect-square h-full w-auto"
:aria-label="$t('g.scrollLeft')"
:disabled="!leftArrowEnabled"
@mousedown="whileMouseDown($event, () => scroll(-1))"
@@ -45,7 +45,7 @@
v-if="showOverflowArrows"
variant="muted-textonly"
size="icon"
class="overflow-arrow overflow-arrow-right h-full w-auto aspect-square"
class="overflow-arrow overflow-arrow-right aspect-square h-full w-auto"
:aria-label="$t('g.scrollRight')"
:disabled="!rightArrowEnabled"
@mousedown="whileMouseDown($event, () => scroll(1))"
@@ -59,7 +59,7 @@
/>
<Button
v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
class="new-blank-workflow-button no-drag shrink-0 rounded-none h-full w-auto aspect-square"
class="new-blank-workflow-button no-drag aspect-square h-full w-auto shrink-0 rounded-none"
variant="muted-textonly"
size="icon"
:aria-label="$t('sideToolbar.newBlankWorkflow')"
@@ -78,15 +78,30 @@
compact
class="shrink-0 p-1"
/>
<LoginButton v-else-if="isDesktop" class="p-1" />
<LoginButton
v-else-if="isDesktop"
class="p-1"
/>
</div>
<ContextMenu ref="menu" :model="contextMenuItems">
<ContextMenu
ref="menu"
:model="contextMenuItems"
>
<template #itemicon="{ item }">
<OverlayIcon v-if="item.overlayIcon" v-bind="item.overlayIcon" />
<i v-else-if="item.icon" :class="item.icon" />
<OverlayIcon
v-if="item.overlayIcon"
v-bind="item.overlayIcon"
/>
<i
v-else-if="item.icon"
:class="item.icon"
/>
</template>
</ContextMenu>
<div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
<div
v-if="isDesktop"
class="window-actions-spacer app-drag shrink-0"
/>
</div>
</template>
@@ -383,13 +398,13 @@ onUpdated(() => {
}
:deep(.p-togglebutton) {
@apply p-0 bg-transparent rounded-none shrink relative border-0 border-r border-solid;
@apply relative shrink rounded-none border-0 border-r border-solid bg-transparent p-0;
border-right-color: var(--border-color);
min-width: 90px;
}
.overflow-arrow {
@apply px-2 rounded-none;
@apply rounded-none px-2;
}
.overflow-arrow[disabled] {
@@ -418,7 +433,7 @@ onUpdated(() => {
}
:deep(.p-togglebutton.p-togglebutton-checked) {
@apply border-b border-solid h-full;
@apply h-full border-b border-solid;
border-bottom-color: var(--p-button-text-primary-color);
}
@@ -446,7 +461,7 @@ onUpdated(() => {
}
:deep(.p-selectbutton) {
@apply rounded-none h-full;
@apply h-full rounded-none;
}
.workflow-tabs-container-desktop {