Better action hover feedback (microsoft#120247)

joaomoreno · roblourens · gjsjohnmurray · commit 41c02956bdee · 2021-04-08T23:05:42.000+01:00
* wip: better action hover feedback * address feedback from microsoft#120247 * Prevent settings editor gear button hover from running into the TOC * final fixes Co-authored-by: Rob Lourens <roblourens@gmail.com>
diff --git a/src/vs/base/browser/ui/actionbar/actionbar.css b/src/vs/base/browser/ui/actionbar/actionbar.css
@@ -6,12 +6,14 @@
 .monaco-action-bar {
 	text-align: right;
 	white-space: nowrap;
+	height: 100%;
 }
 
 .monaco-action-bar .actions-container {
 	display: flex;
 	margin: 0 auto;
 	padding: 0;
+	height: 100%;
 	width: 100%;
 	justify-content: flex-end;
 }
@@ -21,18 +23,21 @@
 }
 
 .monaco-action-bar .action-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	cursor: pointer;
-	display: inline-block;
-	transition: transform 50ms ease;
 	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
+	min-width: 24px;
 }
 
-.monaco-action-bar .action-item.disabled {
-	cursor: default;
+.monaco-action-bar:not(.vertical) .action-item {
+	margin-right: 4px;
 }
 
-.monaco-action-bar.animated .action-item.active {
-	transform: scale(1.272019649, 1.272019649); /* 1.272019649 = √φ */
+.monaco-action-bar .action-item.disabled {
+	cursor: default;
+	min-width: 0;
 }
 
 .monaco-action-bar .action-item .icon,
@@ -47,7 +52,8 @@
 
 .monaco-action-bar .action-label {
 	font-size: 11px;
-	margin-right: 4px;
+	padding: 3px;
+	border-radius: 5px;
 }
 
 .monaco-action-bar .action-item.disabled .action-label,
@@ -74,10 +80,6 @@
 	margin-right: .8em;
 }
 
-.monaco-action-bar.animated.vertical .action-item.active {
-	transform: translate(5px, 0);
-}
-
 .secondary-actions .monaco-action-bar .action-label {
 	margin-left: 6px;
 }
diff --git a/src/vs/base/browser/ui/dropdown/dropdown.css b/src/vs/base/browser/ui/dropdown/dropdown.css
@@ -11,6 +11,9 @@
 .monaco-dropdown > .dropdown-label {
 	cursor: pointer;
 	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .monaco-dropdown > .dropdown-label > .action-label.disabled {
diff --git a/src/vs/base/browser/ui/splitview/paneview.css b/src/vs/base/browser/ui/splitview/paneview.css
@@ -52,6 +52,10 @@
 	margin-left: auto;
 }
 
+.monaco-pane-view .pane > .pane-header > .actions .action-label {
+	padding: 2px;
+}
+
 /* TODO: actions should be part of the pane, but they aren't yet */
 .monaco-pane-view .pane:hover > .pane-header.expanded > .actions,
 .monaco-pane-view .pane:focus-within > .pane-header.expanded > .actions,
@@ -60,22 +64,6 @@
 	display: initial;
 }
 
-/* TODO: actions should be part of the pane, but they aren't yet */
-.monaco-pane-view .pane > .pane-header > .actions .action-label.icon,
-.monaco-pane-view .pane > .pane-header > .actions .action-label.codicon {
-	width: 28px;
-	height: 22px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-	margin-right: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: inherit;
-	outline-offset: -2px;
-}
-
 .monaco-pane-view .pane > .pane-header .monaco-action-bar .action-item.select-container {
 	cursor: default;
 }
diff --git a/src/vs/base/browser/ui/toolbar/toolbar.css b/src/vs/base/browser/ui/toolbar/toolbar.css
@@ -3,6 +3,10 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+.monaco-toolbar {
+	height: 100%;
+}
+
 .monaco-toolbar .toolbar-toggle-more {
 	display: inline-block;
 	padding: 0;
diff --git a/src/vs/editor/contrib/peekView/media/peekViewWidget.css b/src/vs/editor/contrib/peekView/media/peekViewWidget.css
@@ -55,23 +55,6 @@
 	height: 100%;
 }
 
-.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar .action-item {
-	margin-left: 4px;
-}
-
-.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar .action-label {
-	width: 16px;
-	height: 100%;
-	margin: 0;
-	line-height: inherit;
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar .action-label.codicon {
-	margin: 0;
-}
-
 .monaco-editor .peekview-widget > .body {
 	border-top: 1px solid;
 	position: relative;
diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.css b/src/vs/platform/actions/browser/menuEntryActionViewItem.css
@@ -3,6 +3,13 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+.monaco-action-bar .action-item.menu-entry .action-label.icon {
+	width: 16px;
+	height: 16px;
+	background-repeat: no-repeat;
+	background-position: 50%;
+}
+
 .monaco-action-bar .action-item.menu-entry .action-label {
 	background-image: var(--menu-entry-icon-light);
 }
diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts
@@ -404,6 +404,12 @@ export const menuSelectionBackground = registerColor('menu.selectionBackground',
 export const menuSelectionBorder = registerColor('menu.selectionBorder', { dark: null, light: null, hc: activeContrastBorder }, nls.localize('menuSelectionBorder', "Border color of the selected menu item in menus."));
 export const menuSeparatorBackground = registerColor('menu.separatorBackground', { dark: '#BBBBBB', light: '#888888', hc: contrastBorder }, nls.localize('menuSeparatorBackground', "Color of a separator menu item in menus."));
 
+/**
+ * Toolbar colors
+ */
+export const toolbarHoverBackground = registerColor('toolbar.hoverBackground', { dark: '#5a5d5e50', light: '#b8b8b850', hc: null }, nls.localize('toolbarHoverBackground', "Toolbar background when hovering over actions using the mouse"));
+export const toolbarActiveBackground = registerColor('toolbar.activeBackground', { dark: lighten(toolbarHoverBackground, 0.1), light: darken(toolbarHoverBackground, 0.1), hc: null }, nls.localize('toolbarActiveBackground', "Toolbar background when holding the mouse over actions"));
+
 /**
  * Snippet placeholder colors
  */
diff --git a/src/vs/workbench/browser/actions/toolbar.contribution.ts b/src/vs/workbench/browser/actions/toolbar.contribution.ts
@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { toolbarActiveBackground, toolbarHoverBackground } from 'vs/platform/theme/common/colorRegistry';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+
+registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+	collector.addRule(`
+		.monaco-action-bar:not(.vertical) .action-label:not(.disabled):hover {
+			background-color: ${theme.getColor(toolbarHoverBackground)};
+		}
+	`);
+
+	collector.addRule(`
+		.monaco-action-bar:not(.vertical) .action-item.active .action-label:not(.disabled),
+		.monaco-action-bar:not(.vertical) .monaco-dropdown.active .action-label:not(.disabled) {
+			background-color: ${theme.getColor(toolbarActiveBackground)};
+		}
+	`);
+});
diff --git a/src/vs/workbench/browser/media/part.css b/src/vs/workbench/browser/media/part.css
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-workbench .part {
-	box-sizing:	border-box;
+	box-sizing: border-box;
 	overflow: hidden;
 }
 
@@ -29,7 +29,7 @@
 .monaco-workbench .part > .title {
 	height: 35px;
 	display: flex;
-	box-sizing:	border-box;
+	box-sizing: border-box;
 	overflow: hidden;
 }
 
@@ -73,9 +73,6 @@
 
 .monaco-workbench .part > .title > .title-actions .action-label {
 	display: block;
-	height: 35px;
-	line-height: 35px;
-	min-width: 28px;
 	background-size: 16px;
 	background-position: center center;
 	background-repeat: no-repeat;
@@ -103,6 +100,10 @@
 }
 
 .monaco-workbench .part > .content > .monaco-progress-container .progress-bit,
-.monaco-workbench .part.editor > .content .monaco-progress-container .progress-bit {
+.monaco-workbench
+	.part.editor
+	> .content
+	.monaco-progress-container
+	.progress-bit {
 	height: 2px;
 }
diff --git a/src/vs/workbench/browser/parts/editor/media/editorgroupview.css b/src/vs/workbench/browser/parts/editor/media/editorgroupview.css
@@ -73,22 +73,13 @@
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar {
 	display: none;
+	height: 35px;
 }
 
 .monaco-workbench .part.editor > .content:not(.empty) .editor-group-container.empty > .editor-group-container-toolbar {
 	display: block;
 }
 
-.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-container-toolbar .action-label {
-	display: block;
-	height: 35px;
-	line-height: 35px;
-	min-width: 28px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-}
-
 /* Editor */
 
 .monaco-workbench .part.editor > .content .editor-group-container.empty > .editor-container  {
diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
@@ -346,13 +346,6 @@
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .action-label {
 	opacity: 0;
-	display: block;
-	height: 16px;
-	width: 16px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-	margin-right: 0.5em;
 }
 
 /* Tab Actions: Off */
diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css
@@ -37,7 +37,7 @@
 
 /* Title Actions */
 
-.monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions .action-label:not(span),
+/* .monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions .action-label:not(span),
 .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-label:not(span) {
 	display: flex;
 	height: 35px;
@@ -66,7 +66,7 @@
 .monaco-workbench .part.editor > .content .editor-group-container > .title .title-actions .action-label.disabled,
 .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-label.disabled {
 	opacity: 0.4;
-}
+} */
 
 /* Drag and Drop */
 
diff --git a/src/vs/workbench/browser/parts/panel/media/panelpart.css b/src/vs/workbench/browser/parts/panel/media/panelpart.css
@@ -144,8 +144,10 @@
 	opacity: 1;
 }
 
-.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item .action-label{
+.monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item .action-label {
 	margin-right: 0;
+	border-radius: 0;
+	background: none !important;
 }
 
 .monaco-workbench .part.panel > .composite.title> .panel-switcher-container > .monaco-action-bar .action-item:last-child {
diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css
@@ -162,25 +162,12 @@
 	display: none;
 }
 
+.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .actions .action-label {
+	padding: 2px;
+}
+
 .customview-tree .monaco-list .monaco-list-row:hover .custom-view-tree-node-item .actions,
 .customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item .actions,
 .customview-tree .monaco-list .monaco-list-row.focused .custom-view-tree-node-item .actions {
 	display: block;
 }
-
-.customview-tree .monaco-list .custom-view-tree-node-item .actions .action-label {
-	width: 16px;
-	height: 100%;
-	background-size: 16px;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-}
-
-.customview-tree .monaco-list .custom-view-tree-node-item .actions .action-label.codicon {
-	line-height: 22px;
-	height: 22px;
-}
-
-.customview-tree .monaco-list .custom-view-tree-node-item .actions .action-label.codicon::before {
-	vertical-align: middle;
-}
diff --git a/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css b/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css
@@ -160,16 +160,6 @@
 	margin-right: 2px;
 }
 
-.monaco-workbench .debug-pane .monaco-action-bar .action-item > .action-label {
-	width: 16px;
-	height: 100%;
-	line-height: 22px;
-	margin-right: 8px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-}
-
 .debug-pane .debug-call-stack .stack-frame {
 	overflow: hidden;
 	text-overflow: ellipsis;
diff --git a/src/vs/workbench/contrib/extensions/browser/media/extension.css b/src/vs/workbench/contrib/extensions/browser/media/extension.css
@@ -181,6 +181,15 @@
 	flex-wrap: wrap-reverse;
 }
 
+.extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .action-item {
+	margin-right: 0;
+}
+
+.extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .action-label {
+	margin-right: 4px;
+	border-radius: 0;
+}
+
 .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action.label {
 	max-width: 150px;
 }
diff --git a/src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css b/src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css
@@ -152,8 +152,15 @@
 	justify-content: flex-start;
 }
 
-.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item .extension-action {
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item {
+	margin-right: 0;
+}
+
+.extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item .extension-action:not(.manage) {
 	margin-top: 0px; /* overrides from extension actions */
+	border-radius: 0;
+	padding-top: 0;
+	padding-bottom: 0;
 }
 
 .extension-editor > .header > .details > .actions > .monaco-action-bar > .actions-container > .action-item > .extension-action,
@@ -239,11 +246,12 @@
 
 .extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item > .action-label {
 	margin-right: 16px;
+	font-size: inherit;
+	opacity: 0.7;
 }
 
 .extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item > .action-label {
-	font-size: inherit;
-	opacity: 0.7;
+	background: none !important;
 }
 
 .extension-editor > .body > .navbar > .monaco-action-bar > .actions-container > .action-item > .action-label.checked {
diff --git a/src/vs/workbench/contrib/files/browser/views/media/openeditors.css b/src/vs/workbench/contrib/files/browser/views/media/openeditors.css
diff --git a/src/vs/workbench/contrib/markers/browser/media/markers.css b/src/vs/workbench/contrib/markers/browser/media/markers.css
diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css
diff --git a/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css
diff --git a/src/vs/workbench/contrib/scm/browser/media/scm.css b/src/vs/workbench/contrib/scm/browser/media/scm.css
diff --git a/src/vs/workbench/contrib/search/browser/media/searchview.css b/src/vs/workbench/contrib/search/browser/media/searchview.css
diff --git a/src/vs/workbench/workbench.common.main.ts b/src/vs/workbench/workbench.common.main.ts

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,9 @@`
`11`	`11`	`.monaco-dropdown > .dropdown-label {`
`12`	`12`	`cursor: pointer;`
`13`	`13`	`height: 100%;`
	`14`	`+ display: flex;`
	`15`	`+ align-items: center;`
	`16`	`+ justify-content: center;`
`14`	`17`	`}`
`15`	`18`
`16`	`19`	`.monaco-dropdown > .dropdown-label > .action-label.disabled {`