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

Update custom menu styles (#149187)

Browse source 
* Initial updates

* Add border radius

* Address PR feedback

* Fix typo

* Update shadow blur

* Update LR padding and use description foreground for shortcuts

* Typo

* Fix separator padding/margin

* fix jumpy items in hc themes

* Fix shadow and border radius

* Use opacity for keybinding for better color blend

* Update min width and container padding T/B

* Revert actionbar margin and remove unnecessary menu css file

* Ensure menus respect 0 horizontal margin rule

* set bg/fg color on menu container

* better fix for jumpy menu items

* use outline instead of border

* clean up dead css in style.css
fix opacity for separators in menus

* bring back vertical action bar margins

* Remove old CSS import

Co-authored-by: SteVen Batten <sbatten@microsoft.com>
This commit is contained in:
David Dossett 2022-05-16 18:40:33 -07:00 committed by GitHub
parent c2b064538b
commit 5f3e9c120a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 33 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extensions/theme-defaults/themes/dark_vs.json
View file

@ -12,7 +12,7 @@
"activityBarBadge.background": "#007ACC",
"sideBarTitle.foreground": "#BBBBBB",
"input.placeholderForeground": "#A6A6A6",
"menu.background": "#252526",
"menu.background": "#303031",
"menu.foreground": "#CCCCCC",
"statusBarItem.remoteForeground": "#FFF",
"statusBarItem.remoteBackground": "#16825D",

58
src/vs/base/browser/ui/menu/menu.ts
View file

@ -287,11 +287,13 @@ export class Menu extends ActionBar {
const fgColor = style.foregroundColor ? `${style.foregroundColor}` : '';
const bgColor = style.backgroundColor ? `${style.backgroundColor}` : '';
const border = style.borderColor ? `1px solid ${style.borderColor}` : '';
const shadow = style.shadowColor ? `0 2px 4px ${style.shadowColor}` : '';
const borderRadius = '5px';
const shadow = style.shadowColor ? `0 2px 8px ${style.shadowColor}` : '';
container.style.border = border;
this.domNode.style.color = fgColor;
this.domNode.style.backgroundColor = bgColor;
container.style.outline = border;
container.style.borderRadius = borderRadius;
container.style.color = fgColor;
container.style.backgroundColor = bgColor;
container.style.boxShadow = shadow;
if (this.viewItems) {
@ -691,20 +693,19 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
const isSelected = this.element && this.element.classList.contains('focused');
const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : undefined;
const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : '';
const outline = isSelected && this.menuStyle.selectionBorderColor ? `1px solid ${this.menuStyle.selectionBorderColor}` : '';
const outlineOffset = isSelected && this.menuStyle.selectionBorderColor ? `-1px` : '';
if (this.item) {
this.item.style.color = fgColor ? fgColor.toString() : '';
this.item.style.backgroundColor = bgColor ? bgColor.toString() : '';
this.item.style.outline = outline;
this.item.style.outlineOffset = outlineOffset;
}
if (this.check) {
this.check.style.color = fgColor ? fgColor.toString() : '';
}
if (this.container) {
this.container.style.border = border;
}
}
style(style: IMenuStyles): void {
@ -1012,7 +1013,8 @@ function getMenuWidgetCSS(style: IMenuStyles, isForShadowDom: boolean): string {
let result = /* css */`
.monaco-menu {
font-size: 13px;
border-radius: 5px;
min-width: 160px;
}
${formatRule(Codicon.menuSelection)}
@ -1087,10 +1089,9 @@ ${formatRule(Codicon.menuSubmenu)}
.monaco-menu .monaco-action-bar.vertical .action-label.separator {
display: block;
border-bottom: 1px solid #bbb;
border-bottom: 1px solid var(--vscode-menu-separatorBackground);
padding-top: 1px;
margin-left: .8em;
margin-right: .8em;
padding: 30px;
}
.monaco-menu .secondary-actions .monaco-action-bar .action-label {
@ -1136,6 +1137,11 @@ ${formatRule(Codicon.menuSubmenu)}
position: relative;
}
.monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .keybinding,
.monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .keybinding {
opacity: unset;
}
.monaco-menu .monaco-action-bar.vertical .action-label {
flex: 1 1 auto;
text-decoration: none;
@ -1191,12 +1197,9 @@ ${formatRule(Codicon.menuSubmenu)}
}
.monaco-menu .monaco-action-bar.vertical .action-label.separator {
padding: 0.5em 0 0 0;
margin-bottom: 0.5em;
width: 100%;
height: 0px !important;
margin-left: .8em !important;
margin-right: .8em !important;
opacity: 1;
}
.monaco-menu .monaco-action-bar.vertical .action-label.separator.text {
@ -1238,17 +1241,15 @@ ${formatRule(Codicon.menuSubmenu)}
outline: 0;
}
.monaco-menu .monaco-action-bar.vertical .action-item {
border: thin solid transparent; /* prevents jumping behaviour on hover or focus */
}
/* High Contrast Theming */
.hc-black .context-view.monaco-menu-container,
.hc-light .context-view.monaco-menu-container,
:host-context(.hc-black) .context-view.monaco-menu-container,
:host-context(.hc-light) .context-view.monaco-menu-container {
box-shadow: none;
}
.hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused,
.hc-light .monaco-menu .monaco-action-bar.vertical .action-item.focused,
:host-context(.hc-black) .monaco-menu .monaco-action-bar.vertical .action-item.focused,
:host-context(.hc-light) .monaco-menu .monaco-action-bar.vertical .action-item.focused {
background: none;
@ -1257,11 +1258,11 @@ ${formatRule(Codicon.menuSubmenu)}
/* Vertical Action Bar Styles */
.monaco-menu .monaco-action-bar.vertical {
padding: .5em 0;
padding: .6em 0;
}
.monaco-menu .monaco-action-bar.vertical .action-menu-item {
height: 1.8em;
height: 2em;
}
.monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
@ -1277,10 +1278,12 @@ ${formatRule(Codicon.menuSubmenu)}
.monaco-menu .monaco-action-bar.vertical .action-label.separator {
font-size: inherit;
padding: 0.2em 0 0 0;
margin-bottom: 0.2em;
margin: 5px 0 !important;
padding: 0;
border-radius: 0;
}
.linux .monaco-menu .monaco-action-bar.vertical .action-label.separator,
:host-context(.linux) .monaco-menu .monaco-action-bar.vertical .action-label.separator {
margin-left: 0;
margin-right: 0;
@ -1291,6 +1294,7 @@ ${formatRule(Codicon.menuSubmenu)}
padding: 0 1.8em;
}
.linux .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
:host-context(.linux) .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
height: 100%;
mask-size: 10px 10px;

9
src/vs/platform/contextview/browser/contextMenuHandler.css
View file

@ -1,9 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.context-view .monaco-menu {
min-width: 130px;
}

1
src/vs/platform/contextview/browser/contextMenuHandler.ts
View file

@ -10,7 +10,6 @@ import { Menu } from 'vs/base/browser/ui/menu/menu';
import { ActionRunner, IRunEvent, WorkbenchActionExecutedClassification, WorkbenchActionExecutedEvent } from 'vs/base/common/actions';
import { isCancellationError } from 'vs/base/common/errors';
import { combinedDisposable, DisposableStore } from 'vs/base/common/lifecycle';
import 'vs/css!./contextMenuHandler';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { INotificationService } from 'vs/platform/notification/common/notification';

2
src/vs/platform/theme/common/colorRegistry.ts
View file

@ -470,7 +470,7 @@ export const menuBackground = registerColor('menu.background', { dark: selectBac
export const menuSelectionForeground = registerColor('menu.selectionForeground', { dark: listActiveSelectionForeground, light: listActiveSelectionForeground, hcDark: listActiveSelectionForeground, hcLight: listActiveSelectionForeground }, nls.localize('menuSelectionForeground', "Foreground color of the selected menu item in menus."));
export const menuSelectionBackground = registerColor('menu.selectionBackground', { dark: listActiveSelectionBackground, light: listActiveSelectionBackground, hcDark: listActiveSelectionBackground, hcLight: listActiveSelectionBackground }, nls.localize('menuSelectionBackground', "Background color of the selected menu item in menus."));
export const menuSelectionBorder = registerColor('menu.selectionBorder', { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('menuSelectionBorder', "Border color of the selected menu item in menus."));
export const menuSeparatorBackground = registerColor('menu.separatorBackground', { dark: '#BBBBBB', light: '#888888', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('menuSeparatorBackground', "Color of a separator menu item in menus."));
export const menuSeparatorBackground = registerColor('menu.separatorBackground', { dark: '#606060', light: '#D4D4D4', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('menuSeparatorBackground', "Color of a separator menu item in menus."));
/**
* Toolbar colors

44
src/vs/workbench/browser/media/style.css
View file

@ -135,50 +135,6 @@ body.web {
-webkit-app-region: no-drag;
}
.monaco-workbench .monaco-menu .monaco-action-bar.vertical {
padding: .5em 0;
}
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .action-menu-item {
height: 1.8em;
}
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .keybinding {
font-size: inherit;
padding: 0 2em;
}
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .menu-item-check {
font-size: inherit;
width: 2em;
}
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .action-label.separator {
font-size: inherit;
padding: 0.2em 0 0 0;
margin-bottom: 0.2em;
}
.monaco-workbench.linux .monaco-menu .monaco-action-bar.vertical .action-label.separator {
margin-left: 0;
margin-right: 0;
}
.monaco-workbench .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
font-size: 60%;
padding: 0 1.8em;
}
.monaco-workbench.linux .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
height: 100%;
mask-size: 10px 10px;
-webkit-mask-size: 10px 10px;
}
.monaco-workbench .monaco-menu .action-item {
cursor: default;
}
.monaco-workbench .codicon[class*='codicon-'] {
font-size: 16px; /* sets font-size for codicons in workbench (https://github.com/microsoft/vscode/issues/98495) */