From 86cd0003fe65ed660bfde4b8ec61d335461c4908 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Thu, 4 May 2023 15:23:22 -0700 Subject: [PATCH] add required indicator (#22971) --- src/sql/base/browser/ui/label/label.ts | 8 ++++++++ src/sql/base/browser/ui/label/media/label.css | 10 ++++++++++ .../browser/modelComponents/text.component.ts | 18 ++++++++++++------ .../serverGroup/browser/serverGroupDialog.ts | 6 ++++-- 4 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 src/sql/base/browser/ui/label/label.ts create mode 100644 src/sql/base/browser/ui/label/media/label.css diff --git a/src/sql/base/browser/ui/label/label.ts b/src/sql/base/browser/ui/label/label.ts new file mode 100644 index 0000000000..a8fb3c3859 --- /dev/null +++ b/src/sql/base/browser/ui/label/label.ts @@ -0,0 +1,8 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import 'vs/css!./media/label'; + +export const RequiredIndicatorClassName = 'required-indicator'; diff --git a/src/sql/base/browser/ui/label/media/label.css b/src/sql/base/browser/ui/label/media/label.css new file mode 100644 index 0000000000..4d8ec4c686 --- /dev/null +++ b/src/sql/base/browser/ui/label/media/label.css @@ -0,0 +1,10 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.required-indicator:after { + content: '*'; + color: red; + margin-left: 2px; +} diff --git a/src/sql/workbench/browser/modelComponents/text.component.ts b/src/sql/workbench/browser/modelComponents/text.component.ts index 17798e25ca..e19a449fb7 100644 --- a/src/sql/workbench/browser/modelComponents/text.component.ts +++ b/src/sql/workbench/browser/modelComponents/text.component.ts @@ -21,6 +21,7 @@ import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/ import { errorForeground } from 'vs/platform/theme/common/colorRegistry'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; +import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label'; export enum TextType { Normal = 'Normal', @@ -50,7 +51,6 @@ const errorTextClass = 'error-text';

- * @@ -160,7 +160,13 @@ export default class TextComponent extends TitledComponentthis.textContainer.nativeElement)); + const textContainerElement = this.textContainer.nativeElement; + DOM.clearNode((textContainerElement)); + if (this.requiredIndicator) { + textContainerElement.classList.add(RequiredIndicatorClassName); + } else { + textContainerElement.classList.remove(RequiredIndicatorClassName); + } const links = this.getPropertyOrDefault((props) => props.links, []); // The text may contain link placeholders so go through and create those and insert them as needed now let text = this.value; @@ -177,13 +183,13 @@ export default class TextComponent extends TitledComponentthis.textContainer.nativeElement).appendChild(textElement); + textContainerElement.appendChild(textElement); } // Now insert the link element const link = links[i]; const linkElement = this._register(this.instantiationService.createInstance(Link, - (this.textContainer.nativeElement), { + textContainerElement, { label: link.text, href: link.url }, undefined)); @@ -195,7 +201,7 @@ export default class TextComponent extends TitledComponentthis.textContainer.nativeElement).appendChild(linkElement.el); + textContainerElement.appendChild(linkElement.el); // And finally update the text to remove the text up through the placeholder we just added text = text.slice(placeholderIndex + 3); @@ -205,7 +211,7 @@ export default class TextComponent extends TitledComponentthis.textContainer.nativeElement).appendChild(textElement); + textContainerElement.appendChild(textElement); } } diff --git a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts index c615de1a4a..aa53d8f21e 100644 --- a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts +++ b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts @@ -30,6 +30,7 @@ import { attachModalDialogStyler } from 'sql/workbench/common/styler'; import { assertIsDefined, isUndefinedOrNull } from 'vs/base/common/types'; import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration'; +import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label'; interface IRenderedServerGroupDialog { groupNameInputBox: InputBox; @@ -96,13 +97,14 @@ export class ServerGroupDialog extends Modal { // Connection Group Name const serverGroupNameLabel = localize('connectionGroupName', "Server group name"); - DOM.append(body, DOM.$('.dialog-label')).innerText = serverGroupNameLabel; + DOM.append(body, DOM.$(`.dialog-label.${RequiredIndicatorClassName}`)).innerText = serverGroupNameLabel; this._groupNameInputBox = new InputBox(DOM.append(body, DOM.$('.input-divider')), this._contextViewService, { validationOptions: { validation: (value: string) => !value && !this._skipGroupNameValidation ? ({ type: MessageType.ERROR, content: localize('MissingGroupNameError', "Group name is required.") }) : null }, - ariaLabel: serverGroupNameLabel + ariaLabel: serverGroupNameLabel, + required: true }); // Connection Group Description