ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

show server group color name (#20271)

Browse Source
This commit is contained in:
Alan Ren
2022-08-08 17:06:13 -07:00
committed by GitHub
parent 57ef5721a3
commit 973c1c2437
4 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/sql/base/browser/ui/colorbox/colorbox.ts
View File

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

11
src/sql/base/browser/ui/colorbox/media/colorbox.css
View File

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

5
src/sql/workbench/services/serverGroup/browser/media/serverGroupDialog.css
View File

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

13
src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
View File

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