Commit Graph

16 Commits

Author SHA1 Message Date
Alexander Brown
e7ce294aeb style: apply Tailwind CSS class sorting across codebase
Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019bd8c8-bce1-70bc-a125-baf2a1503ee8
2026-01-19 16:26:37 -08:00
pythongosssss
97b1a48a25 Fix avatar using fallback icon not being square (#8060)
## Summary

When no user avatar image url exists / it fails to load, there is a
fallback to a user icon which does not render as a square in the tab bar
menu section.

## Changes
- set avatar to be square in compact mode

## Screenshots (if applicable)
Before:
<img width="193" height="37" alt="Screen Shot 2026-01-14 at 16 26 28"
src="https://github.com/user-attachments/assets/eb2e3723-4642-4184-9d0c-f7fb11b1a3ea"
/>

After:
<img width="201" height="37" alt="Screen Shot 2026-01-14 at 16 25 57"
src="https://github.com/user-attachments/assets/fb7bea2d-91cc-47e1-9076-4ec1a01ff923"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8060-Fix-avatar-using-fallback-icon-not-being-square-2e96d73d365081ea802bfbfdafdb1034)
by [Unito](https://www.unito.io)
2026-01-14 17:51:21 -07:00
pythongosssss
97ca9f489e Integrated tab bar UI elements (#7853)
## Summary

The current help / feedback is often overlooked by users, this adds a
setting that makes it more visible moving it up into the tab bar and
moves the user login/profile button out of the "action bar" into the tab
bar.

## Changes
- Add 'Comfy.UI.TabBarLayout' setting with Default/Integrated options
- Move Help & User controls to tab bar when Integrated mode is enabled
- Extract help center logic into shared useHelpCenter composable

## Screenshots (if applicable)

<img width="515" height="540" alt="image"
src="https://github.com/user-attachments/assets/c9e6057f-4fb1-4da6-b25d-9df4b19be31a"
/>
<img width="835" height="268" alt="image"
src="https://github.com/user-attachments/assets/24afc0e8-97eb-45cf-af86-15a9b464e9a8"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7853-Integrated-tab-bar-UI-elements-2df6d73d365081b1beb8f7c641c2fa43)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2026-01-11 00:11:50 -07:00
Alexander Brown
7b68b19f11 Component: The Rest of the PrimeVue buttons (#7649)
## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-12-29 15:03:34 -08:00
Simula_r
ed04215d40 feat: add pricing table to user popover (#7583)
## Summary

Add ability to show pricing table from user popover. Misc style changes
and logic.

## Changes

- **What**: CurrentUserPopover.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Screenshots (if applicable)

<img width="481" height="672" alt="image"
src="https://github.com/user-attachments/assets/3dd55bc4-b49e-4b4e-920e-c97cabaa448a"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7583-feat-add-pricing-table-to-user-popover-2cc6d73d365081e1bbf1f2b351e53289)
by [Unito](https://www.unito.io)
2025-12-17 15:07:04 -07:00
Christian Byrne
549ef79e02 update minimap and canvas bg to use menu color tokens (#6589)
Update minimap and graph canvas menu (bottom right) to use menu tokens.
Change canvas BG color on default dark theme.

<img width="3840" height="2029" alt="image"
src="https://github.com/user-attachments/assets/6d168981-df27-40c0-829c-59150b8a6a12"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6589-wip-Style-graph-canvas-color-2a26d73d365081cb88c4c4bdb2b6d3a5)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-11-05 12:16:19 -08:00
pythongosssss
fd236b3587 UI color updates & tweaks (#6381)
## Summary

Small updates to the UI to make it more visually distinct from the graph
nodes and improving the login button

## Changes

- **What**: 
  - Improve theme support with dynamic colors
  - Standardize surface colors/borders
  - Add shadows to all floating UI elements
  - Change side toolbar to be docked by default
  - Decrease side toolbar width
  - Change login button to icon only
  - Update C button to be more distinctive

## Review Focus

- Theme tokens, I am not sure what the overall plan for how these tokens
will be supported for custom user palettes. I've implemented a method
where default variables are chosen that look nice over all existing
themes, but they can be overridden.

## Screenshots

Dark theme updated color
<img width="958" height="615" alt="image"
src="https://github.com/user-attachments/assets/a2c540cf-6c05-4ad3-996b-8b7b80df8d2d"
/>

Themed & updated menu button (active vs hover vs default)
<img width="58" height="338" alt="github"
src="https://github.com/user-attachments/assets/90244ee2-d5ee-4b26-9d99-f4b8439aa372"
/><img width="58" height="338" alt="nord"
src="https://github.com/user-attachments/assets/053e8e7b-d639-4b72-92d2-ec7e2167aab8"
/><img width="58" height="338" alt="arc"
src="https://github.com/user-attachments/assets/3caeb07b-d41b-4d88-83b4-ef8d45d4e5a6"
/><img width="58" height="338" alt="solarized"
src="https://github.com/user-attachments/assets/6ebf6afb-ec3a-436b-90eb-bda40be1c79f"
/><img width="58" height="338" alt="light"
src="https://github.com/user-attachments/assets/fbb7f96a-b722-40c5-86fa-a0732e166972"
/><img width="58" height="338" alt="dark"
src="https://github.com/user-attachments/assets/5459208b-9256-4c55-9373-169e9cd9f09a"
/>

With labels
<img width="58" height="394" alt="labels"
src="https://github.com/user-attachments/assets/f97ee354-35cd-42b8-896f-57ac39644c1d"
/>

Logged out (only visible on desktop)
<img width="323" height="48" alt="logged out"
src="https://github.com/user-attachments/assets/75b71420-0c1b-446f-8cdd-43c68674d346"
/>

Logged in
<img width="355" height="48" alt="logged in"
src="https://github.com/user-attachments/assets/324fd133-a793-49dd-844a-f93dd5d1effb"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6381-UI-color-updates-tweaks-29b6d73d3650816384d2ef5617a776a0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
2025-11-02 12:43:21 -08:00
sno
20a1a9eda2 [bugfix] fix @intlify/vue-i18n/no-raw-text linting errors (#6280)
## Summary

This PR fixes all @intlify/vue-i18n/no-raw-text linting errors
identified in #5625 by replacing raw text strings with proper i18n
translation function calls.

## Changes

Fixed i18n linting errors in the following files:
- `src/components/widget/SampleModelSelector.vue` - "Upload Model" →
`$t('g.upload')`
- `src/components/topbar/CurrentUserButton.vue` - "user profile" →
`$t('g.currentUser')`
- `src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue` - "Loading
help" → `$t('g.loading')`
- `src/components/sidebar/SidebarShortcutsToggleButton.vue` -
"shortcuts.shortcuts" → `$t('shortcuts.shortcuts')`
- `src/components/sidebar/SidebarLogoutIcon.vue` - "sideToolbar.logout"
→ `$t('sideToolbar.logout')`
- `src/components/sidebar/SidebarHelpCenterIcon.vue` - "menu.help" →
`$t('menu.help')`
- `src/components/sidebar/SidebarBottomPanelToggleButton.vue` -
"sideToolbar.labels.console" → `$t('sideToolbar.labels.console')`
- `src/components/load3d/controls/viewer/ViewerCameraControls.vue` -
"fov" → `t('load3d.fov')`
- `src/components/helpcenter/HelpCenterMenuContent.vue` - "Help Center
Menu" and "Recent releases" → `$t()` calls

All raw text strings have been replaced with appropriate i18n
translation keys that already exist in `src/locales/en/main.json`.

## Related Issue

Fixes errors reported in CI job:
https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/18705105609/job/53341658467?pr=5625

This PR aims to help #5625 pass CI/CD checks.

## Test Plan

- All i18n linting errors should be resolved
- No functionality changes - only proper use of i18n system
- Existing translation keys are used from the locale files

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6280-bugfix-fix-intlify-vue-i18n-no-raw-text-linting-errors-2976d73d365081369b43de01486fb409)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-10-26 22:12:45 -07:00
Alexander Brown
85017dbba0 Upgrade: Tailwind v4 (#5246)
* temp: move tailwind calls out of the layer

* temp: ts tailwind config

* upgrade: Tailwind v4
This got a little out of hand.
Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly.

* upgrade: bg-opacity is now a modifier

* fix: Classic menu buttons assume a border

* Update test expectations [skip ci]

* fix: New preflight removal pattern

* fix: Skeletons don't have skin

* Update test expectations [skip ci]

* fix: Missing @reference

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
2025-09-03 12:37:43 -07:00
Christian Byrne
4c92a7142e Fix: Close user popover on button clicks (#3928) 2025-05-19 08:41:33 +10:00
Christian Byrne
6408623b71 [API Node] Show user state when logged in via API key (#3838)
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chenlei Hu <hcl@comfy.org>
2025-05-09 14:45:32 -04:00
Christian Byrne
bbbf140b1f Handle user avatar error (#3735)
Co-authored-by: github-actions <github-actions@github.com>
2025-05-06 22:04:25 -04:00
Chenlei Hu
04f447c2a3 [Cleanup] Remove tooltip on current user button (#3636) 2025-04-25 19:27:47 -04:00
Chenlei Hu
45eb4701d2 Implement top menu user popover (#3631)
Co-authored-by: github-actions <github-actions@github.com>
2025-04-25 15:26:41 -04:00
Chenlei Hu
b79cbf69af Use PrimeVue Avatar component (#3615) 2025-04-24 21:49:03 -04:00
Chenlei Hu
ab94a55858 Show user avatar on top menu if available (#3572) 2025-04-22 19:47:34 -04:00