提交 70d90e43 编写于 作者: S Sandeep Somavarapu

- Use svg icon for record keys

- Move clear action to search input
上级 a1fa2a89
......@@ -26,7 +26,7 @@ import { DefineKeybindingWidget, KeybindingsSearchWidget, KeybindingsSearchOptio
import {
IKeybindingsEditor, CONTEXT_KEYBINDING_FOCUS, CONTEXT_KEYBINDINGS_EDITOR, CONTEXT_KEYBINDINGS_SEARCH_FOCUS, KEYBINDINGS_EDITOR_COMMAND_REMOVE, KEYBINDINGS_EDITOR_COMMAND_COPY,
KEYBINDINGS_EDITOR_COMMAND_RESET, KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND, KEYBINDINGS_EDITOR_COMMAND_DEFINE, KEYBINDINGS_EDITOR_COMMAND_SHOW_SIMILAR,
KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE, CONTEXT_KEYBINDINGS_SEARCH_VALUE
KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE, KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS
} from 'vs/workbench/parts/preferences/common/preferences';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { IKeybindingEditingService } from 'vs/workbench/services/keybinding/common/keybindingEditing';
......@@ -54,6 +54,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
private keybindingsEditorModel: KeybindingsEditorModel;
private headerContainer: HTMLElement;
private actionsContainer: HTMLElement;
private searchWidget: KeybindingsSearchWidget;
private overlayContainer: HTMLElement;
......@@ -71,7 +72,6 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
private keybindingsEditorContextKey: IContextKey<boolean>;
private keybindingFocusContextKey: IContextKey<boolean>;
private searchFocusContextKey: IContextKey<boolean>;
private searchValueContextKey: IContextKey<boolean>;
private actionBar: ActionBar;
private sortByPrecedenceAction: Action;
......@@ -97,7 +97,6 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
this.keybindingsEditorContextKey = CONTEXT_KEYBINDINGS_EDITOR.bindTo(this.contextKeyService);
this.searchFocusContextKey = CONTEXT_KEYBINDINGS_SEARCH_FOCUS.bindTo(this.contextKeyService);
this.searchValueContextKey = CONTEXT_KEYBINDINGS_SEARCH_VALUE.bindTo(this.contextKeyService);
this.keybindingFocusContextKey = CONTEXT_KEYBINDING_FOCUS.bindTo(this.contextKeyService);
this.delayedFilterLogging = new Delayer<void>(1000);
}
......@@ -280,6 +279,8 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
const fullTextSearchPlaceholder = localize('SearchKeybindings.FullTextSearchPlaceholder', "Type to search in keybindings");
const keybindingsSearchPlaceholder = localize('SearchKeybindings.KeybindingsSearchPlaceholder', "Recording Keys. Press Escape to exit");
const clearInputAction = new Action(KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, localize('clearInput', "Clear Keybindings Search Input"), 'clear-input', false, () => { this.search(''); return Promise.resolve(null); });
const searchContainer = DOM.append(this.headerContainer, $('.search-container'));
this.searchWidget = this._register(this.instantiationService.createInstance(KeybindingsSearchWidget, searchContainer, <KeybindingsSearchOptions>{
ariaLabel: fullTextSearchPlaceholder,
......@@ -289,13 +290,13 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
recordEnter: true
}));
this._register(this.searchWidget.onDidChange(searchValue => {
this.searchValueContextKey.set(!!searchValue);
clearInputAction.enabled = !!searchValue;
this.delayedFiltering.trigger(() => this.filterKeybindings());
}));
this._register(this.searchWidget.onEscape(() => this.recordKeysAction.checked = false));
const actionsContainer = DOM.append(searchContainer, DOM.$('.keybindings-search-actions-container'));
const recordingBadge = this.createRecordingBadge(actionsContainer);
this.actionsContainer = DOM.append(searchContainer, DOM.$('.keybindings-search-actions-container'));
const recordingBadge = this.createRecordingBadge(this.actionsContainer);
const sortByPrecedenceActionKeybinding = this.keybindingsService.lookupKeybinding(KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE);
const sortByPrecedenceActionLabel = localize('sortByPrecedeneLabel', "Sort by Precedence");
......@@ -309,7 +310,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
const recordKeysActionKeybinding = this.keybindingsService.lookupKeybinding(KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS);
const recordKeysActionLabel = localize('recordKeysLabel', "Record Keys");
this.recordKeysAction = new Action(KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, recordKeysActionKeybinding ? localize('recordKeysLabelWithKeybinding', "{0} ({1})", recordKeysActionLabel, recordKeysActionKeybinding.getLabel()) : recordKeysActionLabel, 'octicon octicon-keyboard');
this.recordKeysAction = new Action(KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, recordKeysActionKeybinding ? localize('recordKeysLabelWithKeybinding', "{0} ({1})", recordKeysActionLabel, recordKeysActionKeybinding.getLabel()) : recordKeysActionLabel, 'record-keys');
this.recordKeysAction.checked = false;
this._register(this.recordKeysAction.onDidChange(e => {
if (e.checked !== void 0) {
......@@ -328,7 +329,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
}
}));
this.actionBar = this._register(new ActionBar(actionsContainer, {
this.actionBar = this._register(new ActionBar(this.actionsContainer, {
animated: false,
actionItemProvider: (action: Action) => {
if (action.id === this.sortByPrecedenceAction.id) {
......@@ -340,7 +341,8 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
return null;
}
}));
this.actionBar.push([this.recordKeysAction, this.sortByPrecedenceAction]);
this.actionBar.push([this.recordKeysAction, this.sortByPrecedenceAction, clearInputAction], { label: false, icon: true });
}
private createRecordingBadge(container: HTMLElement): HTMLElement {
......@@ -363,10 +365,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
private layoutSearchWidget(dimension: DOM.Dimension): void {
this.searchWidget.layout(dimension);
DOM.toggleClass(this.headerContainer, 'small', dimension.width < 400);
this.searchWidget.inputBox.inputElement.style.paddingRight = '60px';
if (dimension.width > 400 && this.recordKeysAction.checked) {
this.searchWidget.inputBox.inputElement.style.paddingRight = '180px';
}
this.searchWidget.inputBox.inputElement.style.paddingRight = `${DOM.getTotalWidth(this.actionsContainer) + 12}px`;
}
private createBody(parent: HTMLElement): void {
......
......@@ -36,6 +36,11 @@
display: none;
}
.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .icon {
width:16px;
height: 18px;
}
.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item {
margin-right: 4px;
}
......@@ -49,6 +54,24 @@
background: url('sort_precedence_inverse.svg') center center no-repeat;
}
.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .record-keys {
background: url('record-keys.svg') center center no-repeat;
}
.hc-black .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .record-keys,
.vs-dark .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .record-keys {
background: url('record-keys-inverse.svg') center center no-repeat;
}
.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .clear-input {
background: url('clear.svg') center center no-repeat;
}
.hc-black .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .clear-input,
.vs-dark .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .clear-input {
background: url('clear-inverse.svg') center center no-repeat;
}
.keybindings-editor > .keybindings-header .open-keybindings-container {
margin-top: 10px;
display: flex;
......
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5H9V4H10V5V5ZM3 6H2V7H3V6V6ZM8 4H7V5H8V4V4ZM4 4H2V5H4V4V4ZM12 11H14V10H12V11V11ZM8 7H9V6H8V7V7ZM4 10H2V11H4V10V10ZM12 4H11V5H12V4V4ZM14 4H13V5H14V4V4ZM12 9H14V6H12V9V9ZM16 3V12C16 12.55 15.55 13 15 13H1C0.45 13 0 12.55 0 12V3C0 2.45 0.45 2 1 2H15C15.55 2 16 2.45 16 3V3ZM15 3H1V12H15V3V3ZM6 7H7V6H6V7V7ZM6 4H5V5H6V4V4ZM4 7H5V6H4V7V7ZM5 11H11V10H5V11V11ZM10 7H11V6H10V7V7ZM3 8H2V9H3V8V8ZM8 8V9H9V8H8V8ZM6 8V9H7V8H6V8ZM5 8H4V9H5V8V8ZM10 9H11V8H10V9V9Z" fill="#C5C5C5"/>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5H9V4H10V5V5ZM3 6H2V7H3V6V6ZM8 4H7V5H8V4V4ZM4 4H2V5H4V4V4ZM12 11H14V10H12V11V11ZM8 7H9V6H8V7V7ZM4 10H2V11H4V10V10ZM12 4H11V5H12V4V4ZM14 4H13V5H14V4V4ZM12 9H14V6H12V9V9ZM16 3V12C16 12.55 15.55 13 15 13H1C0.45 13 0 12.55 0 12V3C0 2.45 0.45 2 1 2H15C15.55 2 16 2.45 16 3V3ZM15 3H1V12H15V3V3ZM6 7H7V6H6V7V7ZM6 4H5V5H6V4V4ZM4 7H5V6H4V7V7ZM5 11H11V10H5V11V11ZM10 7H11V6H10V7V7ZM3 8H2V9H3V8V8ZM8 8V9H9V8H8V8ZM6 8V9H7V8H6V8ZM5 8H4V9H5V8V8ZM10 9H11V8H10V9V9Z" fill="#424242"/>
</svg>
......@@ -67,7 +67,6 @@ export const CONTEXT_SETTINGS_SEARCH_FOCUS = new RawContextKey<boolean>('inSetti
export const CONTEXT_TOC_ROW_FOCUS = new RawContextKey<boolean>('settingsTocRowFocus', false);
export const CONTEXT_KEYBINDINGS_EDITOR = new RawContextKey<boolean>('inKeybindings', false);
export const CONTEXT_KEYBINDINGS_SEARCH_FOCUS = new RawContextKey<boolean>('inKeybindingsSearch', false);
export const CONTEXT_KEYBINDINGS_SEARCH_VALUE = new RawContextKey<boolean>('hasKeybindingsSearchValue', false);
export const CONTEXT_KEYBINDING_FOCUS = new RawContextKey<boolean>('keybindingFocus', false);
export const SETTINGS_EDITOR_COMMAND_SEARCH = 'settings.action.search';
......
......@@ -24,7 +24,7 @@ import {
IKeybindingsEditor, IPreferencesSearchService, CONTEXT_KEYBINDING_FOCUS, CONTEXT_KEYBINDINGS_EDITOR, CONTEXT_KEYBINDINGS_SEARCH_FOCUS, KEYBINDINGS_EDITOR_COMMAND_DEFINE, KEYBINDINGS_EDITOR_COMMAND_REMOVE, KEYBINDINGS_EDITOR_COMMAND_SEARCH, KEYBINDINGS_EDITOR_COMMAND_RECORD_SEARCH_KEYS, KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE,
KEYBINDINGS_EDITOR_COMMAND_COPY, KEYBINDINGS_EDITOR_COMMAND_RESET, KEYBINDINGS_EDITOR_COMMAND_COPY_COMMAND, KEYBINDINGS_EDITOR_COMMAND_SHOW_SIMILAR, KEYBINDINGS_EDITOR_COMMAND_FOCUS_KEYBINDINGS, KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, SETTINGS_EDITOR_COMMAND_SEARCH, CONTEXT_SETTINGS_EDITOR, SETTINGS_EDITOR_COMMAND_FOCUS_FILE,
CONTEXT_SETTINGS_SEARCH_FOCUS, SETTINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, SETTINGS_EDITOR_COMMAND_FOCUS_NEXT_SETTING, SETTINGS_EDITOR_COMMAND_FOCUS_PREVIOUS_SETTING, SETTINGS_EDITOR_COMMAND_EDIT_FOCUSED_SETTING, SETTINGS_EDITOR_COMMAND_FOCUS_SETTINGS_FROM_SEARCH, CONTEXT_TOC_ROW_FOCUS, SETTINGS_EDITOR_COMMAND_FOCUS_SETTINGS_LIST,
SETTINGS_EDITOR_COMMAND_SHOW_CONTEXT_MENU, KEYBINDINGS_EDITOR_SHOW_DEFAULT_KEYBINDINGS, KEYBINDINGS_EDITOR_SHOW_USER_KEYBINDINGS, CONTEXT_KEYBINDINGS_SEARCH_VALUE
SETTINGS_EDITOR_COMMAND_SHOW_CONTEXT_MENU, KEYBINDINGS_EDITOR_SHOW_DEFAULT_KEYBINDINGS, KEYBINDINGS_EDITOR_SHOW_USER_KEYBINDINGS
} from 'vs/workbench/parts/preferences/common/preferences';
import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions';
......@@ -387,20 +387,6 @@ KeybindingsRegistry.registerCommandAndKeybindingRule({
}
});
MenuRegistry.appendMenuItem(MenuId.EditorTitle, {
command: {
id: KEYBINDINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS,
title: nls.localize('clearInput', "Clear Keybindings Search Input"),
iconLocation: {
light: URI.parse(require.toUrl(`vs/workbench/parts/preferences/browser/media/clear.svg`)),
dark: URI.parse(require.toUrl(`vs/workbench/parts/preferences/browser/media/clear-inverse.svg`))
},
precondition: ContextKeyExpr.and(CONTEXT_KEYBINDINGS_SEARCH_VALUE)
},
when: ContextKeyExpr.and(CONTEXT_KEYBINDINGS_EDITOR),
group: 'navigation',
});
CommandsRegistry.registerCommand(OpenGlobalKeybindingsFileAction.ID, serviceAccessor => {
serviceAccessor.get(IInstantiationService).createInstance(OpenGlobalKeybindingsFileAction, OpenGlobalKeybindingsFileAction.ID, OpenGlobalKeybindingsFileAction.LABEL).run();
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册