Fixes #1275: Render both keybindings.json string and UI label in define keybinding widget
This commit is contained in:
parent
da0f76eb72
commit
7b013e014d
|
@ -13,8 +13,6 @@
|
|||
|
||||
.monaco-editor .defineKeybindingWidget {
|
||||
font-family: 'Segoe WPC', 'Segoe UI', "SFUIText-Light", HelveticaNeue-Light, sans-serif, "Droid Sans Fallback";
|
||||
width: 340px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
@ -23,7 +21,8 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.monaco-editor .defineKeybindingWidget .input {
|
||||
.monaco-editor .defineKeybindingWidget .input,
|
||||
.monaco-editor .defineKeybindingWidget .output {
|
||||
margin-top:10px;
|
||||
width: 320px;
|
||||
display: block;
|
||||
|
|
|
@ -23,6 +23,7 @@ import {IKeybindingService} from 'vs/platform/keybinding/common/keybindingServic
|
|||
import {RunOnceScheduler} from 'vs/base/common/async';
|
||||
import {IOSupport} from 'vs/platform/keybinding/common/commonKeybindingResolver';
|
||||
import {IHTMLContentElement} from 'vs/base/common/htmlContent';
|
||||
import {renderHtml} from 'vs/base/browser/htmlContentRenderer';
|
||||
|
||||
const NLS_LAUNCH_MESSAGE = nls.localize('defineKeybinding.start', "Define Keybinding");
|
||||
const NLS_DEFINE_MESSAGE = nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER");
|
||||
|
@ -56,7 +57,7 @@ export class DefineKeybindingController implements EditorCommon.IEditorContribut
|
|||
this._keybindingService = keybindingService;
|
||||
this._toDispose = [];
|
||||
this._launchWidget = new DefineKeybindingLauncherWidget(this._editor, keybindingService, () => this.launch());
|
||||
this._defineWidget = new DefineKeybindingWidget(this._editor, (keybinding) => this._onAccepted(keybinding));
|
||||
this._defineWidget = new DefineKeybindingWidget(this._editor, keybindingService, (keybinding) => this._onAccepted(keybinding));
|
||||
|
||||
this._toDispose.push(this._editor.addListener2(EditorCommon.EventType.ModelChanged, (e) => {
|
||||
if (isInterestingEditorModel(this._editor)) {
|
||||
|
@ -286,31 +287,41 @@ class DefineKeybindingLauncherWidget implements EditorBrowser.IOverlayWidget {
|
|||
}
|
||||
}
|
||||
|
||||
class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
|
||||
|
||||
class DefineKeybindingWidget implements EditorBrowser.IOverlayWidget {
|
||||
|
||||
private static ID = 'editor.contrib.defineKeybindingWidget';
|
||||
private static WIDTH = 340;
|
||||
private static HEIGHT = 90;
|
||||
|
||||
private _editor: EditorBrowser.ICodeEditor;
|
||||
private _keybindingService:IKeybindingService;
|
||||
|
||||
private _domNode: HTMLElement;
|
||||
private _toDispose: IDisposable[];
|
||||
private _position: EditorCommon.IPosition;
|
||||
|
||||
private _messageNode: HTMLElement;
|
||||
private _inputNode: HTMLInputElement;
|
||||
private _outputNode: HTMLElement;
|
||||
|
||||
private _lastKeybinding: Keybinding;
|
||||
private _onAccepted: (keybinding:string) => void;
|
||||
private _isVisible: boolean;
|
||||
|
||||
constructor(editor:EditorBrowser.ICodeEditor, onAccepted:(keybinding:string) => void) {
|
||||
constructor(editor:EditorBrowser.ICodeEditor, keybindingService:IKeybindingService, onAccepted:(keybinding:string) => void) {
|
||||
this._editor = editor;
|
||||
this._keybindingService = keybindingService;
|
||||
this._onAccepted = onAccepted;
|
||||
this._toDispose = [];
|
||||
this._position = null;
|
||||
this._lastKeybinding = null;
|
||||
|
||||
this._domNode = document.createElement('div');
|
||||
this._domNode.className = 'defineKeybindingWidget';
|
||||
DomUtils.StyleMutator.setWidth(this._domNode, DefineKeybindingWidget.WIDTH);
|
||||
DomUtils.StyleMutator.setHeight(this._domNode, DefineKeybindingWidget.HEIGHT);
|
||||
|
||||
this._domNode.style.display = 'none';
|
||||
this._isVisible = false;
|
||||
|
||||
this._messageNode = document.createElement('div');
|
||||
this._messageNode.className = 'message';
|
||||
|
@ -321,6 +332,10 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
|
|||
this._inputNode.className = 'input';
|
||||
this._domNode.appendChild(this._inputNode);
|
||||
|
||||
this._outputNode = document.createElement('div');
|
||||
this._outputNode.className = 'output';
|
||||
this._domNode.appendChild(this._outputNode);
|
||||
|
||||
this._toDispose.push(DomUtils.addDisposableListener(this._inputNode, 'keydown', (e) => {
|
||||
let keyEvent = new StandardKeyboardEvent(e);
|
||||
keyEvent.preventDefault();
|
||||
|
@ -344,15 +359,24 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
|
|||
|
||||
this._inputNode.value = this._lastKeybinding.toUserSettingsLabel().toLowerCase();
|
||||
this._inputNode.title = 'keyCode: ' + keyEvent.browserEvent.keyCode;
|
||||
|
||||
DomUtils.clearNode(this._outputNode);
|
||||
let htmlkb = this._keybindingService.getHTMLLabelFor(this._lastKeybinding);
|
||||
htmlkb.forEach((item) => this._outputNode.appendChild(renderHtml(item)));
|
||||
}));
|
||||
this._toDispose.push(this._editor.addListener2(EditorCommon.EventType.ConfigurationChanged, (e) => {
|
||||
if (this._isVisible) {
|
||||
this._layout();
|
||||
}
|
||||
}))
|
||||
|
||||
this._toDispose.push(DomUtils.addDisposableListener(this._inputNode, 'blur', (e) => this._stop()));
|
||||
|
||||
this._editor.addContentWidget(this);
|
||||
this._editor.addOverlayWidget(this);
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
this._editor.removeContentWidget(this);
|
||||
this._editor.removeOverlayWidget(this);
|
||||
this._toDispose = disposeAll(this._toDispose);
|
||||
}
|
||||
|
||||
|
@ -364,23 +388,43 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
|
|||
return this._domNode;
|
||||
}
|
||||
|
||||
public getPosition(): EditorBrowser.IContentWidgetPosition {
|
||||
if (!this._position) {
|
||||
return null;
|
||||
}
|
||||
public getPosition(): EditorBrowser.IOverlayWidgetPosition {
|
||||
return {
|
||||
position: this._position,
|
||||
preference: [EditorBrowser.ContentWidgetPositionPreference.BELOW]
|
||||
preference: null
|
||||
};
|
||||
}
|
||||
|
||||
public start(): void {
|
||||
this._position = this._editor.getPosition();
|
||||
this._editor.revealPositionInCenterIfOutsideViewport(this._position);
|
||||
this._editor.layoutContentWidget(this);
|
||||
private _show(): void {
|
||||
if (this._isVisible) {
|
||||
return;
|
||||
}
|
||||
this._isVisible = true;
|
||||
this._layout();
|
||||
this._domNode.style.display = 'block';
|
||||
}
|
||||
|
||||
// Force a view render
|
||||
this._editor.getOffsetForColumn(this._position.lineNumber, this._position.column);
|
||||
private _hide(): void {
|
||||
if (!this._isVisible) {
|
||||
return;
|
||||
}
|
||||
this._isVisible = false;
|
||||
this._domNode.style.display = 'none';
|
||||
}
|
||||
|
||||
private _layout(): void {
|
||||
let editorLayout = this._editor.getLayoutInfo();
|
||||
|
||||
let top = Math.round((editorLayout.height - DefineKeybindingWidget.HEIGHT) / 2);
|
||||
DomUtils.StyleMutator.setTop(this._domNode, top);
|
||||
|
||||
let left = Math.round((editorLayout.width - DefineKeybindingWidget.WIDTH) / 2);
|
||||
DomUtils.StyleMutator.setLeft(this._domNode, left);
|
||||
}
|
||||
|
||||
public start(): void {
|
||||
this._editor.revealPositionInCenterIfOutsideViewport(this._editor.getPosition());
|
||||
|
||||
this._show();
|
||||
|
||||
this._lastKeybinding = null;
|
||||
this._inputNode.value = '';
|
||||
|
@ -389,8 +433,7 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
|
|||
|
||||
private _stop(): void {
|
||||
this._editor.focus();
|
||||
this._position = null;
|
||||
this._editor.layoutContentWidget(this);
|
||||
this._hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue