Skip to content

Commit ebe5375

Browse files
connor4312connor4312
authored
quickpick: use custom checkboxes in the quickpick (#246940)
This adopts custom checkboxes in the quickpicks. It seems to work well. Works towards #245721
1 parent 3b0782f commit ebe5375

File tree

9 files changed

+119
-96
lines changed

9 files changed

+119
-96
lines changed

‎src/vs/base/browser/mouseEvent.ts

+3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface IMouseEvent {
2222
readonly altKey: boolean;
2323
readonly metaKey: boolean;
2424
readonly timestamp: number;
25+
readonly defaultPrevented: boolean;
2526

2627
preventDefault(): void;
2728
stopPropagation(): void;
@@ -44,6 +45,7 @@ export class StandardMouseEvent implements IMouseEvent {
4445
public readonly altKey: boolean;
4546
public readonly metaKey: boolean;
4647
public readonly timestamp: number;
48+
public readonly defaultPrevented: boolean;
4749

4850
constructor(targetWindow: Window, e: MouseEvent) {
4951
this.timestamp = Date.now();
@@ -52,6 +54,7 @@ export class StandardMouseEvent implements IMouseEvent {
5254
this.middleButton = e.button === 1;
5355
this.rightButton = e.button === 2;
5456
this.buttons = e.buttons;
57+
this.defaultPrevented = e.defaultPrevented;
5558

5659
this.target = <HTMLElement>e.target;
5760

‎src/vs/base/browser/ui/hover/hoverDelegate2.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ let baseHoverDelegate: IHoverDelegate2 = {
1313
setupDelayedHoverAtMouse: () => Disposable.None,
1414
hideHover: () => undefined,
1515
showAndFocusLastHover: () => undefined,
16-
setupManagedHover: () => null!,
16+
setupManagedHover: () => ({
17+
dispose: () => undefined,
18+
show: () => undefined,
19+
hide: () => undefined,
20+
update: () => undefined,
21+
}),
1722
showManagedHover: () => undefined
1823
};
1924

‎src/vs/base/browser/ui/toggle/toggle.ts

+11
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export interface ICheckboxStyles {
3737
readonly checkboxBackground: string | undefined;
3838
readonly checkboxBorder: string | undefined;
3939
readonly checkboxForeground: string | undefined;
40+
readonly size?: number;
4041
}
4142

4243
export const unthemedToggleStyles = {
@@ -296,10 +297,20 @@ export class Checkbox extends Widget {
296297
this.checkbox.disable();
297298
}
298299

300+
setTitle(newTitle: string): void {
301+
this.checkbox.setTitle(newTitle);
302+
}
303+
299304
protected applyStyles(): void {
300305
this.domNode.style.color = this.styles.checkboxForeground || '';
301306
this.domNode.style.backgroundColor = this.styles.checkboxBackground || '';
302307
this.domNode.style.borderColor = this.styles.checkboxBorder || '';
308+
309+
const size = this.styles.size || 18;
310+
this.domNode.style.width =
311+
this.domNode.style.height =
312+
this.domNode.style.fontSize = `${size}px`;
313+
this.domNode.style.fontSize = `${size - 2}px`;
303314
}
304315
}
305316

‎src/vs/monaco.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -518,6 +518,7 @@ declare namespace monaco {
518518
readonly altKey: boolean;
519519
readonly metaKey: boolean;
520520
readonly timestamp: number;
521+
readonly defaultPrevented: boolean;
521522
preventDefault(): void;
522523
stopPropagation(): void;
523524
}

‎src/vs/platform/quickinput/browser/media/quickInput.css

+13-25
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,8 @@
167167
}
168168

169169
.quick-input-widget.hidden-input .quick-input-list {
170-
margin-top: 4px; /* reduce margins when input box hidden */
170+
margin-top: 4px;
171+
/* reduce margins when input box hidden */
171172
padding-bottom: 4px;
172173
}
173174

@@ -212,9 +213,9 @@
212213
flex: 1;
213214
}
214215

215-
.quick-input-list .quick-input-list-checkbox {
216+
.quick-input-widget .monaco-checkbox {
217+
margin-right: 0;
216218
align-self: center;
217-
margin: 0;
218219
}
219220

220221
.quick-input-list .quick-input-list-icon {
@@ -239,32 +240,15 @@
239240
margin-left: 5px;
240241
}
241242

242-
.quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-rows {
243-
margin-left: 10px;
244-
}
245-
246-
.quick-input-widget .quick-input-list .quick-input-list-checkbox {
247-
display: none;
248-
}
249-
.quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-checkbox {
250-
display: inline;
251-
}
252-
.quick-input-widget.show-checkboxes .quick-input-list-entry.not-pickable {
253-
margin-left: -10px;
254-
255-
.quick-input-list-checkbox {
256-
display: none;
257-
}
258-
}
259-
260243
.quick-input-list .quick-input-list-rows > .quick-input-list-row {
261244
display: flex;
262245
align-items: center;
263246
}
264247

265248
.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label,
266249
.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
267-
flex: 1; /* make sure the icon label grows within the row */
250+
flex: 1;
251+
/* make sure the icon label grows within the row */
268252
}
269253

270254
.quick-input-list .quick-input-list-rows > .quick-input-list-row .codicon[class*='codicon-'] {
@@ -276,7 +260,8 @@
276260
}
277261

278262
.quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding {
279-
margin-right: 8px; /* separate from the separator label or scrollbar if any */
263+
margin-right: 8px;
264+
/* separate from the separator label or scrollbar if any */
280265
}
281266

282267
.quick-input-list .quick-input-list-label-meta {
@@ -299,7 +284,8 @@
299284
}
300285

301286
.quick-input-list .quick-input-list-entry .quick-input-list-separator {
302-
margin-right: 4px; /* separate from keybindings or actions */
287+
margin-right: 4px;
288+
/* separate from keybindings or actions */
303289
}
304290

305291
.quick-input-list .quick-input-list-entry-action-bar {
@@ -326,7 +312,8 @@
326312
}
327313

328314
.quick-input-list .quick-input-list-entry-action-bar {
329-
margin-right: 4px; /* separate from scrollbar */
315+
margin-right: 4px;
316+
/* separate from scrollbar */
330317
}
331318

332319
.quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible,
@@ -342,6 +329,7 @@
342329
.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator {
343330
color: inherit
344331
}
332+
345333
.quick-input-list .monaco-list-row.focused .monaco-keybinding-key {
346334
background: none;
347335
}

‎src/vs/platform/quickinput/browser/quickInput.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { IInputBoxStyles } from '../../../base/browser/ui/inputbox/inputBox.js';
1313
import { IKeybindingLabelStyles } from '../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
1414
import { IListStyles } from '../../../base/browser/ui/list/listWidget.js';
1515
import { IProgressBarStyles, ProgressBar } from '../../../base/browser/ui/progressbar/progressbar.js';
16-
import { IToggleStyles, Toggle } from '../../../base/browser/ui/toggle/toggle.js';
16+
import { Checkbox, IToggleStyles, Toggle } from '../../../base/browser/ui/toggle/toggle.js';
1717
import { equals } from '../../../base/common/arrays.js';
1818
import { TimeoutTimer } from '../../../base/common/async.js';
1919
import { Codicon } from '../../../base/common/codicons.js';
@@ -103,7 +103,7 @@ export interface QuickInputUI {
103103
widget: HTMLElement;
104104
rightActionBar: ActionBar;
105105
inlineActionBar: ActionBar;
106-
checkAll: HTMLInputElement;
106+
checkAll: Checkbox;
107107
inputContainer: HTMLElement;
108108
filterContainer: HTMLElement;
109109
inputBox: QuickInputBox;

‎src/vs/platform/quickinput/browser/quickInputController.ts

+19-13
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import { IConfigurationService } from '../../configuration/common/configuration.
3333
import { Platform, platform } from '../../../base/common/platform.js';
3434
import { getWindowControlsStyle, WindowControlsStyle } from '../../window/common/window.js';
3535
import { getZoomFactor } from '../../../base/browser/browser.js';
36+
import { Checkbox } from '../../../base/browser/ui/toggle/toggle.js';
37+
import { defaultCheckboxStyles } from '../../theme/browser/defaultStyles.js';
3638

3739
const $ = dom.$;
3840

@@ -120,7 +122,7 @@ export class QuickInputController extends Disposable {
120122
}
121123
}
122124

123-
private getUI(showInActiveContainer?: boolean) {
125+
private getUI(showInActiveContainer?: boolean): QuickInputUI {
124126
if (this.ui) {
125127
// In order to support aux windows, re-parent the controller
126128
// if the original event is from a different document
@@ -152,14 +154,13 @@ export class QuickInputController extends Disposable {
152154

153155
const headerContainer = dom.append(container, $('.quick-input-header'));
154156

155-
const checkAll = <HTMLInputElement>dom.append(headerContainer, $('input.quick-input-check-all'));
156-
checkAll.type = 'checkbox';
157-
checkAll.setAttribute('aria-label', localize('quickInput.checkAll', "Toggle all checkboxes"));
158-
this._register(dom.addStandardDisposableListener(checkAll, dom.EventType.CHANGE, e => {
157+
const checkAll = this._register(new Checkbox(localize('quickInput.checkAll', "Toggle all checkboxes"), false, { ...defaultCheckboxStyles, size: 15 }));
158+
dom.append(headerContainer, checkAll.domNode);
159+
this._register(checkAll.onChange(() => {
159160
const checked = checkAll.checked;
160161
list.setAllVisibleChecked(checked);
161162
}));
162-
this._register(dom.addDisposableListener(checkAll, dom.EventType.CLICK, e => {
163+
this._register(dom.addDisposableListener(checkAll.domNode, dom.EventType.CLICK, e => {
163164
if (e.x || e.y) { // Avoid 'click' triggered by 'space'...
164165
inputBox.setFocus();
165166
}
@@ -688,7 +689,7 @@ export class QuickInputController extends Disposable {
688689
ui.title.style.display = visibilities.title ? '' : 'none';
689690
ui.description1.style.display = visibilities.description && (visibilities.inputBox || visibilities.checkAll) ? '' : 'none';
690691
ui.description2.style.display = visibilities.description && !(visibilities.inputBox || visibilities.checkAll) ? '' : 'none';
691-
ui.checkAll.style.display = visibilities.checkAll ? '' : 'none';
692+
ui.checkAll.domNode.style.display = visibilities.checkAll ? '' : 'none';
692693
ui.inputContainer.style.display = visibilities.inputBox ? '' : 'none';
693694
ui.filterContainer.style.display = visibilities.inputBox ? '' : 'none';
694695
ui.visibleCountContainer.style.display = visibilities.visibleCount ? '' : 'none';
@@ -706,16 +707,21 @@ export class QuickInputController extends Disposable {
706707
private setEnabled(enabled: boolean) {
707708
if (enabled !== this.enabled) {
708709
this.enabled = enabled;
709-
for (const item of this.getUI().leftActionBar.viewItems) {
710+
const ui = this.getUI();
711+
for (const item of ui.leftActionBar.viewItems) {
710712
(item as ActionViewItem).action.enabled = enabled;
711713
}
712-
for (const item of this.getUI().rightActionBar.viewItems) {
714+
for (const item of ui.rightActionBar.viewItems) {
713715
(item as ActionViewItem).action.enabled = enabled;
714716
}
715-
this.getUI().checkAll.disabled = !enabled;
716-
this.getUI().inputBox.enabled = enabled;
717-
this.getUI().ok.enabled = enabled;
718-
this.getUI().list.enabled = enabled;
717+
if (enabled) {
718+
ui.checkAll.enable();
719+
} else {
720+
ui.checkAll.disable();
721+
}
722+
ui.inputBox.enabled = enabled;
723+
ui.ok.enabled = enabled;
724+
ui.list.enabled = enabled;
719725
}
720726
}
721727

0 commit comments

Comments
 (0)