From 44f9a685d07ff8b7c5302d3c75e46eaf03ecd8b0 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Thu, 17 Jan 2019 11:24:53 +0100 Subject: [PATCH] Welcome: Improve "keyboard tips" visual presentation (fixes #64901) --- .../ui/keybindingLabel/keybindingLabel.ts | 17 +++++--- .../parts/quickopen/browser/quickOpenModel.ts | 3 +- .../electron-browser/extensionEditor.ts | 2 +- .../preferences/browser/keybindingWidgets.ts | 4 +- .../watermark/electron-browser/watermark.css | 19 --------- .../watermark/electron-browser/watermark.ts | 39 ++++++++----------- 6 files changed, 32 insertions(+), 52 deletions(-) diff --git a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts index ecc926434d6..707c56b25ee 100644 --- a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts +++ b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts @@ -4,12 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./keybindingLabel'; -import { IDisposable } from 'vs/base/common/lifecycle'; import { equals } from 'vs/base/common/objects'; import { OperatingSystem } from 'vs/base/common/platform'; import { ResolvedKeybinding, ResolvedKeybindingPart } from 'vs/base/common/keyCodes'; import { UILabelProvider } from 'vs/base/common/keybindingLabels'; import * as dom from 'vs/base/browser/dom'; +import { localize } from 'vs/nls'; const $ = dom.$; @@ -26,14 +26,18 @@ export interface Matches { chordPart: PartMatches; } -export class KeybindingLabel implements IDisposable { +export interface KeybindingLabelOptions { + renderUnboundKeybindings: boolean; +} + +export class KeybindingLabel { private domNode: HTMLElement; private keybinding: ResolvedKeybinding; private matches: Matches; private didEverRender: boolean; - constructor(container: HTMLElement, private os: OperatingSystem) { + constructor(container: HTMLElement, private os: OperatingSystem, private options?: KeybindingLabelOptions) { this.domNode = dom.append(container, $('.monaco-keybinding')); this.didEverRender = false; container.appendChild(this.domNode); @@ -43,7 +47,7 @@ export class KeybindingLabel implements IDisposable { return this.domNode; } - set(keybinding: ResolvedKeybinding, matches: Matches) { + set(keybinding: ResolvedKeybinding, matches?: Matches) { if (this.didEverRender && this.keybinding === keybinding && KeybindingLabel.areSame(this.matches, matches)) { return; } @@ -66,6 +70,8 @@ export class KeybindingLabel implements IDisposable { this.renderPart(this.domNode, chordPart, this.matches ? this.matches.chordPart : null); } this.domNode.title = this.keybinding.getAriaLabel() || ''; + } else if (this.options && this.options.renderUnboundKeybindings) { + this.renderUnbound(this.domNode); } this.didEverRender = true; @@ -98,7 +104,8 @@ export class KeybindingLabel implements IDisposable { } } - dispose() { + private renderUnbound(parent: HTMLElement): void { + dom.append(parent, $('span.monaco-keybinding-key', undefined, localize('unbound', "Unbound"))); } private static areSame(a: Matches, b: Matches): boolean { diff --git a/src/vs/base/parts/quickopen/browser/quickOpenModel.ts b/src/vs/base/parts/quickopen/browser/quickOpenModel.ts index e2081d58429..5780dee88ca 100644 --- a/src/vs/base/parts/quickopen/browser/quickOpenModel.ts +++ b/src/vs/base/parts/quickopen/browser/quickOpenModel.ts @@ -474,7 +474,7 @@ class Renderer implements IRenderer { data.detail.set(entry.getDetail(), detailHighlights); // Keybinding - data.keybinding.set(entry.getKeybinding(), null); + data.keybinding.set(entry.getKeybinding()); } } @@ -484,7 +484,6 @@ class Renderer implements IRenderer { data.actionBar = null; data.container = null; data.entry = null; - data.keybinding.dispose(); data.keybinding = null; data.detail.dispose(); data.detail = null; diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts index 45f5218b292..c5333366afe 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts @@ -999,7 +999,7 @@ export class ExtensionEditor extends BaseEditor { const renderKeybinding = (keybinding: ResolvedKeybinding): HTMLElement => { const element = $(''); - new KeybindingLabel(element, OS).set(keybinding, null); + new KeybindingLabel(element, OS).set(keybinding); return element; }; diff --git a/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts b/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts index 8fc40dc505d..38ce9d93477 100644 --- a/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts @@ -257,10 +257,10 @@ export class DefineKeybindingWidget extends Widget { this._chordPart = chordPart; dom.clearNode(this._outputNode); dom.clearNode(this._showExistingKeybindingsNode); - new KeybindingLabel(this._outputNode, OS).set(this._firstPart, null); + new KeybindingLabel(this._outputNode, OS).set(this._firstPart); if (this._chordPart) { this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to"))); - new KeybindingLabel(this._outputNode, OS).set(this._chordPart, null); + new KeybindingLabel(this._outputNode, OS).set(this._chordPart); } const label = this.getUserSettingsLabel(); if (label) { diff --git a/src/vs/workbench/parts/watermark/electron-browser/watermark.css b/src/vs/workbench/parts/watermark/electron-browser/watermark.css index 9875886f652..8284b8442dd 100644 --- a/src/vs/workbench/parts/watermark/electron-browser/watermark.css +++ b/src/vs/workbench/parts/watermark/electron-browser/watermark.css @@ -50,25 +50,6 @@ text-align: left; } -.monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts { - padding-left: 0.5em; - padding-right: 0.5em; -} - -.mac > .monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts { - letter-spacing: 0.15em; - font-family: "Lucida Grande", sans-serif; -} - -.monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound { - padding-left: 0.5em; - padding-right: 0.5em; -} - -.mac > .monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound { - font-family: "Lucida Grande", sans-serif; -} - .monaco-workbench > .part.editor > .content.empty > .watermark dt, .monaco-workbench > .part.editor > .content.empty > .watermark dd { display: table-cell; diff --git a/src/vs/workbench/parts/watermark/electron-browser/watermark.ts b/src/vs/workbench/parts/watermark/electron-browser/watermark.ts index 35f3f10cd70..84b5334c1b5 100644 --- a/src/vs/workbench/parts/watermark/electron-browser/watermark.ts +++ b/src/vs/workbench/parts/watermark/electron-browser/watermark.ts @@ -6,7 +6,7 @@ import 'vs/css!./watermark'; import { IDisposable, dispose } from 'vs/base/common/lifecycle'; import { assign } from 'vs/base/common/objects'; -import { isMacintosh } from 'vs/base/common/platform'; +import { isMacintosh, OS } from 'vs/base/common/platform'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import * as nls from 'vs/nls'; import { Registry } from 'vs/platform/registry/common/platform'; @@ -22,63 +22,63 @@ import { ShowAllCommandsAction } from 'vs/workbench/parts/quickopen/browser/comm import { Parts, IPartService, IDimension } from 'vs/workbench/services/part/common/partService'; import { StartAction } from 'vs/workbench/parts/debug/browser/debugActions'; import { FindInFilesActionId } from 'vs/workbench/parts/search/common/constants'; -import { escape } from 'vs/base/common/strings'; import { QUICKOPEN_ACTION_ID } from 'vs/workbench/browser/parts/quickopen/quickopen'; import { TERMINAL_COMMAND_ID } from 'vs/workbench/parts/terminal/common/terminalCommands'; import * as dom from 'vs/base/browser/dom'; +import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel'; const $ = dom.$; interface WatermarkEntry { text: string; - ids: string[]; + id: string; mac?: boolean; } const showCommands: WatermarkEntry = { text: nls.localize('watermark.showCommands', "Show All Commands"), - ids: [ShowAllCommandsAction.ID] + id: ShowAllCommandsAction.ID }; const quickOpen: WatermarkEntry = { text: nls.localize('watermark.quickOpen', "Go to File"), - ids: [QUICKOPEN_ACTION_ID] + id: QUICKOPEN_ACTION_ID }; const openFileNonMacOnly: WatermarkEntry = { text: nls.localize('watermark.openFile', "Open File"), - ids: [OpenFileAction.ID], + id: OpenFileAction.ID, mac: false }; const openFolderNonMacOnly: WatermarkEntry = { text: nls.localize('watermark.openFolder', "Open Folder"), - ids: [OpenFolderAction.ID], + id: OpenFolderAction.ID, mac: false }; const openFileOrFolderMacOnly: WatermarkEntry = { text: nls.localize('watermark.openFileFolder', "Open File or Folder"), - ids: [OpenFileFolderAction.ID], + id: OpenFileFolderAction.ID, mac: true }; const openRecent: WatermarkEntry = { text: nls.localize('watermark.openRecent', "Open Recent"), - ids: [OpenRecentAction.ID] + id: OpenRecentAction.ID }; const newUntitledFile: WatermarkEntry = { text: nls.localize('watermark.newUntitledFile', "New Untitled File"), - ids: [GlobalNewUntitledFileAction.ID] + id: GlobalNewUntitledFileAction.ID }; const newUntitledFileMacOnly: WatermarkEntry = assign({ mac: true }, newUntitledFile); const toggleTerminal: WatermarkEntry = { text: nls.localize({ key: 'watermark.toggleTerminal', comment: ['toggle is a verb here'] }, "Toggle Terminal"), - ids: [TERMINAL_COMMAND_ID.TOGGLE] + id: TERMINAL_COMMAND_ID.TOGGLE }; const findInFiles: WatermarkEntry = { text: nls.localize('watermark.findInFiles', "Find in Files"), - ids: [FindInFilesActionId] + id: FindInFilesActionId }; const startDebugging: WatermarkEntry = { text: nls.localize('watermark.startDebugging', "Start Debugging"), - ids: [StartAction.ID] + id: StartAction.ID }; const noFolderEntries = [ @@ -98,7 +98,6 @@ const folderEntries = [ toggleTerminal ]; -const UNBOUND = nls.localize('watermark.unboundCommand', "unbound"); const WORKBENCH_TIPS_ENABLED_KEY = 'workbench.tips.enabled'; export class WatermarkContribution implements IWorkbenchContribution { @@ -161,15 +160,9 @@ export class WatermarkContribution implements IWorkbenchContribution { const dt = dom.append(dl, $('dt')); dt.textContent = entry.text; const dd = dom.append(dl, $('dd')); - dd.innerHTML = entry.ids - .map(id => { - let k = this.keybindingService.lookupKeybinding(id); - if (k) { - return `${escape(k.getLabel())}`; - } - return `${escape(UNBOUND)}`; - }) - .join(' / '); + const keybinding = new KeybindingLabel(dd, OS, { renderUnboundKeybindings: true }); + keybinding.set(this.keybindingService.lookupKeybinding(entry.id)); + dd.innerHTML = keybinding.element.outerHTML; }); }; update(); -- GitLab