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

style(ui-workspace): refine drag insertion marker

Browse Source
This commit is contained in:
_Kerman
2026-08-11 19:57:07 +08:00
parent 16dddc128b
commit fb3ac235d1
6 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css
View File

@@ -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 {

22
packages/client/ui-workspace/src/client/rows/Rows.module.css
View File

@@ -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;
}

17
packages/client/ui-workspace/tests/browser-styles.spec.ts
View File

@@ -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')
}
})