From dbbbafc204c7e807bef9724e9dcf8e33b2ddcf98 Mon Sep 17 00:00:00 2001
From: SteVen Batten <6561887+sbatten@users.noreply.github.com>
Date: Mon, 13 Aug 2018 14:43:51 -0700
Subject: [PATCH] Sbatten/check menu items (#56179)

* fixes #52929

* add high contrast default

* fix theming for selected item
---
 src/vs/base/browser/ui/menu/check.svg          |  1 +
 src/vs/base/browser/ui/menu/menu.css           | 18 ++++++++++++++++--
 src/vs/base/browser/ui/menu/menu.ts            |  6 ++++--
 .../browser/parts/titlebar/menubarControl.ts   |  8 ++++++++
 .../workbench/electron-browser/media/shell.css |  7 ++++++-
 5 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 src/vs/base/browser/ui/menu/check.svg

diff --git a/src/vs/base/browser/ui/menu/check.svg b/src/vs/base/browser/ui/menu/check.svg
new file mode 100644
index 00000000000..3f365c4800e
--- /dev/null
+++ b/src/vs/base/browser/ui/menu/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-2 -2 16 16" enable-background="new -2 -2 16 16"><polygon fill="#424242" points="9,0 4.5,9 3,6 0,6 3,12 6,12 12,0"/></svg>
\ No newline at end of file
diff --git a/src/vs/base/browser/ui/menu/menu.css b/src/vs/base/browser/ui/menu/menu.css
index 4f0c0152caa..bea8dd19777 100644
--- a/src/vs/base/browser/ui/menu/menu.css
+++ b/src/vs/base/browser/ui/menu/menu.css
@@ -97,8 +97,18 @@
 	color: inherit;
 }
 
-.monaco-menu .monaco-action-bar.vertical .action-label.checked:after {
-	content: '  \2713';
+.monaco-menu .monaco-action-bar.vertical .menu-item-check {
+	position: absolute;
+	visibility: hidden;
+	background-color: #646465;
+	-webkit-mask: url('check.svg') no-repeat 50% 56%/15px 15px;
+	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;
 }
 
 /* Context Menu */
@@ -149,4 +159,8 @@
 .hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 	background: none;
 	border: 1px dotted #f38518;
+}
+
+.hc-black .monaco-menu .monaco-action-bar.vertical .menu-item-check {
+	background-color: white;
 }
\ No newline at end of file
diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts
index 3a79019d4f1..4c94cfabb47 100644
--- a/src/vs/base/browser/ui/menu/menu.ts
+++ b/src/vs/base/browser/ui/menu/menu.ts
@@ -117,6 +117,7 @@ class MenuActionItem extends BaseActionItem {
 
 	protected $e: Builder;
 	protected $label: Builder;
+	protected $check: Builder;
 	protected options: IActionItemOptions;
 	private cssClass: string;
 
@@ -141,6 +142,7 @@ class MenuActionItem extends BaseActionItem {
 			this.$e.attr({ role: 'menuitem' });
 		}
 
+		this.$check = $('span.menu-item-check').appendTo(this.$e);
 		this.$label = $('span.action-label').appendTo(this.$e);
 
 		if (this.options.label && this.options.keybinding) {
@@ -231,9 +233,9 @@ class MenuActionItem extends BaseActionItem {
 
 	public _updateChecked(): void {
 		if (this.getAction().checked) {
-			this.$label.addClass('checked');
+			this.$e.addClass('checked');
 		} else {
-			this.$label.removeClass('checked');
+			this.$e.removeClass('checked');
 		}
 	}
 }
diff --git a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts
index 304663e4a11..30c0ef9630a 100644
--- a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts
+++ b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts
@@ -1119,6 +1119,10 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item {
 				color: ${menuFgColor};
 			}
+
+			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item .menu-item-check {
+				background-color: ${menuFgColor};
+			}
 		`);
 	}
 
@@ -1137,6 +1141,10 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 				color: ${selectedMenuItemFgColor};
 			}
+
+		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused .action-menu-item .menu-item-check {
+			background-color: ${selectedMenuItemFgColor};
+		}
 		`);
 	}
 
diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css
index 05267d25b87..1ce2598e143 100644
--- a/src/vs/workbench/electron-browser/media/shell.css
+++ b/src/vs/workbench/electron-browser/media/shell.css
@@ -81,7 +81,12 @@
 .monaco-shell .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
 .monaco-shell .monaco-menu .monaco-action-bar.vertical .keybinding {
 	font-size: inherit;
-	padding: 0 1.5em;
+	padding: 0 2em;
+}
+
+.monaco-shell .monaco-menu .monaco-action-bar.vertical .menu-item-check {
+	font-size: inherit;
+	width: 2em;
 }
 
 .monaco-shell .monaco-menu .monaco-action-bar.vertical .action-label.separator {
-- 
GitLab