development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 21:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve hovers in title bar (#153166)

Browse source 
fixes #150788

- add a new delegate for the titlebar to handle the hover for the layout
	controls
- reuse the hover delegate in the command center
- don't show hover for application menu/overflow menu
This commit is contained in:
SteVen Batten 2022-06-24 15:15:43 -07:00 committed by GitHub
parent 7174dc681e
commit fff8f8ace5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/vs/base/browser/ui/menu/menubar.ts
View file

@ -313,8 +313,7 @@ export class MenuBar extends Disposable {
createOverflowMenu(): void {
const label = this.isCompact ? nls.localize('mAppMenu', 'Application Menu') : nls.localize('mMore', 'More');
const title = this.isCompact ? label : undefined;
const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': this.isCompact ? 0 : -1, 'aria-label': label, 'title': title, 'aria-haspopup': true });
const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': this.isCompact ? 0 : -1, 'aria-label': label, 'aria-haspopup': true });
const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + Codicon.menuBarMore.cssSelector, { 'role': 'none', 'aria-hidden': true });
buttonElement.appendChild(titleElement);

23
src/vs/workbench/browser/parts/titlebar/commandCenterControl.ts
View file

@ -16,7 +16,6 @@ import { assertType } from 'vs/base/common/types';
import { localize } from 'vs/nls';
import { createActionViewItem, createAndFillInContextMenuActions, MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@ -25,7 +24,6 @@ import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import * as colors from 'vs/platform/theme/common/colorRegistry';
import { WindowTitle } from 'vs/workbench/browser/parts/titlebar/windowTitle';
import { MENUBAR_SELECTION_BACKGROUND, MENUBAR_SELECTION_FOREGROUND, PANEL_BORDER, TITLE_BAR_ACTIVE_FOREGROUND } from 'vs/workbench/common/theme';
import { IHoverService } from 'vs/workbench/services/hover/browser/hover';
export class CommandCenterControl {
@ -38,35 +36,16 @@ export class CommandCenterControl {
constructor(
windowTitle: WindowTitle,
hoverDelegate: IHoverDelegate,
@IContextMenuService contextMenuService: IContextMenuService,
@IContextKeyService contextKeyService: IContextKeyService,
@IInstantiationService instantiationService: IInstantiationService,
@IMenuService menuService: IMenuService,
@IQuickInputService quickInputService: IQuickInputService,
@IHoverService hoverService: IHoverService,
@IConfigurationService configurationService: IConfigurationService,
@IKeybindingService keybindingService: IKeybindingService,
) {
this.element.classList.add('command-center');
const hoverDelegate = new class implements IHoverDelegate {
private _lastHoverHideTime: number = 0;
readonly showHover = hoverService.showHover.bind(hoverService);
readonly placement = 'element';
get delay(): number {
return Date.now() - this._lastHoverHideTime < 200
? 0 // show instantly when a hover was recently shown
: configurationService.getValue<number>('workbench.hover.delay');
}
onDidHideHover() {
this._lastHoverHideTime = Date.now();
}
};
const titleToolbar = new ToolBar(this.element, contextMenuService, {
actionViewItemProvider: (action) => {

27
src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
View file

@ -34,6 +34,8 @@ import { getIconRegistry } from 'vs/platform/theme/common/iconRegistry';
import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
import { WindowTitle } from 'vs/workbench/browser/parts/titlebar/windowTitle';
import { CommandCenterControl } from 'vs/workbench/browser/parts/titlebar/commandCenterControl';
import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
import { IHoverService } from 'vs/workbench/services/hover/browser/hover';
export class TitlebarPart extends Part implements ITitleService {
@ -71,6 +73,8 @@ export class TitlebarPart extends Part implements ITitleService {
private layoutToolbar: ToolBar | undefined;
protected lastLayoutDimensions: Dimension | undefined;
private hoverDelegate: IHoverDelegate;
private readonly titleDisposables = this._register(new DisposableStore());
private titleBarStyle: 'native' | 'custom';
@ -91,6 +95,7 @@ export class TitlebarPart extends Part implements ITitleService {
@IMenuService private readonly menuService: IMenuService,
@IContextKeyService private readonly contextKeyService: IContextKeyService,
@IHostService private readonly hostService: IHostService,
@IHoverService hoverService: IHoverService,
) {
super(Parts.TITLEBAR_PART, { hasTitle: false }, themeService, storageService, layoutService);
this.windowTitle = this._register(instantiationService.createInstance(WindowTitle));
@ -98,6 +103,24 @@ export class TitlebarPart extends Part implements ITitleService {
this.titleBarStyle = getTitleBarStyle(this.configurationService);
this.hoverDelegate = new class implements IHoverDelegate {
private _lastHoverHideTime: number = 0;
readonly showHover = hoverService.showHover.bind(hoverService);
readonly placement = 'element';
get delay(): number {
return Date.now() - this._lastHoverHideTime < 200
? 0 // show instantly when a hover was recently shown
: configurationService.getValue<number>('workbench.hover.delay');
}
onDidHideHover() {
this._lastHoverHideTime = Date.now();
}
};
this.registerListeners();
}
@ -203,7 +226,7 @@ export class TitlebarPart extends Part implements ITitleService {
}));
} else {
// Menu Title
const commandCenter = this.instantiationService.createInstance(CommandCenterControl, this.windowTitle);
const commandCenter = this.instantiationService.createInstance(CommandCenterControl, this.windowTitle, this.hoverDelegate);
reset(this.title, commandCenter.element);
this.titleDisposables.add(commandCenter);
this.titleDisposables.add(commandCenter.onDidChangeVisibility(this.adjustTitleMarginToCenter, this));
@ -252,7 +275,7 @@ export class TitlebarPart extends Part implements ITitleService {
this.layoutToolbar = new ToolBar(this.layoutControls, this.contextMenuService, {
actionViewItemProvider: action => {
return createActionViewItem(this.instantiationService, action);
return createActionViewItem(this.instantiationService, action, { hoverDelegate: this.hoverDelegate });
},
allowContextMenu: true
});

4
src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts
View file

@ -21,6 +21,7 @@ import { getTitleBarStyle, useWindowControlsOverlay } from 'vs/platform/window/c
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { Codicon } from 'vs/base/common/codicons';
import { NativeMenubarControl } from 'vs/workbench/electron-sandbox/parts/titlebar/menubarControl';
import { IHoverService } from 'vs/workbench/services/hover/browser/hover';
export class TitlebarPart extends BrowserTitleBarPart {
private maxRestoreControl: HTMLElement | undefined;
@ -60,8 +61,9 @@ export class TitlebarPart extends BrowserTitleBarPart {
@IContextKeyService contextKeyService: IContextKeyService,
@IHostService hostService: IHostService,
@INativeHostService private readonly nativeHostService: INativeHostService,
@IHoverService hoverService: IHoverService,
) {
super(contextMenuService, configurationService, environmentService, instantiationService, themeService, storageService, layoutService, menuService, contextKeyService, hostService);
super(contextMenuService, configurationService, environmentService, instantiationService, themeService, storageService, layoutService, menuService, contextKeyService, hostService, hoverService);
this.environmentService = environmentService;
}