Skip to content

Commit 4b8433f

Browse files
authored
Checkbox style tweaking (microsoft#158487)
1 parent 67e628e commit 4b8433f

File tree

3 files changed

+77
-19
lines changed

3 files changed

+77
-19
lines changed

src/vs/workbench/contrib/mergeEditor/browser/view/editorGutter.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ export class EditorGutter<T extends IGutterItemInfo = IGutterItemInfo> extends D
7979
let view = this.views.get(gutterItem.id);
8080
if (!view) {
8181
const viewDomNode = document.createElement('div');
82-
viewDomNode.className = 'gutter-item';
8382
this._domNode.appendChild(viewDomNode);
8483
const itemView = this.itemProvider.createView(
8584
gutterItem,

src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,18 @@ export class InputCodeEditorView extends CodeEditorView {
128128
: input;
129129
}
130130
),
131+
className: derived('checkbox classnames', (reader) => {
132+
const classNames = [];
133+
const active = viewModel.activeModifiedBaseRange.read(reader);
134+
const isHandled = model.isHandled(baseRange).read(reader);
135+
if (isHandled) {
136+
classNames.push('handled');
137+
}
138+
if (baseRange === active) {
139+
classNames.push('focused');
140+
}
141+
return classNames.join(' ');
142+
}),
131143
setState: (value, tx) => viewModel.setState(
132144
baseRange,
133145
model
@@ -283,25 +295,25 @@ export interface ModifiedBaseRangeGutterItemInfo extends IGutterItemInfo {
283295
setState(value: boolean, tx: ITransaction): void;
284296
toggleBothSides(): void;
285297
getContextMenuActions(): readonly IAction[];
298+
className: IObservable<string>;
286299
}
287300

288301
export class MergeConflictGutterItemView extends Disposable implements IGutterItemView<ModifiedBaseRangeGutterItemInfo> {
289302
private readonly item: ISettableObservable<ModifiedBaseRangeGutterItemInfo>;
290303

291304
private readonly checkboxDiv: HTMLDivElement;
305+
private readonly isMultiLine = observableValue('isMultiLine', false);
292306

293307
constructor(
294308
item: ModifiedBaseRangeGutterItemInfo,
295-
private readonly target: HTMLElement,
309+
target: HTMLElement,
296310
contextMenuService: IContextMenuService,
297311
themeService: IThemeService
298312
) {
299313
super();
300314

301315
this.item = observableValue('item', item);
302316

303-
target.classList.add('merge-accept-gutter-marker');
304-
305317
const checkBox = new Toggle({ isChecked: false, title: localize('accept', "Accept"), icon: Codicon.check });
306318

307319
this._register(attachToggleStyler(checkBox, themeService));
@@ -353,6 +365,17 @@ export class MergeConflictGutterItemView extends Disposable implements IGutterIt
353365
})
354366
);
355367

368+
this._register(autorun('Update Checkbox CSS ClassNames', (reader) => {
369+
let className = this.item.read(reader).className.read(reader);
370+
className += ' merge-accept-gutter-marker';
371+
if (this.isMultiLine.read(reader)) {
372+
className += ' multi-line';
373+
} else {
374+
className += ' single-line';
375+
}
376+
target.className = className;
377+
}));
378+
356379
this._register(checkBox.onChange(() => {
357380
transaction(tx => {
358381
/** @description Handle Checkbox Change */
@@ -373,7 +396,7 @@ export class MergeConflictGutterItemView extends Disposable implements IGutterIt
373396

374397
const margin = checkboxHeight;
375398

376-
const effectiveCheckboxTop = top + middleHeight;
399+
let effectiveCheckboxTop = top + middleHeight;
377400

378401
const preferredViewPortRange = [
379402
margin,
@@ -385,20 +408,17 @@ export class MergeConflictGutterItemView extends Disposable implements IGutterIt
385408
top + height - checkboxHeight - margin
386409
];
387410

388-
const parentRange = [
389-
top,
390-
top + height - checkboxHeight
391-
];
392-
393-
const clamped1 = clampIfIntervalIsNonEmpty(effectiveCheckboxTop, preferredViewPortRange[0], preferredViewPortRange[1]);
394-
const clamped2 = clampIfIntervalIsNonEmpty(clamped1, preferredParentRange[0], preferredParentRange[1]);
395-
const clamped3 = clamp(clamped2, parentRange[0], parentRange[1]);
411+
if (preferredParentRange[0] < preferredParentRange[1]) {
412+
effectiveCheckboxTop = clamp(effectiveCheckboxTop, preferredViewPortRange[0], preferredViewPortRange[1]);
413+
effectiveCheckboxTop = clampIfIntervalIsNonEmpty(effectiveCheckboxTop, preferredParentRange[0], preferredParentRange[1]);
414+
}
396415

397-
this.checkboxDiv.style.top = `${clamped3 - top}px`;
416+
this.checkboxDiv.style.top = `${effectiveCheckboxTop - top}px`;
398417

399-
this.target.classList.remove('multi-line');
400-
this.target.classList.remove('single-line');
401-
this.target.classList.add(height > 30 ? 'multi-line' : 'single-line');
418+
transaction((tx) => {
419+
/** @description MergeConflictGutterItemView: Update Is Multi Line */
420+
this.isMultiLine.set(height > 30, tx);
421+
});
402422
}
403423

404424
update(baseRange: ModifiedBaseRangeGutterItemInfo): void {

src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
border: 2px solid var(--vscode-mergeEditor-conflict-handledFocused-border);
7676
}
7777

78-
.gutter-item {
78+
.gutter.monaco-editor > div {
7979
position: absolute;
8080
}
8181

@@ -90,9 +90,48 @@
9090
position: absolute;
9191
}
9292

93+
94+
95+
.merge-accept-gutter-marker.multi-line.focused .background {
96+
border: 1px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border);
97+
border-right: 0;
98+
}
99+
93100
.merge-accept-gutter-marker.multi-line .background {
101+
border: 1px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);
102+
border-right: 0;
103+
}
104+
105+
.merge-accept-gutter-marker.multi-line.handled.focused .background {
106+
border: 1px solid var(--vscode-mergeEditor-conflict-handledFocused-border);
107+
border-right: 0;
108+
}
109+
110+
.merge-accept-gutter-marker.multi-line.handled .background {
94111
border: 1px solid var(--vscode-checkbox-border);
95112
border-right: 0;
113+
}
114+
115+
116+
.focused .accept-conflict-group.monaco-custom-toggle {
117+
border: 1px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border);
118+
}
119+
120+
.accept-conflict-group.monaco-custom-toggle {
121+
border: 1px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);
122+
}
123+
124+
.handled.focused .accept-conflict-group.monaco-custom-toggle {
125+
border: 1px solid var(--vscode-mergeEditor-conflict-handledFocused-border);
126+
}
127+
128+
.handled .accept-conflict-group.monaco-custom-toggle {
129+
border: 1px solid var(--vscode-checkbox-border);
130+
}
131+
132+
133+
134+
.merge-accept-gutter-marker.multi-line .background {
96135
left: 8px;
97136
width: 10px;
98137
}
@@ -105,7 +144,6 @@
105144
.accept-conflict-group.monaco-custom-toggle {
106145
height: 18px;
107146
width: 18px;
108-
border: 1px solid transparent;
109147
border-radius: 3px;
110148
margin-right: 0px;
111149
margin-left: 0px;
@@ -116,6 +154,7 @@
116154
}
117155

118156
.merge-accept-gutter-marker .checkbox-background {
157+
display: flex;
119158
background: var(--vscode-editor-background);
120159
}
121160

0 commit comments

Comments
 (0)