Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

theme custom menus #54003

Merged
merged 6 commits into from
Jul 12, 2018
Merged

theme custom menus #54003

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3125689
theme menubar
sbatten Jul 11, 2018
e8c00e5
menubar theme keys
sbatten Jul 11, 2018
c4d35bd
menu/context menu theming
sbatten Jul 11, 2018
f5e641d
merge master
sbatten Jul 12, 2018
d7431ce
merge master
sbatten Jul 12, 2018
ebe5d62
some renames
bpasero Jul 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 0 additions & 13 deletions src/vs/workbench/browser/parts/menubar/media/menubarpart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,6 @@
zoom: 1;
}


.monaco-workbench > .part.menubar > .menubar-menu-button.open,
.monaco-workbench > .part.menubar > .menubar-menu-button:focus,
.monaco-workbench > .part.menubar > .menubar-menu-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.monaco-workbench > .part.menubar.light > .menubar-menu-button.open,
.monaco-workbench > .part.menubar.light > .menubar-menu-button:focus,
.monaco-workbench > .part.menubar.light > .menubar-menu-button:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.menubar-menu-items-holder {
position: absolute;
left: 0px;
Expand Down
168 changes: 140 additions & 28 deletions src/vs/workbench/browser/parts/menubar/menubarPart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,19 @@ import * as browser from 'vs/base/browser/browser';
import { Part } from 'vs/workbench/browser/part';
import { IMenubarService, IMenubarMenu, IMenubarMenuItemAction, IMenubarData } from 'vs/platform/menubar/common/menubar';
import { IMenuService, MenuId, IMenu, SubmenuItemAction } from 'vs/platform/actions/common/actions';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { IWindowService, MenuBarVisibility, IWindowsService } from 'vs/platform/windows/common/windows';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { ActionRunner, IActionRunner, IAction, Action } from 'vs/base/common/actions';
import { Builder, $ } from 'vs/base/browser/builder';
import { Separator } from 'vs/base/browser/ui/actionbar/actionbar';
import { EventType, Dimension, toggleClass } from 'vs/base/browser/dom';
import { TITLE_BAR_ACTIVE_BACKGROUND, TITLE_BAR_ACTIVE_FOREGROUND } from 'vs/workbench/common/theme';
import { EventType, Dimension } from 'vs/base/browser/dom';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { isWindows, isMacintosh } from 'vs/base/common/platform';
import { Menu, IMenuOptions, SubmenuAction } from 'vs/base/browser/ui/menu/menu';
import { KeyCode } from 'vs/base/common/keyCodes';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { IConfigurationService, IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration';
import { Color } from 'vs/base/common/color';
import { Event, Emitter } from 'vs/base/common/event';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { domEvent } from 'vs/base/browser/event';
Expand All @@ -35,6 +33,7 @@ import { IWorkspaceIdentifier, ISingleFolderWorkspaceIdentifier, isSingleFolderW
import { getPathLabel } from 'vs/base/common/labels';
import { IEnvironmentService } from 'vs/platform/environment/common/environment';
import { RunOnceScheduler } from 'vs/base/common/async';
import { MENUBAR_SELECTION_FOREGROUND, MENUBAR_SELECTION_BACKGROUND, MENUBAR_SELECTION_BORDER, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_FOREGROUND, MENU_BACKGROUND, MENU_FOREGROUND, MENU_SELECTION_BACKGROUND, MENU_SELECTION_FOREGROUND, MENU_SELECTION_BORDER } from 'vs/workbench/common/theme';

interface CustomMenu {
title: string;
Expand Down Expand Up @@ -325,6 +324,16 @@ export class MenubarPart extends Part {
this.updateStyles();
}

private onDidChangeWindowFocus(hasFocus: boolean): void {
if (this.container) {
if (hasFocus) {
this.container.removeClass('inactive');
} else {
this.container.addClass('inactive');
}
}
}

private onConfigurationUpdated(event: IConfigurationChangeEvent): void {
if (this.keys.some(key => event.affectsConfiguration(key))) {
this.setupMenubar();
Expand Down Expand Up @@ -405,6 +414,9 @@ export class MenubarPart extends Part {

// Listen for alt key presses
this._register(ModifierKeyEmitter.getInstance().event(this.onModifierKeyToggled, this));

// Listen for window focus changes
this._register(this.windowService.onDidChangeFocus(e => this.onDidChangeWindowFocus(e)));
}
}

Expand Down Expand Up @@ -676,15 +688,11 @@ export class MenubarPart extends Part {
this.cleanupCustomMenu();
this.showCustomMenu(menuIndex);
} else if (this.isFocused && !this.isOpen) {
this.focusedMenu = { index: menuIndex };
this.customMenus[menuIndex].buttonElement.domFocus();
}
});

this.customMenus[menuIndex].buttonElement.on(EventType.MOUSE_LEAVE, () => {
if (!this.isOpen && this.isFocused) {
this.customMenus[menuIndex].buttonElement.domBlur();
}
});
}
}

Expand Down Expand Up @@ -875,25 +883,6 @@ export class MenubarPart extends Part {
};
}

updateStyles(): void {
super.updateStyles();

// Part container
if (this.container) {
const fgColor = this.getColor(TITLE_BAR_ACTIVE_FOREGROUND);
const bgColor = this.getColor(TITLE_BAR_ACTIVE_BACKGROUND);

this.container.style('color', fgColor);
if (browser.isFullscreen()) {
this.container.style('background-color', bgColor);
} else {
this.container.style('background-color', null);
}

toggleClass(this.container.getHTMLElement(), 'light', Color.fromHex(bgColor).isLighter());
}
}

public get onVisibilityChange(): Event<Dimension> {
return this._onVisibilityChange.event;
}
Expand Down Expand Up @@ -970,6 +959,129 @@ export class MenubarPart extends Part {
}
}

registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const menubarActiveWindowFgColor = theme.getColor(TITLE_BAR_ACTIVE_FOREGROUND);
if (menubarActiveWindowFgColor) {
collector.addRule(`
.monaco-workbench > .part.menubar > .menubar-menu-button {
color: ${menubarActiveWindowFgColor};
}
`);
}

const menubarInactiveWindowFgColor = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND);
if (menubarInactiveWindowFgColor) {
collector.addRule(`
.monaco-workbench > .part.menubar.inactive > .menubar-menu-button {
color: ${menubarInactiveWindowFgColor};
}
`);
}


const menubarSelectedFgColor = theme.getColor(MENUBAR_SELECTION_FOREGROUND);
if (menubarSelectedFgColor) {
collector.addRule(`
.monaco-workbench > .part.menubar > .menubar-menu-button.open,
.monaco-workbench > .part.menubar > .menubar-menu-button:focus,
.monaco-workbench > .part.menubar > .menubar-menu-button:hover {
color: ${menubarSelectedFgColor};
}
`);
}

const menubarSelectedBgColor = theme.getColor(MENUBAR_SELECTION_BACKGROUND);
if (menubarSelectedBgColor) {
collector.addRule(`
.monaco-workbench > .part.menubar > .menubar-menu-button.open,
.monaco-workbench > .part.menubar > .menubar-menu-button:focus,
.monaco-workbench > .part.menubar > .menubar-menu-button:hover {
background-color: ${menubarSelectedBgColor};
}
`);
}

const menubarSelectedBorderColor = theme.getColor(MENUBAR_SELECTION_BORDER);
if (menubarSelectedBorderColor) {
collector.addRule(`
.monaco-workbench > .part.menubar > .menubar-menu-button:hover {
outline: dashed 1px;
}

.monaco-workbench > .part.menubar > .menubar-menu-button.open,
.monaco-workbench > .part.menubar > .menubar-menu-button:focus {
outline: solid 1px;
}

.monaco-workbench > .part.menubar > .menubar-menu-button.open,
.monaco-workbench > .part.menubar > .menubar-menu-button:focus,
.monaco-workbench > .part.menubar > .menubar-menu-button:hover {
outline-offset: -1px;
outline-color: ${menubarSelectedBorderColor};
}
`);
}

const menuBgColor = theme.getColor(MENU_BACKGROUND);
if (menuBgColor) {
collector.addRule(`
.monaco-menu .monaco-action-bar.vertical,
.monaco-menu .monaco-action-bar.vertical .action-menu-item {
background-color: ${menuBgColor};
}
`);
}

const menuFgColor = theme.getColor(MENU_FOREGROUND);
if (menuFgColor) {
collector.addRule(`
.monaco-menu .monaco-action-bar.vertical,
.monaco-menu .monaco-action-bar.vertical .action-menu-item {
color: ${menuFgColor};
}
`);
}

const selectedMenuItemBgColor = theme.getColor(MENU_SELECTION_BACKGROUND);
if (menuBgColor) {
collector.addRule(`
.monaco-menu .monaco-action-bar.vertical .action-item.focused > .action-menu-item,
.monaco-menu .monaco-action-bar.vertical .action-menu-item:hover {
background-color: ${selectedMenuItemBgColor};
}
`);
}

const selectedMenuItemFgColor = theme.getColor(MENU_SELECTION_FOREGROUND);
if (selectedMenuItemFgColor) {
collector.addRule(`
.monaco-menu .monaco-action-bar.vertical .action-item.focused > .action-menu-item,
.monaco-menu .monaco-action-bar.vertical .action-menu-item:hover {
color: ${selectedMenuItemFgColor};
}
`);
}

const selectedMenuItemBorderColor = theme.getColor(MENU_SELECTION_BORDER);
if (selectedMenuItemBorderColor) {
collector.addRule(`
.monaco-menu .monaco-action-bar.vertical .action-item.focused > .action-menu-item {
outline: solid 1px;
}

.monaco-menu .monaco-action-bar.vertical .action-menu-item:hover {
outline: dashed 1px;
}

.monaco-menu .monaco-action-bar.vertical .action-item.focused > .action-menu-item,
.monaco-menu .monaco-action-bar.vertical .action-menu-item:hover {
outline-offset: -1px;
outline-color: ${selectedMenuItemBorderColor};
}
`);
}
});

type ModifierKey = 'alt' | 'ctrl' | 'shift';

interface IModifierKeyStatus {
Expand Down
52 changes: 51 additions & 1 deletion src/vs/workbench/common/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/

import * as nls from 'vs/nls';
import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder } from 'vs/platform/theme/common/colorRegistry';
import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, listActiveSelectionForeground, listActiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry';
import { Disposable } from 'vs/base/common/lifecycle';
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
import { Color } from 'vs/base/common/color';
Expand Down Expand Up @@ -388,6 +388,56 @@ export const TITLE_BAR_BORDER = registerColor('titleBar.border', {
hc: contrastBorder
}, nls.localize('titleBarBorder', "Title bar border color. Note that this color is currently only supported on macOS."));

// < --- Menubar --- >

export const MENUBAR_SELECTION_FOREGROUND = registerColor('menubar.selectionForeground', {
dark: TITLE_BAR_ACTIVE_FOREGROUND,
light: TITLE_BAR_ACTIVE_FOREGROUND,
hc: TITLE_BAR_ACTIVE_FOREGROUND
}, nls.localize('menubarSelectionForeground', "Foreground color of the selected menu item in the menubar."));

export const MENUBAR_SELECTION_BACKGROUND = registerColor('menubar.selectionBackground', {
dark: transparent(Color.white, 0.1),
light: transparent(Color.black, 0.1),
hc: null
}, nls.localize('menubarSelectionBackground', "Background color of the selected menu item in the menubar."));

export const MENUBAR_SELECTION_BORDER = registerColor('menubar.selectionBorder', {
dark: null,
light: null,
hc: activeContrastBorder
}, nls.localize('menubarSelectionBorder', "Border color of the selected menu item in the menubar."));

export const MENU_FOREGROUND = registerColor('menu.foreground', {
dark: SIDE_BAR_FOREGROUND,
light: SIDE_BAR_FOREGROUND,
hc: SIDE_BAR_FOREGROUND
}, nls.localize('menuForeground', "Foreground color of menu items."));

export const MENU_BACKGROUND = registerColor('menu.background', {
dark: SIDE_BAR_BACKGROUND,
light: SIDE_BAR_BACKGROUND,
hc: SIDE_BAR_BACKGROUND
}, nls.localize('menuBackground', "Background color of menu items."));

export const MENU_SELECTION_FOREGROUND = registerColor('menu.selectionForeground', {
dark: listActiveSelectionForeground,
light: listActiveSelectionForeground,
hc: listActiveSelectionForeground
}, nls.localize('menuSelectionForeground', "Foreground color of the selected menu item in menus."));

export const MENU_SELECTION_BACKGROUND = registerColor('menu.selectionBackground', {
dark: listActiveSelectionBackground,
light: listActiveSelectionBackground,
hc: listActiveSelectionBackground
}, nls.localize('menuSelectionBackground', "Background color of the selected menu item in menus."));

export const MENU_SELECTION_BORDER = registerColor('menu.selectionBorder', {
dark: null,
light: null,
hc: activeContrastBorder
}, nls.localize('menuSelectionBorder', "Border color of the selected menu item in menus."));

// < --- Notifications --- >

export const NOTIFICATIONS_CENTER_BORDER = registerColor('notificationCenter.border', {
Expand Down