Skip to content

Commit 44f9a68

Browse files
author
Benjamin Pasero
committed
Welcome: Improve "keyboard tips" visual presentation (fixes microsoft#64901)
1 parent 6c570ec commit 44f9a68

6 files changed

Lines changed: 32 additions & 52 deletions

File tree

‎src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import 'vs/css!./keybindingLabel';
7-
import { IDisposable } from 'vs/base/common/lifecycle';
87
import { equals } from 'vs/base/common/objects';
98
import { OperatingSystem } from 'vs/base/common/platform';
109
import { ResolvedKeybinding, ResolvedKeybindingPart } from 'vs/base/common/keyCodes';
1110
import { UILabelProvider } from 'vs/base/common/keybindingLabels';
1211
import * as dom from 'vs/base/browser/dom';
12+
import { localize } from 'vs/nls';
1313

1414
const $ = dom.$;
1515

@@ -26,14 +26,18 @@ export interface Matches {
2626
chordPart: PartMatches;
2727
}
2828

29-
export class KeybindingLabel implements IDisposable {
29+
export interface KeybindingLabelOptions {
30+
renderUnboundKeybindings: boolean;
31+
}
32+
33+
export class KeybindingLabel {
3034

3135
private domNode: HTMLElement;
3236
private keybinding: ResolvedKeybinding;
3337
private matches: Matches;
3438
private didEverRender: boolean;
3539

36-
constructor(container: HTMLElement, private os: OperatingSystem) {
40+
constructor(container: HTMLElement, private os: OperatingSystem, private options?: KeybindingLabelOptions) {
3741
this.domNode = dom.append(container, $('.monaco-keybinding'));
3842
this.didEverRender = false;
3943
container.appendChild(this.domNode);
@@ -43,7 +47,7 @@ export class KeybindingLabel implements IDisposable {
4347
return this.domNode;
4448
}
4549

46-
set(keybinding: ResolvedKeybinding, matches: Matches) {
50+
set(keybinding: ResolvedKeybinding, matches?: Matches) {
4751
if (this.didEverRender && this.keybinding === keybinding && KeybindingLabel.areSame(this.matches, matches)) {
4852
return;
4953
}
@@ -66,6 +70,8 @@ export class KeybindingLabel implements IDisposable {
6670
this.renderPart(this.domNode, chordPart, this.matches ? this.matches.chordPart : null);
6771
}
6872
this.domNode.title = this.keybinding.getAriaLabel() || '';
73+
} else if (this.options && this.options.renderUnboundKeybindings) {
74+
this.renderUnbound(this.domNode);
6975
}
7076

7177
this.didEverRender = true;
@@ -98,7 +104,8 @@ export class KeybindingLabel implements IDisposable {
98104
}
99105
}
100106

101-
dispose() {
107+
private renderUnbound(parent: HTMLElement): void {
108+
dom.append(parent, $('span.monaco-keybinding-key', undefined, localize('unbound', "Unbound")));
102109
}
103110

104111
private static areSame(a: Matches, b: Matches): boolean {

‎src/vs/base/parts/quickopen/browser/quickOpenModel.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ class Renderer implements IRenderer<QuickOpenEntry> {
474474
data.detail.set(entry.getDetail(), detailHighlights);
475475

476476
// Keybinding
477-
data.keybinding.set(entry.getKeybinding(), null);
477+
data.keybinding.set(entry.getKeybinding());
478478
}
479479
}
480480

@@ -484,7 +484,6 @@ class Renderer implements IRenderer<QuickOpenEntry> {
484484
data.actionBar = null;
485485
data.container = null;
486486
data.entry = null;
487-
data.keybinding.dispose();
488487
data.keybinding = null;
489488
data.detail.dispose();
490489
data.detail = null;

‎src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -999,7 +999,7 @@ export class ExtensionEditor extends BaseEditor {
999999

10001000
const renderKeybinding = (keybinding: ResolvedKeybinding): HTMLElement => {
10011001
const element = $('');
1002-
new KeybindingLabel(element, OS).set(keybinding, null);
1002+
new KeybindingLabel(element, OS).set(keybinding);
10031003
return element;
10041004
};
10051005

‎src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,10 +257,10 @@ export class DefineKeybindingWidget extends Widget {
257257
this._chordPart = chordPart;
258258
dom.clearNode(this._outputNode);
259259
dom.clearNode(this._showExistingKeybindingsNode);
260-
new KeybindingLabel(this._outputNode, OS).set(this._firstPart, null);
260+
new KeybindingLabel(this._outputNode, OS).set(this._firstPart);
261261
if (this._chordPart) {
262262
this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to")));
263-
new KeybindingLabel(this._outputNode, OS).set(this._chordPart, null);
263+
new KeybindingLabel(this._outputNode, OS).set(this._chordPart);
264264
}
265265
const label = this.getUserSettingsLabel();
266266
if (label) {

‎src/vs/workbench/parts/watermark/electron-browser/watermark.css‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -50,25 +50,6 @@
5050
text-align: left;
5151
}
5252

53-
.monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts {
54-
padding-left: 0.5em;
55-
padding-right: 0.5em;
56-
}
57-
58-
.mac > .monaco-workbench > .part.editor > .content.empty > .watermark dd > .shortcuts {
59-
letter-spacing: 0.15em;
60-
font-family: "Lucida Grande", sans-serif;
61-
}
62-
63-
.monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound {
64-
padding-left: 0.5em;
65-
padding-right: 0.5em;
66-
}
67-
68-
.mac > .monaco-workbench > .part.editor > .content.empty > .watermark dd > .unbound {
69-
font-family: "Lucida Grande", sans-serif;
70-
}
71-
7253
.monaco-workbench > .part.editor > .content.empty > .watermark dt,
7354
.monaco-workbench > .part.editor > .content.empty > .watermark dd {
7455
display: table-cell;

‎src/vs/workbench/parts/watermark/electron-browser/watermark.ts‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import 'vs/css!./watermark';
77
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
88
import { assign } from 'vs/base/common/objects';
9-
import { isMacintosh } from 'vs/base/common/platform';
9+
import { isMacintosh, OS } from 'vs/base/common/platform';
1010
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
1111
import * as nls from 'vs/nls';
1212
import { Registry } from 'vs/platform/registry/common/platform';
@@ -22,63 +22,63 @@ import { ShowAllCommandsAction } from 'vs/workbench/parts/quickopen/browser/comm
2222
import { Parts, IPartService, IDimension } from 'vs/workbench/services/part/common/partService';
2323
import { StartAction } from 'vs/workbench/parts/debug/browser/debugActions';
2424
import { FindInFilesActionId } from 'vs/workbench/parts/search/common/constants';
25-
import { escape } from 'vs/base/common/strings';
2625
import { QUICKOPEN_ACTION_ID } from 'vs/workbench/browser/parts/quickopen/quickopen';
2726
import { TERMINAL_COMMAND_ID } from 'vs/workbench/parts/terminal/common/terminalCommands';
2827
import * as dom from 'vs/base/browser/dom';
28+
import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
2929

3030
const $ = dom.$;
3131

3232
interface WatermarkEntry {
3333
text: string;
34-
ids: string[];
34+
id: string;
3535
mac?: boolean;
3636
}
3737

3838
const showCommands: WatermarkEntry = {
3939
text: nls.localize('watermark.showCommands', "Show All Commands"),
40-
ids: [ShowAllCommandsAction.ID]
40+
id: ShowAllCommandsAction.ID
4141
};
4242
const quickOpen: WatermarkEntry = {
4343
text: nls.localize('watermark.quickOpen', "Go to File"),
44-
ids: [QUICKOPEN_ACTION_ID]
44+
id: QUICKOPEN_ACTION_ID
4545
};
4646
const openFileNonMacOnly: WatermarkEntry = {
4747
text: nls.localize('watermark.openFile', "Open File"),
48-
ids: [OpenFileAction.ID],
48+
id: OpenFileAction.ID,
4949
mac: false
5050
};
5151
const openFolderNonMacOnly: WatermarkEntry = {
5252
text: nls.localize('watermark.openFolder', "Open Folder"),
53-
ids: [OpenFolderAction.ID],
53+
id: OpenFolderAction.ID,
5454
mac: false
5555
};
5656
const openFileOrFolderMacOnly: WatermarkEntry = {
5757
text: nls.localize('watermark.openFileFolder', "Open File or Folder"),
58-
ids: [OpenFileFolderAction.ID],
58+
id: OpenFileFolderAction.ID,
5959
mac: true
6060
};
6161
const openRecent: WatermarkEntry = {
6262
text: nls.localize('watermark.openRecent', "Open Recent"),
63-
ids: [OpenRecentAction.ID]
63+
id: OpenRecentAction.ID
6464
};
6565
const newUntitledFile: WatermarkEntry = {
6666
text: nls.localize('watermark.newUntitledFile', "New Untitled File"),
67-
ids: [GlobalNewUntitledFileAction.ID]
67+
id: GlobalNewUntitledFileAction.ID
6868
};
6969
const newUntitledFileMacOnly: WatermarkEntry = assign({ mac: true }, newUntitledFile);
7070
const toggleTerminal: WatermarkEntry = {
7171
text: nls.localize({ key: 'watermark.toggleTerminal', comment: ['toggle is a verb here'] }, "Toggle Terminal"),
72-
ids: [TERMINAL_COMMAND_ID.TOGGLE]
72+
id: TERMINAL_COMMAND_ID.TOGGLE
7373
};
7474

7575
const findInFiles: WatermarkEntry = {
7676
text: nls.localize('watermark.findInFiles', "Find in Files"),
77-
ids: [FindInFilesActionId]
77+
id: FindInFilesActionId
7878
};
7979
const startDebugging: WatermarkEntry = {
8080
text: nls.localize('watermark.startDebugging', "Start Debugging"),
81-
ids: [StartAction.ID]
81+
id: StartAction.ID
8282
};
8383

8484
const noFolderEntries = [
@@ -98,7 +98,6 @@ const folderEntries = [
9898
toggleTerminal
9999
];
100100

101-
const UNBOUND = nls.localize('watermark.unboundCommand', "unbound");
102101
const WORKBENCH_TIPS_ENABLED_KEY = 'workbench.tips.enabled';
103102

104103
export class WatermarkContribution implements IWorkbenchContribution {
@@ -161,15 +160,9 @@ export class WatermarkContribution implements IWorkbenchContribution {
161160
const dt = dom.append(dl, $('dt'));
162161
dt.textContent = entry.text;
163162
const dd = dom.append(dl, $('dd'));
164-
dd.innerHTML = entry.ids
165-
.map(id => {
166-
let k = this.keybindingService.lookupKeybinding(id);
167-
if (k) {
168-
return `<span class="shortcuts">${escape(k.getLabel())}</span>`;
169-
}
170-
return `<span class="unbound">${escape(UNBOUND)}</span>`;
171-
})
172-
.join(' / ');
163+
const keybinding = new KeybindingLabel(dd, OS, { renderUnboundKeybindings: true });
164+
keybinding.set(this.keybindingService.lookupKeybinding(entry.id));
165+
dd.innerHTML = keybinding.element.outerHTML;
173166
});
174167
};
175168
update();

0 commit comments

Comments
 (0)