ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enable information tip buttons so they can be focused on (#16496)

Browse Source 
* Enable buttons so they can be focused

* Test

* Add text description

* Add description to parameters info
This commit is contained in:
nasc17
2021-07-30 14:28:39 -07:00
committed by GitHub
parent 47151435e7
commit 8a67f87090
2 changed files with 3 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts
View File

@@ -480,22 +480,13 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
const keyComponent = this.modelView.modelBuilder.text().withProps({ const keyComponent = this.modelView.modelBuilder.text().withProps({
value: loc.workerNodeCount, value: loc.workerNodeCount,
requiredIndicator: true, requiredIndicator: true,
description: loc.workerNodesInformation,
CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' } CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
}).component(); }).component();
const keyContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component(); const keyContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
keyContainer.addItem(keyComponent, { CSSStyles: { 'margin-right': '0px', 'margin-bottom': '15px' } }); keyContainer.addItem(keyComponent, { CSSStyles: { 'margin-right': '0px', 'margin-bottom': '15px' } });
const information = this.modelView.modelBuilder.button().withProps({
iconPath: IconPathHelper.information,
title: loc.workerNodesInformation,
ariaLabel: loc.workerNodesInformation,
width: '15px',
height: '15px',
enabled: false
}).component();
keyContainer.addItem(information, { CSSStyles: { 'margin-left': '5px', 'margin-bottom': '15px' } });
flexContainer.addItem(keyContainer, keyFlex); flexContainer.addItem(keyContainer, keyFlex);
const inputContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component(); const inputContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
@@ -578,22 +569,13 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
const titleComponent = this.modelView.modelBuilder.text().withProps({ const titleComponent = this.modelView.modelBuilder.text().withProps({
value: title, value: title,
description: description,
CSSStyles: { ...cssStyles.title, 'font-weight': 'bold', 'margin-block-start': '0px', 'margin-block-end': '0px' } CSSStyles: { ...cssStyles.title, 'font-weight': 'bold', 'margin-block-start': '0px', 'margin-block-end': '0px' }
}).component(); }).component();
const titleContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component(); const titleContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
titleContainer.addItem(titleComponent, { CSSStyles: { 'margin-right': '0px', 'margin-bottom': '15px' } }); titleContainer.addItem(titleComponent, { CSSStyles: { 'margin-right': '0px', 'margin-bottom': '15px' } });
const information = this.modelView.modelBuilder.button().withProps({
iconPath: IconPathHelper.information,
title: description,
ariaLabel: description,
width: '15px',
height: '15px',
enabled: false
}).component();
titleContainer.addItem(information, { CSSStyles: { 'margin-left': '5px', 'margin-bottom': '15px' } });
flexContainer.addItem(titleContainer, titleFlex); flexContainer.addItem(titleContainer, titleFlex);
let configurationSection = this.modelView.modelBuilder.divContainer().component(); let configurationSection = this.modelView.modelBuilder.divContainer().component();

3
extensions/arc/src/ui/dashboards/postgres/postgresParameters.ts
View File

@@ -551,8 +551,7 @@ export abstract class PostgresParametersPage extends DashboardPage {
iconPath: IconPathHelper.information, iconPath: IconPathHelper.information,
width: '15px', width: '15px',
height: '15px', height: '15px',
enabled: false, description: loc.rangeSetting(engineSetting.min!, engineSetting.max!)
title: loc.rangeSetting(engineSetting.min!, engineSetting.max!)
}).component(); }).component();
return { return {