mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-13 06:40:59 +00:00
fix(ui): polish across routing, groups, inbounds, mobile sidebar
A bundle of small UI fixes that surfaced together while reviewing the panel. Routing rules — stale Edit after drag: - Dragging a rule and then clicking its Edit button used to open the modal with the *previous* rule's content. Root cause: desktopColumns was memoized with [t, isMobile, rows.length] (rows.length doesn't change on reorder), so the cached render function kept handing AntD the openEdit closure that captured the pre-drag rules array. Fix is a rulesRef updated each render and read inside openEdit, so even the cached closure sees the live array. - Mobile rule cards on the same page were hard to tell apart: bumped the inter-card gap, slightly stronger border, soft shadow, and a small centered divider line between adjacent cards. Mobile drawer (dark / ultra): - The AntD Menu inside the mobile drawer was rendering with its own darkItemBg (#15161a / #050507) while the drawer body used the lighter colorBgElevated, producing visible two-tone seams. Force the drawer-content / drawer-body to the same dark color that the desktop sider uses, and make the menus transparent so they inherit. Row menus — visual grouping: - Groups page row menu: moved Rename above the divider so the ordering reads safe → divider → destructive (Remove from group, Delete clients, Delete group only) instead of mixing the two groups. - Inbounds page row menu: inserted a divider before delAllClients / delete so the destructive items sit visually separated from the earlier safe actions. Dropdown affordances: - Non-danger dropdown items had no perceivable hover state (default colorBgTextHover is too subtle, especially under the light theme). Apply the same primary-tint pattern the sider/drawer menu uses: 14% primary background and primary color on label + icon. - ant-dropdown-menu-item-divider now uses var(--ant-color-border) (and an explicit rgba in dark) so the separator is actually visible in the light theme. Clients toolbar — narrow-desktop wrap: - Between 769px and 920px, the bulk-action bar (Attach / Detach / Add to group / Ungroup / more + Delete) wrapped to two rows with Delete stranded alone on the right. In that range, switch the toolbar buttons to icon-only, tighten gap to 6px and inline padding to 8px so everything stays on one line.
This commit is contained in:
@@ -332,6 +332,13 @@ export default function GroupsPage() {
|
||||
label: t('pages.groups.addToGroup'),
|
||||
onClick: () => openAddClientsFor(row),
|
||||
},
|
||||
{
|
||||
key: 'rename',
|
||||
icon: <EditOutlined />,
|
||||
label: t('pages.groups.rename'),
|
||||
onClick: () => openRename(row),
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
key: 'removeClients',
|
||||
icon: <UsergroupDeleteOutlined />,
|
||||
@@ -340,13 +347,6 @@ export default function GroupsPage() {
|
||||
disabled: !row.clientCount,
|
||||
onClick: () => openRemoveClientsFor(row),
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
key: 'rename',
|
||||
icon: <EditOutlined />,
|
||||
label: t('pages.groups.rename'),
|
||||
onClick: () => openRename(row),
|
||||
},
|
||||
{
|
||||
key: 'deleteClients',
|
||||
icon: <DeleteOutlined />,
|
||||
|
||||
Reference in New Issue
Block a user