vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(web): enhance add tab menu functionality in FileWorkspace

Browse source 
- Updated the add tab button to toggle the visibility of the menu with improved accessibility attributes.
- Refactored the add menu to be portaled to the document body for better positioning and visibility.
- Adjusted CSS styles for the add menu to use fixed positioning and increased z-index for proper layering.
- Minor CSS adjustments in entry layout for consistent padding.

These changes improve the user experience when adding new modules in the FileWorkspace, ensuring the add menu is more accessible and visually consistent.
This commit is contained in:
pftom 2026-05-31 16:14:00 +08:00
parent 6a5975d508
commit 45d453996e
3 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
apps/web/src/components/FileWorkspace.tsx
View file

@ -931,28 +931,39 @@ export function FileWorkspace({
</span>
<span className="ws-tab-label">{t('workspace.designFiles')}</span>
</button>
<div className="ws-add-tab" ref={addMenuRef}>
<div className="ws-add-tab">
<button
ref={addButtonRef}
type="button"
className={`ws-tab-add ${addMenuOpen ? 'active' : ''}`}
aria-label="Add workspace module"
aria-haspopup="menu"
aria-expanded={addMenuOpen}
title="Add"
onClick={() => setAddMenuOpen((open) => !open)}
>
<Icon name="plus" size={15} />
</button>
{addMenuOpen ? (
<div className="ws-add-menu" role="menu">
<button type="button" role="menuitem" onClick={openBrowserTab}>
<Icon name="globe" size={15} />
<span>
<strong>Browser</strong>
<small>Reference sites and browser-harness tasks</small>
</span>
</button>
</div>
) : null}
</div>
{addMenuOpen && addMenuPos
? createPortal(
<div
ref={addMenuRef}
className="ws-add-menu"
role="menu"
style={{ top: addMenuPos.top, left: addMenuPos.left }}
>
<button type="button" role="menuitem" onClick={openBrowserTab}>
<Icon name="globe" size={15} />
<span>
<strong>Browser</strong>
<small>Reference sites and browser-harness tasks</small>
</span>
</button>
</div>,
document.body,
)
: null}
{browserTabOpen ? (
<Tab
key={BROWSER_TAB}

2
apps/web/src/styles/home/entry-layout.css
View file

@ -1127,7 +1127,7 @@
background: transparent;
border-top: 1px solid var(--border-soft);
margin-top: 2px;
padding: 8px 4px 0;
padding: 8px 4px;
display: inline-flex;
align-items: center;
gap: 6px;

8
apps/web/src/styles/workspace/drawer.css
View file

@ -1527,16 +1527,16 @@
outline-offset: 2px;
}
.ws-add-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
/* Portaled to <body> and positioned from the + button via inline top/left.
Fixed (not absolute) so the tab strip's overflow clipping cannot hide it. */
position: fixed;
width: 260px;
padding: 6px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-panel);
box-shadow: var(--shadow-lg);
z-index: 180;
z-index: 200;
}
.ws-add-menu button {
width: 100%;