show server group color name (#20271)

src/sql/base/browser/ui/colorbox/colorbox.ts

@@ -7,11 +7,13 @@ import 'vs/css!./media/colorbox';
 import { Color } from 'vs/base/common/color';
 import { Event, Emitter } from 'vs/base/common/event';
 import { Widget } from 'vs/base/browser/ui/widget';
+import * as DOM from 'vs/base/browser/dom';
 
 export interface ColorboxOptions {
 	name: string;
 	class?: string[];
-	label?: string;
+	label: string;
+	colorName: string;
 }
 
 export interface ColorboxStyle {
@@ -20,6 +22,7 @@ export interface ColorboxStyle {
 
 export class Colorbox extends Widget {
 	readonly domNode: HTMLInputElement;
+	private labelNode: HTMLLabelElement;
 	private backgroundColor?: Color;
 
 	private _onSelect = new Emitter<void>();
@@ -29,22 +32,26 @@ export class Colorbox extends Widget {
 
 	constructor(container: HTMLElement, opts: ColorboxOptions) {
 		super();
-
-		this.domNode = document.createElement('input');
+		const colorboxContainer = DOM.$('.colorbox-container');
+		this.domNode = DOM.$('input');
 		this.domNode.type = 'radio';
 		this.domNode.name = opts.name;
+		this.domNode.id = opts.colorName;
 		this._checked = false;
 
 		this.domNode.classList.add('colorbox');
 		if (opts.class) {
 			this.domNode.classList.add(...opts.class);
 		}
-		if (opts.label) {
-			this.domNode.setAttribute('aria-label', opts.label);
-			this.domNode.title = opts.label;
-		}
+		this.domNode.setAttribute('aria-label', opts.label);
+		this.labelNode = DOM.$('label.colorbox-label');
+		this.labelNode.setAttribute('for', opts.colorName);
+		this.labelNode.innerText = opts.colorName;
 
-		container.appendChild(this.domNode);
+		colorboxContainer.appendChild(this.domNode);
+		colorboxContainer.appendChild(this.labelNode);
+
+		container.appendChild(colorboxContainer);
 
 		this.onfocus(this.domNode, () => {
 			this._onSelect.fire();

src/sql/base/browser/ui/colorbox/media/colorbox.css

@@ -7,8 +7,19 @@
 	cursor: pointer;
 	-webkit-appearance: none;
 	opacity: 0.3;
+	width: 100%;
 }
 
 .colorbox.checked {
 	opacity: 1;
 }
+
+.colorbox-container {
+	margin: 5px;
+	text-align: center;
+	flex: 1 1 auto;
+}
+
+.colorbox-label {
+	user-select: text;
+}