diff --git a/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts b/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts index 77a9ed4ad87..2c0ca2a7e8e 100644 --- a/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts @@ -137,7 +137,7 @@ export class DefineKeybindingWidget extends Widget { private _domNode: FastDomNode; 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()); public onDidChange: Event = this._onDidChange.event; - private _onLinkClick = this._register(new Emitter()); - public readonly onLinkClick: Event = this._onLinkClick.event; + private _onShowExistingKeybindings = this._register(new Emitter()); + public readonly onShowExistingKeybidings: Event = 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 { diff --git a/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts b/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts index 4e530e5924c..5544c525182 100644 --- a/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts +++ b/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts @@ -260,25 +260,20 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor } showSimilarKeybindings(keybindingEntry: IKeybindingItemEntry): TPromise { - 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(); } diff --git a/src/vs/workbench/parts/preferences/browser/media/keybindings.css b/src/vs/workbench/parts/preferences/browser/media/keybindings.css index 8bd81343b37..e37b5c3770c 100644 --- a/src/vs/workbench/parts/preferences/browser/media/keybindings.css +++ b/src/vs/workbench/parts/preferences/browser/media/keybindings.css @@ -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; }