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;
+}

src/sql/workbench/services/serverGroup/browser/media/serverGroupDialog.css

@@ -9,11 +9,10 @@
 }
 
 .group-color-options .server-group-color {
-	flex: 1 1 auto;
 	height: 20px;
-	margin: 5px;
+	margin: 0px;
 }
 
 .server-group-dialog {
 	padding: 15px
-}
+}

src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts

@@ -190,24 +190,25 @@ export class ServerGroupDialog extends Modal {
 		for (let i = 0; i < this.withViewModel.colors.length; i++) {
 			const color = this.withViewModel.colors[i];
 
-			const colorColorBox = new Colorbox(container, {
+			const colorBox = new Colorbox(container, {
 				name: 'server-group-color',
 				class: ['server-group-color'],
-				label: localize('serverGroup.colorValue', "Color: {0}", color),
+				label: localize('serverGroup.colorValue', "Group Color: {0}", color),
+				colorName: color
 			});
 
-			this._register(colorColorBox.onSelect((viaKeyboard) => {
+			this._register(colorBox.onSelect((viaKeyboard) => {
 				this.onSelectGroupColor(color);
 			}));
-			colorColorBox.style({
+			colorBox.style({
 				backgroundColor: Color.fromHex(color)
 			});
 
 			// Theme styler
-			this._register(attachCheckboxStyler(colorColorBox, this._themeService));
+			this._register(attachCheckboxStyler(colorBox, this._themeService));
 
 			// add the new colorbox to the color map
-			this._colorColorBoxesMap[i] = { color, colorbox: colorColorBox };
+			this._colorColorBoxesMap[i] = { color, colorbox: colorBox };
 		}
 	}