From 5854f63f43c464dbf27c43a05c66948f6cd6f080 Mon Sep 17 00:00:00 2001 From: Miguel Solorio Date: Thu, 12 Dec 2019 14:42:00 -0800 Subject: [PATCH] Update menu icons to use icon font #86708 --- src/vs/base/browser/ui/menu/check.svg | 3 -- src/vs/base/browser/ui/menu/ellipsis.svg | 5 --- src/vs/base/browser/ui/menu/menu.css | 36 ++++++++++--------- src/vs/base/browser/ui/menu/menu.ts | 8 ++--- src/vs/base/browser/ui/menu/menubar.ts | 2 +- src/vs/base/browser/ui/menu/submenu.svg | 3 -- .../titlebar/media/chrome-close-dark.svg | 1 - .../parts/titlebar/media/chrome-close.svg | 1 - .../titlebar/media/chrome-maximize-dark.svg | 1 - .../parts/titlebar/media/chrome-maximize.svg | 1 - .../titlebar/media/chrome-minimize-dark.svg | 1 - .../parts/titlebar/media/chrome-minimize.svg | 1 - .../titlebar/media/chrome-restore-dark.svg | 1 - .../parts/titlebar/media/chrome-restore.svg | 1 - .../browser/parts/titlebar/menubarControl.ts | 25 +++++-------- 15 files changed, 33 insertions(+), 57 deletions(-) delete mode 100644 src/vs/base/browser/ui/menu/check.svg delete mode 100644 src/vs/base/browser/ui/menu/ellipsis.svg delete mode 100644 src/vs/base/browser/ui/menu/submenu.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-close-dark.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-maximize-dark.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-minimize-dark.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-restore-dark.svg delete mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg diff --git a/src/vs/base/browser/ui/menu/check.svg b/src/vs/base/browser/ui/menu/check.svg deleted file mode 100644 index cea818ef5968a..0000000000000 --- a/src/vs/base/browser/ui/menu/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/menu/ellipsis.svg b/src/vs/base/browser/ui/menu/ellipsis.svg deleted file mode 100644 index 2c52e359f610d..0000000000000 --- a/src/vs/base/browser/ui/menu/ellipsis.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/vs/base/browser/ui/menu/menu.css b/src/vs/base/browser/ui/menu/menu.css index 9c3dde44785d6..560762d88d42e 100644 --- a/src/vs/base/browser/ui/menu/menu.css +++ b/src/vs/base/browser/ui/menu/menu.css @@ -51,8 +51,17 @@ .monaco-menu .monaco-action-bar.vertical .submenu-indicator { height: 100%; - mask: url('submenu.svg') no-repeat 90% 50%/13px 13px; - -webkit-mask: url('submenu.svg') no-repeat 90% 50%/13px 13px; +} + +.monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon { + font-size: 16px; + display: flex; + align-items: center; +} + +.monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon::before { + margin-left: auto; + margin-right: -20px; } .monaco-menu .monaco-action-bar.vertical .action-item.disabled .keybinding, @@ -94,14 +103,15 @@ .monaco-menu .monaco-action-bar.vertical .menu-item-check { position: absolute; visibility: hidden; - mask: url('check.svg') no-repeat 50% 56%/15px 15px; - -webkit-mask: url('check.svg') no-repeat 50% 56%/15px 15px; width: 1em; height: 100%; } .monaco-menu .monaco-action-bar.vertical .action-menu-item.checked .menu-item-check { visibility: visible; + display: flex; + align-items: center; + justify-content: center; } /* Context Menu */ @@ -186,9 +196,6 @@ } .menubar .toolbar-toggle-more { - background-position: center; - background-repeat: no-repeat; - background-size: 14px; width: 20px; height: 100%; } @@ -197,21 +204,18 @@ position: absolute; left: 0px; top: 0px; - background-position: center; - background-repeat: no-repeat; - background-size: 16px; cursor: pointer; width: 100%; + display: flex; + align-items: center; + justify-content: center; } .menubar .toolbar-toggle-more { - display: inline-block; padding: 0; - mask: url('ellipsis.svg') no-repeat 50% 55%/14px 14px; - -webkit-mask: url('ellipsis.svg') no-repeat 50% 55%/14px 14px; + vertical-align: sub; } -.menubar.compact .toolbar-toggle-more { - mask: url('menu.svg') no-repeat 50% 55%/16px 16px; - -webkit-mask: url('menu.svg') no-repeat 50% 55%/16px 16px; +.menubar.compact .toolbar-toggle-more::before { + content: "\eb94" !important; } diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index cec02ea3959dd..0eb32b5c133f7 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -422,7 +422,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem { } } - this.check = append(this.item, $('span.menu-item-check')); + this.check = append(this.item, $('span.menu-item-check.codicon.codicon-check')); this.check.setAttribute('role', 'none'); this.label = append(this.item, $('span.action-label')); @@ -602,7 +602,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem { } if (this.check) { - this.check.style.backgroundColor = fgColor ? `${fgColor}` : ''; + this.check.style.color = fgColor ? `${fgColor}` : ''; } if (this.container) { @@ -662,7 +662,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem { addClass(this.item, 'monaco-submenu-item'); this.item.setAttribute('aria-haspopup', 'true'); this.updateAriaExpanded('false'); - this.submenuIndicator = append(this.item, $('span.submenu-indicator')); + this.submenuIndicator = append(this.item, $('span.submenu-indicator.codicon.codicon-chevron-right')); this.submenuIndicator.setAttribute('aria-hidden', 'true'); } @@ -822,7 +822,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem { const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor; if (this.submenuIndicator) { - this.submenuIndicator.style.backgroundColor = fgColor ? `${fgColor}` : ''; + this.submenuIndicator.style.color = fgColor ? `${fgColor}` : ''; } if (this.parentData.submenu) { diff --git a/src/vs/base/browser/ui/menu/menubar.ts b/src/vs/base/browser/ui/menu/menubar.ts index 925ebc3a53b94..76132a680e6df 100644 --- a/src/vs/base/browser/ui/menu/menubar.ts +++ b/src/vs/base/browser/ui/menu/menubar.ts @@ -310,7 +310,7 @@ export class MenuBar extends Disposable { createOverflowMenu(): void { const label = this.options.compactMode !== undefined ? nls.localize('mAppMenu', 'Application Menu') : nls.localize('mMore', "..."); const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': -1, 'aria-label': label, 'title': label, 'aria-haspopup': true }); - const titleElement = $('div.menubar-menu-title.toolbar-toggle-more', { 'role': 'none', 'aria-hidden': true }); + const titleElement = $('div.menubar-menu-title.toolbar-toggle-more.codicon.codicon-more', { 'role': 'none', 'aria-hidden': true }); buttonElement.appendChild(titleElement); this.container.appendChild(buttonElement); diff --git a/src/vs/base/browser/ui/menu/submenu.svg b/src/vs/base/browser/ui/menu/submenu.svg deleted file mode 100644 index 98a0aa5924add..0000000000000 --- a/src/vs/base/browser/ui/menu/submenu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-close-dark.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-close-dark.svg deleted file mode 100644 index bb243036bb574..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-close-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg deleted file mode 100644 index 7abec27cd9767..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize-dark.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize-dark.svg deleted file mode 100644 index b6645e8c82945..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg deleted file mode 100644 index 781322be05f43..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize-dark.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize-dark.svg deleted file mode 100644 index 1f6a7016f8512..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg deleted file mode 100644 index 80ecf45c9abdc..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-restore-dark.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-restore-dark.svg deleted file mode 100644 index d9f814370b0f6..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-restore-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg deleted file mode 100644 index 3ab78151c1794..0000000000000 --- a/src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts index 4372732ae9077..41c101f4322a8 100644 --- a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts +++ b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts @@ -333,7 +333,7 @@ export class CustomMenubarControl extends MenubarControl { } .monaco-workbench .menubar .toolbar-toggle-more { - background-color: ${menubarActiveWindowFgColor} + color: ${menubarActiveWindowFgColor} } `); } @@ -346,7 +346,7 @@ export class CustomMenubarControl extends MenubarControl { } .monaco-workbench .menubar.compact .toolbar-toggle-more { - background-color: ${activityBarInactiveFgColor} + color: ${activityBarInactiveFgColor} } `); @@ -357,14 +357,11 @@ export class CustomMenubarControl extends MenubarControl { collector.addRule(` .monaco-workbench .menubar.compact > .menubar-menu-button.open, .monaco-workbench .menubar.compact > .menubar-menu-button:focus, - .monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover { - color: ${activityBarFgColor}; - } - + .monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover, .monaco-workbench .menubar.compact > .menubar-menu-button.open .toolbar-toggle-more, .monaco-workbench .menubar.compact > .menubar-menu-button:focus .toolbar-toggle-more, .monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover .toolbar-toggle-more { - background-color: ${activityBarFgColor} + color: ${activityBarFgColor}; } `); } @@ -372,13 +369,10 @@ export class CustomMenubarControl extends MenubarControl { const menubarInactiveWindowFgColor = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND); if (menubarInactiveWindowFgColor) { collector.addRule(` - .monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button { + .monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button, + .monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button .toolbar-toggle-more { color: ${menubarInactiveWindowFgColor}; } - - .monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button .toolbar-toggle-more { - background-color: ${menubarInactiveWindowFgColor} - } `); } @@ -388,14 +382,11 @@ export class CustomMenubarControl extends MenubarControl { collector.addRule(` .monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open, .monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus, - .monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover { - color: ${menubarSelectedFgColor}; - } - + .monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover, .monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open .toolbar-toggle-more, .monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus .toolbar-toggle-more, .monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover .toolbar-toggle-more { - background-color: ${menubarSelectedFgColor} + color: ${menubarSelectedFgColor}; } `); }