mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-19 01:25:36 -05:00
add required indicator (#22971)
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user