support codicons in welcome view buttons

joaomoreno · joaomoreno · commit b005f534a60e · 2020-04-23T14:54:27.000+02:00
diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css
@@ -5,12 +5,14 @@
 
 .monaco-text-button {
 	box-sizing: border-box;
-	display: inline-block;
+	display: flex;
 	width: 100%;
 	padding: 4px;
 	text-align: center;
 	cursor: pointer;
 	outline-offset: 2px !important;
+	justify-content: center;
+	align-items: center;
 }
 
 .monaco-text-button:hover {
@@ -21,3 +23,7 @@
 	opacity: 0.4;
 	cursor: default;
 }
+
+.monaco-button > .codicon {
+	margin: 0 0.2em;
+}
diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts
@@ -12,9 +12,12 @@ import { mixin } from 'vs/base/common/objects';
 import { Event as BaseEvent, Emitter } from 'vs/base/common/event';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { Gesture, EventType } from 'vs/base/browser/touch';
+import { renderCodicons } from 'vs/base/common/codicons';
+import { escape } from 'vs/base/common/strings';
 
 export interface IButtonOptions extends IButtonStyles {
-	title?: boolean | string;
+	readonly title?: boolean | string;
+	readonly supportCodicons?: boolean;
 }
 
 export interface IButtonStyles {
@@ -149,7 +152,11 @@ export class Button extends Disposable {
 		if (!DOM.hasClass(this._element, 'monaco-text-button')) {
 			DOM.addClass(this._element, 'monaco-text-button');
 		}
-		this._element.textContent = value;
+		if (this.options.supportCodicons) {
+			this._element.innerHTML = renderCodicons(escape(value));
+		} else {
+			this._element.textContent = value;
+		}
 		if (typeof this.options.title === 'string') {
 			this._element.title = this.options.title;
 		} else if (this.options.title) {
diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css
@@ -66,7 +66,6 @@
 	max-width: 260px;
 	margin-left: auto;
 	margin-right: auto;
-	display: block;
 }
 
 .monaco-workbench .pane > .pane-body .welcome-view-content {
diff --git a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts
@@ -458,7 +458,7 @@ export abstract class ViewPane extends Pane implements IView {
 
 				if (linkedText.nodes.length === 1 && typeof linkedText.nodes[0] !== 'string') {
 					const node = linkedText.nodes[0];
-					const button = new Button(this.viewWelcomeContainer, { title: node.title });
+					const button = new Button(this.viewWelcomeContainer, { title: node.title, supportCodicons: true });
 					button.label = node.label;
 					button.onDidClick(_ => {
 						this.telemetryService.publicLog2<{ viewId: string, uri: string }, WelcomeActionClassification>('views.welcomeAction', { viewId: this.id, uri: node.href });

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,6 @@`
`66`	`66`	`max-width: 260px;`
`67`	`67`	`margin-left: auto;`
`68`	`68`	`margin-right: auto;`
`69`		`- display: block;`
`70`	`69`	`}`
`71`	`70`
`72`	`71`	`.monaco-workbench .pane > .pane-body .welcome-view-content {`