From d672eace2f42918a5ca2459704c757bb1ac7a6d8 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Tue, 11 Aug 2026 15:42:44 +0800 Subject: [PATCH] style(client): refine drag insertion markers --- .../src/client/SidebarRoot.module.css | 4 +++ .../ui-sidebar/tests/sidebar-styles.spec.ts | 4 +++ .../src/client/WorkspaceBrowser.module.css | 26 ++++++++++++++----- .../src/client/rows/Rows.module.css | 24 +++++++++++------ .../ui-workspace/tests/browser-styles.spec.ts | 18 +++++++++++++ 5 files changed, 62 insertions(+), 14 deletions(-) diff --git a/packages/client/ui-sidebar/src/client/SidebarRoot.module.css b/packages/client/ui-sidebar/src/client/SidebarRoot.module.css index 2cc99e3159..17333b5ccc 100644 --- a/packages/client/ui-sidebar/src/client/SidebarRoot.module.css +++ b/packages/client/ui-sidebar/src/client/SidebarRoot.module.css @@ -215,12 +215,16 @@ min-height: 0; display: flex; flex-direction: column; + margin-left: -4px; margin-right: calc(-1 * var(--dsh-sidebar-inline-padding)); + padding-left: 4px; overflow: hidden; } .collapsed .regionArea { + margin-left: 0; margin-right: 0; + padding-left: 0; } /* Foot seat: a pure layout socket pinned under the region; the ui-settings diff --git a/packages/client/ui-sidebar/tests/sidebar-styles.spec.ts b/packages/client/ui-sidebar/tests/sidebar-styles.spec.ts index 63721258c9..c4abce1911 100644 --- a/packages/client/ui-sidebar/tests/sidebar-styles.spec.ts +++ b/packages/client/ui-sidebar/tests/sidebar-styles.spec.ts @@ -30,9 +30,13 @@ describe('SidebarRoot.module.css inset', () => { const root = declarations('.root') expect(root?.get('--dsh-sidebar-inline-padding')).toBe('12px') expect(root?.get('padding')).toBe('6px var(--dsh-sidebar-inline-padding)') + expect(declarations('.regionArea')?.get('margin-left')).toBe('-4px') + expect(declarations('.regionArea')?.get('padding-left')).toBe('4px') expect(declarations('.regionArea')?.get('margin-right')).toBe( 'calc(-1 * var(--dsh-sidebar-inline-padding))', ) + expect(declarations('.collapsed .regionArea')?.get('margin-left')).toBe('0') + expect(declarations('.collapsed .regionArea')?.get('padding-left')).toBe('0') expect(declarations('.collapsed .regionArea')?.get('margin-right')).toBe('0') }) }) diff --git a/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css b/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css index 1431096afe..ee79d4b56a 100644 --- a/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css +++ b/packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css @@ -296,12 +296,16 @@ min-height: 0; display: flex; flex-direction: column; + margin-left: -4px; margin-right: calc(-1 * var(--dsh-session-list-edge-inset)); + padding-left: 4px; overflow: hidden; } .rail .listArea { + margin-left: 0; margin-right: 0; + padding-left: 0; } /* Relative for the bottom fade overlay. */ @@ -342,7 +346,9 @@ flex: 1; min-height: 0; overflow-y: auto; + margin-left: -4px; margin-right: var(--dsh-session-list-scrollbar-offset); + padding-left: 4px; padding-right: calc( var(--dsh-session-list-edge-inset) - var(--dsh-session-list-scrollbar-width) @@ -386,20 +392,28 @@ content: ''; position: absolute; z-index: 1; - left: 4px; + left: -4px; right: 4px; - height: 2px; - border-radius: 999px; - background: var(--dsw-alias-state-business-primary); + height: 12px; + background: + radial-gradient( + circle at 6px 6px, + transparent 0 3px, + var(--dsw-alias-state-business-primary) 3px 5px, + transparent 5px + ), + linear-gradient( + var(--dsw-alias-state-business-primary) 0 0 + ) 10px 5px / calc(100% - 10px) 2px no-repeat; pointer-events: none; } .workspaceDropBefore::before { - top: -3px; + top: -8px; } .workspaceDropAfter::after { - bottom: -3px; + bottom: -8px; } .sessionOverflowButton { 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 548407fd40..528cc16f59 100644 --- a/packages/client/ui-workspace/src/client/rows/Rows.module.css +++ b/packages/client/ui-workspace/src/client/rows/Rows.module.css @@ -236,8 +236,8 @@ background: var(--dsw-alias-interactive-bg-hover); } -/* Session drag insert line: an independent 2px rule between rows, absolutely - positioned so it neither resembles a row border nor changes layout. */ +/* Session drag insert marker: a hollow leading dot and 2px rule between rows, + absolutely positioned so it neither resembles a row border nor changes layout. */ .sessionRow.dropBefore, .sessionRow.dropAfter { position: relative; @@ -248,20 +248,28 @@ content: ''; position: absolute; z-index: 1; - left: 4px; + left: 0; right: 4px; - height: 2px; - border-radius: 999px; - background: var(--dsw-alias-state-business-primary); + height: 12px; + background: + radial-gradient( + circle at 6px 6px, + transparent 0 3px, + var(--dsw-alias-state-business-primary) 3px 5px, + transparent 5px + ), + linear-gradient( + var(--dsw-alias-state-business-primary) 0 0 + ) 10px 5px / calc(100% - 10px) 2px no-repeat; pointer-events: none; } .sessionRow.dropBefore::before { - top: -2px; + top: -7px; } .sessionRow.dropAfter::after { - bottom: -2px; + bottom: -7px; } /* Hover-card body (figma 169:16903): dark surface, fixed colors both themes. */ diff --git a/packages/client/ui-workspace/tests/browser-styles.spec.ts b/packages/client/ui-workspace/tests/browser-styles.spec.ts index 86abd521bc..9930aea0b1 100644 --- a/packages/client/ui-workspace/tests/browser-styles.spec.ts +++ b/packages/client/ui-workspace/tests/browser-styles.spec.ts @@ -48,9 +48,13 @@ describe('WorkspaceBrowser.module.css list', () => { expect(root?.get('--dsh-session-list-scrollbar-width')).toBe('8px') expect(root?.get('--dsh-session-list-scrollbar-offset')).toBe('2px') expect(root?.get('padding-right')).toBe('var(--dsh-session-list-edge-inset)') + expect(listArea?.get('margin-left')).toBe('-4px') + expect(listArea?.get('padding-left')).toBe('4px') expect(listArea?.get('margin-right')).toBe('calc(-1 * var(--dsh-session-list-edge-inset))') expect(declarations('.fade')?.get('right')).toBe('var(--dsh-session-list-edge-inset)') expect(list?.get('margin-right')).toBe('var(--dsh-session-list-scrollbar-offset)') + expect(list?.get('margin-left')).toBe('-4px') + expect(list?.get('padding-left')).toBe('4px') expect(list?.get('padding-right')).toBe([ 'calc(', 'var(--dsh-session-list-edge-inset)', @@ -72,6 +76,20 @@ 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', () => { + const workspaceMarker = declarations('.workspaceDropBefore::before') + const sessionMarker = rowDeclarations('.sessionRow.dropBefore::before') + expect(workspaceMarker?.get('left')).toBe('-4px') + expect(sessionMarker?.get('left')).toBe('0') + for (const marker of [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') + } + }) + it('keeps the compact fade, overflow control, search field, and row heights', () => { expect(declarations('.fade')?.get('height')).toBe('24px') expect(declarations('.sessionOverflowButton')?.get('height')).toBe('28px')