kevin/deepseek-harness
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(client): refine drag insertion markers

Browse Source
This commit is contained in:
_Kerman
2026-08-11 15:42:44 +08:00
parent 3f09330f4b
commit d672eace2f
5 changed files with 62 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/ui-sidebar/src/client/SidebarRoot.module.css
+4
View File
@@ -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
packages/client/ui-sidebar/tests/sidebar-styles.spec.ts
+4
View File
@@ -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')
})
})
packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css
+20 -6
View File
@@ -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 {
packages/client/ui-workspace/src/client/rows/Rows.module.css
+16 -8
View File
@@ -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. */
packages/client/ui-workspace/tests/browser-styles.spec.ts
+18
View File
@@ -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')