mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
parent
53dcdf3ee8
commit
0be89e9a3b
|
@ -4,6 +4,8 @@
|
||||||
*--------------------------------------------------------------------------------------------*/
|
*--------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
import * as DOM from 'vs/base/browser/dom';
|
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 { Toggle } from 'vs/base/browser/ui/toggle/toggle';
|
||||||
import { Codicon } from 'vs/base/common/codicons';
|
import { Codicon } from 'vs/base/common/codicons';
|
||||||
import { Emitter, Event } from 'vs/base/common/event';
|
import { Emitter, Event } from 'vs/base/common/event';
|
||||||
|
@ -25,13 +27,14 @@ export class TreeItemCheckbox extends Disposable {
|
||||||
public toggle: Toggle | undefined;
|
public toggle: Toggle | undefined;
|
||||||
private checkboxContainer: HTMLDivElement;
|
private checkboxContainer: HTMLDivElement;
|
||||||
public isDisposed = false;
|
public isDisposed = false;
|
||||||
|
private hover: ICustomHover | undefined;
|
||||||
|
|
||||||
public static readonly checkboxClass = 'custom-view-tree-node-item-checkbox';
|
public static readonly checkboxClass = 'custom-view-tree-node-item-checkbox';
|
||||||
|
|
||||||
private readonly _onDidChangeState = new Emitter<boolean>();
|
private readonly _onDidChangeState = new Emitter<boolean>();
|
||||||
readonly onDidChangeState: Event<boolean> = this._onDidChangeState.event;
|
readonly onDidChangeState: Event<boolean> = this._onDidChangeState.event;
|
||||||
|
|
||||||
constructor(container: HTMLElement, private checkboxStateHandler: CheckboxStateHandler) {
|
constructor(container: HTMLElement, private checkboxStateHandler: CheckboxStateHandler, private readonly hoverDelegate: IHoverDelegate) {
|
||||||
super();
|
super();
|
||||||
this.checkboxContainer = <HTMLDivElement>container;
|
this.checkboxContainer = <HTMLDivElement>container;
|
||||||
}
|
}
|
||||||
|
@ -52,10 +55,11 @@ export class TreeItemCheckbox extends Disposable {
|
||||||
if (node.checkbox) {
|
if (node.checkbox) {
|
||||||
this.toggle = new Toggle({
|
this.toggle = new Toggle({
|
||||||
isChecked: node.checkbox.isChecked,
|
isChecked: node.checkbox.isChecked,
|
||||||
title: this.createCheckboxTitle(node.checkbox),
|
title: '',
|
||||||
icon: node.checkbox.isChecked ? Codicon.check : undefined,
|
icon: node.checkbox.isChecked ? Codicon.check : undefined,
|
||||||
...defaultToggleStyles
|
...defaultToggleStyles
|
||||||
});
|
});
|
||||||
|
this.setHover(node.checkbox);
|
||||||
this.setAccessibilityInformation(node.checkbox);
|
this.setAccessibilityInformation(node.checkbox);
|
||||||
this.toggle.domNode.classList.add(TreeItemCheckbox.checkboxClass);
|
this.toggle.domNode.classList.add(TreeItemCheckbox.checkboxClass);
|
||||||
DOM.append(this.checkboxContainer, this.toggle.domNode);
|
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) {
|
private setCheckbox(node: ITreeItem) {
|
||||||
if (this.toggle && node.checkbox) {
|
if (this.toggle && node.checkbox) {
|
||||||
node.checkbox.isChecked = this.toggle.checked;
|
node.checkbox.isChecked = this.toggle.checked;
|
||||||
this.toggle.setIcon(this.toggle.checked ? Codicon.check : undefined);
|
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.setAccessibilityInformation(node.checkbox);
|
||||||
this.checkboxStateHandler.setCheckboxState(node);
|
this.checkboxStateHandler.setCheckboxState(node);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private createCheckboxTitle(checkbox: ITreeItemCheckboxState) {
|
private checkboxHoverContent(checkbox: ITreeItemCheckboxState): string {
|
||||||
return checkbox.tooltip ? checkbox.tooltip :
|
return checkbox.tooltip ? checkbox.tooltip :
|
||||||
checkbox.isChecked ? localize('checked', 'Checked') : localize('unchecked', 'Unchecked');
|
checkbox.isChecked ? localize('checked', 'Checked') : localize('unchecked', 'Unchecked');
|
||||||
}
|
}
|
||||||
|
|
|
@ -1316,7 +1316,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
|
||||||
this.rerender();
|
this.rerender();
|
||||||
}
|
}
|
||||||
if (!templateData.checkbox) {
|
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 = checkbox;
|
||||||
}
|
}
|
||||||
templateData.checkbox.render(node);
|
templateData.checkbox.render(node);
|
||||||
|
|
Loading…
Reference in a new issue