From fb3ac235d1a697cd12f84d2a32ee831897b639ee Mon Sep 17 00:00:00 2001 From: _Kerman Date: Tue, 11 Aug 2026 19:57:07 +0800 Subject: [PATCH] style(ui-workspace): refine drag insertion marker --- ...kspace-sidebar-order-and-folding.i18n.yaml | 4 +-- ...-11-workspace-sidebar-order-and-folding.md | 2 +- ...-workspace-sidebar-order-and-folding.zh.md | 2 +- .../src/client/WorkspaceBrowser.module.css | 28 +++++++++++-------- .../src/client/rows/Rows.module.css | 22 +++++++++------ .../ui-workspace/tests/browser-styles.spec.ts | 17 ++++++----- 6 files changed, 45 insertions(+), 30 deletions(-) diff --git a/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.i18n.yaml b/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.i18n.yaml index b6ef508195..abfe83f2c5 100644 --- a/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.i18n.yaml +++ b/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.i18n.yaml @@ -2,5 +2,5 @@ # side as of the last confirmed-consistent state. Both languages carry equal authority; # after editing either side, bring the other along and re-record with: # pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.md -2026-08-11-workspace-sidebar-order-and-folding.md: f17855e17d389a85a473b76381f4da51d9bfd9be -2026-08-11-workspace-sidebar-order-and-folding.zh.md: 7771322c93d75f6d257f323719988ea05f3bf6c2 +2026-08-11-workspace-sidebar-order-and-folding.md: af5f436e12d43b16371214cb53ff576178bdeb2b +2026-08-11-workspace-sidebar-order-and-folding.zh.md: fd83948f52dcdf73390a6d82deb523fffeffb3bd diff --git a/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.md b/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.md index f17855e17d..af5f436e12 100644 --- a/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.md +++ b/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.md @@ -26,7 +26,7 @@ The combined view menu offers **Manual** and **Last updated** over one browser-l ### Drag and compact chrome -Workspace hit testing uses the complete rendered group section, including visible Session rows. One insertion boundary is shared by the preceding group's lower half and the following group's upper half, and the indicator is an absolutely positioned line that does not affect layout. A tree-body overlay draws the first boundary at the same negative offset outside the scrolling clip, so its hollow leading circle remains visible without moving the list. During a Workspace or Session drag, document-level `dragover` and `drop` handlers accept the native operation; if release occurs outside the Workspace list, `dragend` commits the last valid marker. +Workspace hit testing uses the complete rendered group section, including visible Session rows. One insertion boundary is shared by the preceding group's lower half and the following group's upper half, and the indicator is an absolutely positioned line with a joined right-facing chevron that does not affect layout. A tree-body overlay draws the first boundary at the same negative offset outside the scrolling clip, so the leading chevron remains visible without moving the list. During a Workspace or Session drag, document-level `dragover` and `drop` handlers accept the native operation; if release occurs outside the Workspace list, `dragend` commits the last valid marker. Search is a header action while collapsed and expands across the title and trailing actions. An outside click collapses a query that is empty after trimming but retains a non-empty query. Compact Workspace and Session rows, a 24px bottom fade, and the absence of per-Workspace Session counts preserve vertical space without removing navigation affordances. diff --git a/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.zh.md b/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.zh.md index 7771322c93..fd83948f52 100644 --- a/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.zh.md +++ b/.agents/notes/implemented/feature/2026-08-11-workspace-sidebar-order-and-folding.zh.md @@ -26,7 +26,7 @@ Workspace 注册表持有持久 `workspaceIds` 顺序，并提供采用 DOM `ins ### 拖拽与紧凑界面 -Workspace 命中测试使用完整渲染分组区段，包括可见 Session 行。前一分组的下半部与后一分组的上半部共享同一条插入边界，指示器是一条不影响布局的绝对定位横线。树主体覆盖层会在滚动裁切区外以相同的负偏移绘制第一条边界，因此左侧空心圆保持可见，列表位置也不会改变。Workspace 或 Session 拖拽期间，文档级 `dragover` 与 `drop` 处理器会接受原生操作；若在 Workspace 列表外松手，`dragend` 会提交最后一个有效标记。 +Workspace 命中测试使用完整渲染分组区段，包括可见 Session 行。前一分组的下半部与后一分组的上半部共享同一条插入边界，指示器是一条带有相连右向尖角且不影响布局的绝对定位横线。树主体覆盖层会在滚动裁切区外以相同的负偏移绘制第一条边界，因此左侧尖角保持可见，列表位置也不会改变。Workspace 或 Session 拖拽期间，文档级 `dragover` 与 `drop` 处理器会接受原生操作；若在 Workspace 列表外松手，`dragend` 会提交最后一个有效标记。 搜索在折叠时是区头操作，展开后占据标题与尾部操作的空间。查询经清除首尾空白后为空时，点击外部会收起搜索；非空查询则会保留。紧凑的 Workspace 与 Session 行、24px 底部渐隐以及取消每个 Workspace 的 Session 数量共同节省纵向空间，同时保留导航入口。 diff --git a/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css b/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css index 43170e90a0..a160f2ffd7 100644 --- a/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css +++ b/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css @@ -382,19 +382,25 @@ content: ''; position: absolute; z-index: 1; - left: -4px; - right: 4px; + left: 0; + right: 0; height: 12px; background: - radial-gradient( - circle at 6px 6px, - transparent 0 3px, - var(--dsw-alias-state-business-primary) 3px 5px, - transparent 5px - ), + linear-gradient( + 55deg, + transparent calc(50% - 1px), + var(--dsw-alias-state-business-primary) calc(50% - 1px) calc(50% + 1px), + transparent calc(50% + 1px) + ) 0 0 / 5px 7px no-repeat, + linear-gradient( + 125deg, + transparent calc(50% - 1px), + var(--dsw-alias-state-business-primary) calc(50% - 1px) calc(50% + 1px), + transparent calc(50% + 1px) + ) 0 5px / 5px 7px no-repeat, linear-gradient( var(--dsw-alias-state-business-primary) 0 0 - ) 10px 5px / calc(100% - 10px) 2px no-repeat; + ) 4px 5px / calc(100% - 4px) 2px no-repeat; pointer-events: none; } @@ -402,8 +408,8 @@ Workspace boundary, but lives outside the scrolling clip. */ .listTopDropIndicator { top: -8px; - left: -4px; - right: calc(var(--dsh-session-list-edge-inset) + 4px); + left: 0; + right: var(--dsh-session-list-edge-inset); } .listTopDropActive > .workspaceDropBefore:first-child::before { diff --git a/packages/client/ui-workspace/src/client/rows/Rows.module.css b/packages/client/ui-workspace/src/client/rows/Rows.module.css index 9c3b9ef0e9..2b4a77c126 100644 --- a/packages/client/ui-workspace/src/client/rows/Rows.module.css +++ b/packages/client/ui-workspace/src/client/rows/Rows.module.css @@ -240,7 +240,7 @@ background: var(--dsw-alias-interactive-bg-hover); } -/* Session drag insert marker: a hollow leading dot and 2px rule between rows, +/* Session drag insert marker: a leading chevron and 2px rule between rows, absolutely positioned so it neither resembles a row border nor changes layout. */ .sessionRow.dropBefore, .sessionRow.dropAfter { @@ -256,15 +256,21 @@ right: 4px; height: 12px; background: - radial-gradient( - circle at 6px 6px, - transparent 0 3px, - var(--dsw-alias-state-business-primary) 3px 5px, - transparent 5px - ), + linear-gradient( + 55deg, + transparent calc(50% - 1px), + var(--dsw-alias-state-business-primary) calc(50% - 1px) calc(50% + 1px), + transparent calc(50% + 1px) + ) 0 0 / 5px 7px no-repeat, + linear-gradient( + 125deg, + transparent calc(50% - 1px), + var(--dsw-alias-state-business-primary) calc(50% - 1px) calc(50% + 1px), + transparent calc(50% + 1px) + ) 0 5px / 5px 7px no-repeat, linear-gradient( var(--dsw-alias-state-business-primary) 0 0 - ) 10px 5px / calc(100% - 10px) 2px no-repeat; + ) 4px 5px / calc(100% - 4px) 2px no-repeat; pointer-events: none; } diff --git a/packages/client/ui-workspace/tests/browser-styles.spec.ts b/packages/client/ui-workspace/tests/browser-styles.spec.ts index f87e23ff26..72fda21eb5 100644 --- a/packages/client/ui-workspace/tests/browser-styles.spec.ts +++ b/packages/client/ui-workspace/tests/browser-styles.spec.ts @@ -76,20 +76,23 @@ describe('WorkspaceBrowser.module.css list', () => { expect(declarations('.groupSection + .groupSection')?.get('margin-top')).toBe('4px') }) - it('draws drag targets as a hollow leading dot joined to the insertion line', () => { + it('draws drag targets as a leading chevron joined to the insertion line', () => { const listTopMarker = declarations('.listTopDropIndicator') const workspaceMarker = declarations('.workspaceDropBefore::before') const sessionMarker = rowDeclarations('.sessionRow.dropBefore::before') expect(listTopMarker?.get('top')).toBe('-8px') - expect(listTopMarker?.get('left')).toBe('-4px') - expect(workspaceMarker?.get('left')).toBe('-4px') + expect(listTopMarker?.get('left')).toBe('0') + expect(workspaceMarker?.get('left')).toBe('0') expect(sessionMarker?.get('left')).toBe('0') for (const marker of [listTopMarker, workspaceMarker, sessionMarker]) { expect(marker?.get('height')).toBe('12px') - expect(marker?.get('background')).toContain('radial-gradient') - expect(marker?.get('background')).toContain('linear-gradient') - expect(marker?.get('background')).toContain('var(--dsw-alias-state-business-primary) 3px 5px') - expect(marker?.get('background')).toContain('10px 5px / calc(100% - 10px) 2px') + expect(marker?.get('background')).not.toContain('radial-gradient') + expect(marker?.get('background')).toContain('55deg') + expect(marker?.get('background')).toContain('125deg') + expect(marker?.get('background')).toContain('calc(50% - 1px) calc(50% + 1px)') + expect(marker?.get('background')).toContain('0 0 / 5px 7px') + expect(marker?.get('background')).toContain('0 5px / 5px 7px') + expect(marker?.get('background')).toContain('4px 5px / calc(100% - 4px) 2px') } })