add link area support for text component (#4103)

* add link area support for text component

* add comment for localizable resources

* address comments
This commit is contained in:
Alan Ren
2019-02-22 12:53:09 -08:00
committed by GitHub
parent 636bdbd12c
commit 046dee7389
4 changed files with 38 additions and 11 deletions

View File

@@ -32,15 +32,26 @@ export class SettingsPage extends WizardPageBase<CreateClusterModel> {
let dockerSettingsGroup = view.modelBuilder.groupContainer().withItems([]).withLayout({ header: localize('bdc-create.DockerSettingsText', 'Docker Settings'), collapsible: true }).component();
let acceptEulaCheckbox = view.modelBuilder.checkBox().component();
acceptEulaCheckbox.label = localize('bdc-create.AcceptEulaText', 'I accept the SQL Server EULA');
acceptEulaCheckbox.checked = false;
let eulaHyperlink = view.modelBuilder.hyperlink().withProperties({
label: localize('bdc-create.ViewEulaText', 'View Eula'),
let eulaLink: sqlops.LinkArea = {
text: localize('bdc-create.LicenseAgreementText', 'License Agreement'),
url: 'https://docs.microsoft.com/en-us/sql/getting-started/about-the-sql-server-license-terms?view=sql-server-2014'
};
let privacyPolicyLink: sqlops.LinkArea = {
text: localize('bdc-create.PrivacyPolicyText', 'Privacy Policy'),
url: 'https://privacy.microsoft.com/en-us/privacystatement'
};
let checkboxText = view.modelBuilder.text().withProperties<sqlops.TextComponentProperties>({
value: localize({
key: 'bdc-create.AcceptTermsText',
comment: ['{0} is the place holder for License Agreement, {1} is the place holder for Privacy Policy']
}, 'I accept the {0} and {1}.'),
links: [eulaLink, privacyPolicyLink]
}).component();
let eulaContainer = this.createRow(view, [acceptEulaCheckbox, eulaHyperlink]);
let eulaContainer = this.createRow(view, [acceptEulaCheckbox, checkboxText]);
let form = formBuilder.withFormItems([
{
@@ -71,6 +82,6 @@ export class SettingsPage extends WizardPageBase<CreateClusterModel> {
}
private createRow(view: sqlops.ModelView, items: sqlops.Component[]): sqlops.FlexContainer {
return view.modelBuilder.flexContainer().withItems(items, { CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'baseline' }).component();
return view.modelBuilder.flexContainer().withItems(items, { CSSStyles: { 'margin-right': '5px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
}
}