xinyin025/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-07-15 09:06:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): polish across routing, groups, inbounds, mobile sidebar

Browse Source 
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:
MHSanaei
2026-05-28 13:25:43 +02:00
parent 530e338c66
commit 2fea71387b
7 changed files with 77 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/page-shell.css
+18
View File
@@ -89,6 +89,24 @@
min-height: calc(100vh - 120px);
}
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover,
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover .ant-dropdown-menu-title-content,
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover > .anticon {
color: var(--ant-color-primary) !important;
}
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):not(.ant-dropdown-menu-item-danger):hover {
background-color: color-mix(in srgb, var(--ant-color-primary) 14%, transparent) !important;
}
.ant-dropdown-menu-item-divider {
background-color: var(--ant-color-border) !important;
}
body.dark .ant-dropdown-menu-item-divider {
background-color: rgba(255, 255, 255, 0.12) !important;
}
.settings-page .header-row,
.xray-page .header-row {
display: flex;