add required indicator (#22971)

This commit is contained in:
Alan Ren
2023-05-04 15:23:22 -07:00
committed by GitHub
parent 94745a69f5
commit 86cd0003fe
4 changed files with 34 additions and 8 deletions

View File

@@ -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';
<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [attr.aria-live]="ariaLive"></p>
<div #textContainer id="textContainer"></div>
<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img" (mouseenter)="showTooltip($event)" (focus)="showTooltip($event)" (keydown)="onDescriptionKeyDown($event)">
<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
</div>
@@ -160,7 +160,13 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
if (typeof this.value !== 'string') {
return;
}
DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
const textContainerElement = <HTMLElement>this.textContainer.nativeElement;
DOM.clearNode((textContainerElement));
if (this.requiredIndicator) {
textContainerElement.classList.add(RequiredIndicatorClassName);
} else {
textContainerElement.classList.remove(RequiredIndicatorClassName);
}
const links = this.getPropertyOrDefault<azdata.LinkArea[]>((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 TitledComponent<azdata.TextComponentP
if (curText && typeof text === 'string') {
const textElement = this.createTextElement();
textElement.innerText = text.slice(0, placeholderIndex);
(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
textContainerElement.appendChild(textElement);
}
// Now insert the link element
const link = links[i];
const linkElement = this._register(this.instantiationService.createInstance(Link,
(<HTMLElement>this.textContainer.nativeElement), {
textContainerElement, {
label: link.text,
href: link.url
}, undefined));
@@ -195,7 +201,7 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
}
}
(<HTMLElement>this.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 TitledComponent<azdata.TextComponentP
if (text && typeof text === 'string') {
const textElement = this.createTextElement();
textElement.innerText = text;
(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
textContainerElement.appendChild(textElement);
}
}

View File

@@ -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