mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
Improve hovers in title bar (#153166)
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:
parent
7174dc681e
commit
fff8f8ace5
|
@ -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);
|
||||
|
|
|
@ -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) => {
|
||||
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue