Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-06-07 08:06:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

#24396 💄

Browse Source
This commit is contained in:
Sandeep Somavarapu
2018-05-23 10:55:37 +02:00
parent 06d504799f
commit 8d53ee62df
3 changed files with 39 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts
+34 -42
View File
@@ -137,7 +137,7 @@ export class DefineKeybindingWidget extends Widget {
private _domNode: FastDomNode<HTMLElement>;
private _keybindingInputWidget: KeybindingInputWidget;
private _outputNode: HTMLElement;
private _conflictNode: HTMLElement;
private _showExistingKeybindingsNode: HTMLElement;
private _firstPart: ResolvedKeybinding = null;
private _chordPart: ResolvedKeybinding = null;
@@ -148,8 +148,8 @@ export class DefineKeybindingWidget extends Widget {
private _onDidChange = this._register(new Emitter<String>());
public onDidChange: Event<String> = this._onDidChange.event;
private _onLinkClick = this._register(new Emitter<String>());
public readonly onLinkClick: Event<String> = this._onLinkClick.event;
private _onShowExistingKeybindings = this._register(new Emitter<String>());
public readonly onShowExistingKeybidings: Event<String> = this._onShowExistingKeybindings.event;
constructor(
parent: HTMLElement,
@@ -178,19 +178,11 @@ export class DefineKeybindingWidget extends Widget {
this._chordPart = null;
this._keybindingInputWidget.setInputValue('');
dom.clearNode(this._outputNode);
dom.clearNode(this._conflictNode);
dom.clearNode(this._showExistingKeybindingsNode);
this._keybindingInputWidget.focus();
}
const disposable = this._onHide.event(() => {
if (this._firstPart) {
let r = this._firstPart.getUserSettingsLabel();
if (this._chordPart) {
r = r + ' ' + this._chordPart.getUserSettingsLabel();
}
c(r);
} else {
c(null);
}
c(this.getUserSettingsLabel());
disposable.dispose();
});
});
@@ -204,6 +196,21 @@ export class DefineKeybindingWidget extends Widget {
this._domNode.setLeft(left);
}
printExisting(numberOfExisting: number): void {
if (numberOfExisting > 0) {
let outputString: string = nls.localize('defineKeybinding.existing', "Existing");
outputString = numberOfExisting + ' ' + outputString;
let textNode = document.createTextNode(outputString);
let textSpan = document.createElement('span');
dom.addClass(textSpan, 'existingText');
textSpan.appendChild(textNode);
this._showExistingKeybindingsNode.appendChild(textSpan);
textSpan.onmousedown = (e) => { e.preventDefault(); };
textSpan.onmouseup = (e) => { e.preventDefault(); };
textSpan.onclick = () => { this._onShowExistingKeybindings.fire(this.getUserSettingsLabel()); };
}
}
private create(): void {
this._domNode = createFastDomNode(document.createElement('div'));
this._domNode.setDisplay('none');
@@ -227,56 +234,41 @@ export class DefineKeybindingWidget extends Widget {
}));
this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {}));
this._register(this._keybindingInputWidget.onKeybinding(keybinding => { this.printKeybinding(keybinding); this.processChange(keybinding); }));
this._register(this._keybindingInputWidget.onKeybinding(keybinding => this.onKeybinding(keybinding)));
this._register(this._keybindingInputWidget.onEnter(() => this.hide()));
this._register(this._keybindingInputWidget.onEscape(() => this.onCancel()));
this._register(this._keybindingInputWidget.onBlur(() => this.onCancel()));
this._outputNode = dom.append(this._domNode.domNode, dom.$('.output'));
this._conflictNode = dom.append(this._domNode.domNode, dom.$('.conflicts'));
this._showExistingKeybindingsNode = dom.append(this._domNode.domNode, dom.$('.existing'));
}
private processChange(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
const [firstPart, chordPart] = keybinding;
let keybindingStr = '"' + firstPart.getAriaLabel() + '+';
if (chordPart) {
keybindingStr = keybindingStr + chordPart.getAriaLabel() + '+';
}
keybindingStr = keybindingStr + '"';
this._onDidChange.fire(keybindingStr);
}
private printKeybinding(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
private onKeybinding(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
const [firstPart, chordPart] = keybinding;
this._firstPart = firstPart;
this._chordPart = chordPart;
dom.clearNode(this._outputNode);
dom.clearNode(this._conflictNode);
dom.clearNode(this._showExistingKeybindingsNode);
new KeybindingLabel(this._outputNode, OS).set(this._firstPart, null);
if (this._chordPart) {
this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to")));
new KeybindingLabel(this._outputNode, OS).set(this._chordPart, null);
}
const label = this.getUserSettingsLabel();
if (label) {
this._onDidChange.fire(label);
}
}
public printConflicts(numConflicts: Number): void {
if (numConflicts > 0) {
let outputString: string = nls.localize('defineKeybinding.existing', "Existing");
outputString = numConflicts + ' ' + outputString;
let textNode = document.createTextNode(outputString);
let textSpan = document.createElement('span');
dom.addClass(textSpan, 'conflictText');
textSpan.appendChild(textNode);
let linkBinding = this._firstPart.getAriaLabel();
private getUserSettingsLabel(): string {
let label = null;
if (this._firstPart) {
label = this._firstPart.getUserSettingsLabel();
if (this._chordPart) {
linkBinding += '+' + this._chordPart.getAriaLabel();
label = label + ' ' + this._chordPart.getUserSettingsLabel();
}
linkBinding += '+';
this._conflictNode.appendChild(textSpan);
textSpan.onmousedown = (e) => { e.preventDefault(); };
textSpan.onmouseup = (e) => { e.preventDefault(); };
textSpan.onclick = () => { this._onLinkClick.fire(linkBinding); };
}
return label;
}
private onCancel(): void {
src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts
+3 -8
View File
@@ -260,25 +260,20 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
}
showSimilarKeybindings(keybindingEntry: IKeybindingItemEntry): TPromise<any> {
let value = `"${keybindingEntry.keybindingItem.keybinding.getAriaLabel().replace(' ', '+')}+"`;
const value = `"${keybindingEntry.keybindingItem.keybinding.getAriaLabel()}"`;
if (value !== this.searchWidget.getValue()) {
this.searchWidget.setValue(value);
}
return TPromise.as(null);
}
private showOverlayConflicts(keybindingStr: String): void {
const conflictsList: IKeybindingItemEntry[] = this.keybindingsEditorModel.fetch(`${keybindingStr}`, this.sortByPrecedence.checked);
this.defineKeybindingWidget.printConflicts(conflictsList.length);
}
private createOverlayContainer(parent: HTMLElement): void {
this.overlayContainer = DOM.append(parent, $('.overlay-container'));
this.overlayContainer.style.position = 'absolute';
this.overlayContainer.style.zIndex = '10';
this.defineKeybindingWidget = this._register(this.instantiationService.createInstance(DefineKeybindingWidget, this.overlayContainer));
this._register(this.defineKeybindingWidget.onDidChange(keybindingStr => this.showOverlayConflicts(keybindingStr)));
this._register(this.defineKeybindingWidget.onLinkClick(keybindingStr => { this.showSimilarKeybindings(this.keybindingsEditorModel.fetch(`${keybindingStr}`, this.sortByPrecedence.checked)[0]); }));
this._register(this.defineKeybindingWidget.onDidChange(keybindingStr => this.defineKeybindingWidget.printExisting(this.keybindingsEditorModel.fetch(`"${keybindingStr}"`).length)));
this._register(this.defineKeybindingWidget.onShowExistingKeybidings(keybindingStr => this.searchWidget.setValue(`"${keybindingStr}"`)));
this.hideOverlayContainer();
}
src/vs/workbench/parts/preferences/browser/media/keybindings.css
+2 -2
View File
@@ -15,7 +15,7 @@
.defineKeybindingWidget .monaco-inputbox,
.defineKeybindingWidget .output,
.defineKeybindingWidget .conflicts {
.defineKeybindingWidget .existing {
margin-top:10px;
width: 400px;
display: block;
@@ -31,7 +31,7 @@
justify-content: center;
}
.defineKeybindingWidget .conflicts .conflictText {
.defineKeybindingWidget .existing .existingText {
text-decoration: underline;
cursor: pointer;
}