development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-07-17 11:07:22 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Checked tree: Inconsistent hover styles (#184152)

Browse source 
Fixes #183918
This commit is contained in:
Alex Ross 2023-06-02 14:02:30 +02:00 committed by GitHub
parent 53dcdf3ee8
commit 0be89e9a3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/vs/workbench/browser/parts/views/checkbox.ts
View file

@ -4,6 +4,8 @@
*--------------------------------------------------------------------------------------------*/
import * as DOM from 'vs/base/browser/dom';
import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
import { Codicon } from 'vs/base/common/codicons';
import { Emitter, Event } from 'vs/base/common/event';
@ -25,13 +27,14 @@ export class TreeItemCheckbox extends Disposable {
public toggle: Toggle | undefined;
private checkboxContainer: HTMLDivElement;
public isDisposed = false;
private hover: ICustomHover | undefined;
public static readonly checkboxClass = 'custom-view-tree-node-item-checkbox';
private readonly _onDidChangeState = new Emitter<boolean>();
readonly onDidChangeState: Event<boolean> = this._onDidChangeState.event;
constructor(container: HTMLElement, private checkboxStateHandler: CheckboxStateHandler) {
constructor(container: HTMLElement, private checkboxStateHandler: CheckboxStateHandler, private readonly hoverDelegate: IHoverDelegate) {
super();
this.checkboxContainer = <HTMLDivElement>container;
}
@ -52,10 +55,11 @@ export class TreeItemCheckbox extends Disposable {
if (node.checkbox) {
this.toggle = new Toggle({
isChecked: node.checkbox.isChecked,
title: this.createCheckboxTitle(node.checkbox),
title: '',
icon: node.checkbox.isChecked ? Codicon.check : undefined,
...defaultToggleStyles
});
this.setHover(node.checkbox);
this.setAccessibilityInformation(node.checkbox);
this.toggle.domNode.classList.add(TreeItemCheckbox.checkboxClass);
DOM.append(this.checkboxContainer, this.toggle.domNode);
@ -73,17 +77,29 @@ export class TreeItemCheckbox extends Disposable {
}
}
private setHover(checkbox: ITreeItemCheckboxState) {
if (this.toggle) {
if (!this.hover) {
this.hover = setupCustomHover(this.hoverDelegate, this.toggle.domNode, this.checkboxHoverContent(checkbox));
this._register(this.hover);
} else {
this.hover.update(checkbox.tooltip);
}
}
}
private setCheckbox(node: ITreeItem) {
if (this.toggle && node.checkbox) {
node.checkbox.isChecked = this.toggle.checked;
this.toggle.setIcon(this.toggle.checked ? Codicon.check : undefined);
this.toggle.setTitle(this.createCheckboxTitle(node.checkbox));
this.setHover(node.checkbox);
this.setAccessibilityInformation(node.checkbox);
this.checkboxStateHandler.setCheckboxState(node);
}
}
private createCheckboxTitle(checkbox: ITreeItemCheckboxState) {
private checkboxHoverContent(checkbox: ITreeItemCheckboxState): string {
return checkbox.tooltip ? checkbox.tooltip :
checkbox.isChecked ? localize('checked', 'Checked') : localize('unchecked', 'Unchecked');
}

2
src/vs/workbench/browser/parts/views/treeView.ts
View file

@ -1316,7 +1316,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
this.rerender();
}
if (!templateData.checkbox) {
const checkbox = new TreeItemCheckbox(templateData.checkboxContainer, this.checkboxStateHandler);
const checkbox = new TreeItemCheckbox(templateData.checkboxContainer, this.checkboxStateHandler, this._hoverDelegate);
templateData.checkbox = checkbox;
}
templateData.checkbox.render(node);