diff --git a/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts b/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts index dff73ce523..822443c472 100644 --- a/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts +++ b/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts @@ -453,9 +453,10 @@ export class SqlDatabaseTree { const impactedObjectsTitle = this._view.modelBuilder.text().withProps({ value: constants.IMPACTED_OBJECTS, CSSStyles: { - 'font-size': '14px', + 'font-size': '13px', 'width': '280px', - 'margin': '10px 0px 0px 0px' + 'margin': '10px 0px 0px 0px', + 'font-weight': 'bold' } }).component(); @@ -513,35 +514,30 @@ export class SqlDatabaseTree { CSSStyles: { 'font-size': '13px', 'line-size': '18px', - 'margin': '12px 0px 0px 0px' + 'margin': '12px 0px 0px 0px', + 'font-weight': 'bold' } }).component(); - + const objectDescriptionStyle = { + 'font-size': '12px', + 'line-size': '18px', + 'margin': '5px 0px 0px 0px', + 'text-align': 'justify', + 'word-wrap': 'break-word' + }; this._objectDetailsType = this._view.modelBuilder.text().withProps({ value: constants.TYPES_LABEL, - CSSStyles: { - 'font-size': '13px', - 'line-size': '18px', - 'margin': '5px 0px 0px 0px' - } + CSSStyles: objectDescriptionStyle }).component(); this._objectDetailsName = this._view.modelBuilder.text().withProps({ value: constants.NAMES_LABEL, - CSSStyles: { - 'font-size': '13px', - 'line-size': '18px', - 'margin': '5px 0px 0px 0px' - } + CSSStyles: objectDescriptionStyle }).component(); this._objectDetailsSample = this._view.modelBuilder.text().withProps({ value: '', - CSSStyles: { - 'font-size': '13px', - 'line-size': '18px', - 'margin': '5px 0px 0px 0px' - } + CSSStyles: objectDescriptionStyle }).component(); const container = this._view.modelBuilder.flexContainer().withItems([impactedObjectsTitle, this._impactedObjectsTable, objectDetailsTitle, this._objectDetailsType, this._objectDetailsName, this._objectDetailsSample]).withLayout({ @@ -552,53 +548,42 @@ export class SqlDatabaseTree { } private createDescription(): azdata.FlexContainer { + const labelStyle = { + 'font-size': '13px', + 'width': '200px', + 'font-weight': 'bold', + 'margin': '10px 35px 0px 0px' + }; + const textStyle = { + 'font-size': '12px', + 'width': '200px', + 'margin': '3px 35px 0px 0px', + 'text-align': 'justify', + 'word-wrap': 'break-word' + }; const descriptionTitle = this._view.modelBuilder.text().withProps({ value: constants.DESCRIPTION, - CSSStyles: { - 'font-size': '14px', - 'width': '200px', - 'margin': '10px 35px 0px 0px' - } + CSSStyles: labelStyle }).component(); this._descriptionText = this._view.modelBuilder.text().withProps({ - CSSStyles: { - 'font-size': '12px', - 'width': '200px', - 'margin': '3px 35px 0px 0px' - } + CSSStyles: textStyle }).component(); const recommendationTitle = this._view.modelBuilder.text().withProps({ value: constants.RECOMMENDATION, - CSSStyles: { - 'font-size': '14px', - 'width': '200px', - 'margin': '12px 35px 0px 0px' - } + CSSStyles: labelStyle }).component(); this._recommendationText = this._view.modelBuilder.text().withProps({ - CSSStyles: { - 'font-size': '12px', - 'width': '200px', - 'margin': '3px 35px 0px 0px' - } + CSSStyles: textStyle }).component(); const moreInfo = this._view.modelBuilder.text().withProps({ value: constants.MORE_INFO, - CSSStyles: { - 'font-size': '14px', - 'width': '200px', - 'margin': '15px 35px 0px 0px' - } + CSSStyles: labelStyle }).component(); this._moreInfo = this._view.modelBuilder.hyperlink().withProps({ label: '', url: '', - CSSStyles: { - 'font-size': '12px', - 'width': '200px', - 'margin': '3px 35px 0px 0px' - }, + CSSStyles: textStyle, showLinkIcon: true }).component(); @@ -705,7 +690,6 @@ export class SqlDatabaseTree { 'text-overflow': 'ellipsis', 'width': '200px', 'overflow': 'hidden', - 'border-bottom': '1px solid' }; this._assessmentResultsTable = this._view.modelBuilder.declarativeTable().withProps( diff --git a/extensions/sql-migration/src/wizard/skuRecommendationPage.ts b/extensions/sql-migration/src/wizard/skuRecommendationPage.ts index 44a4137964..113fe428c7 100644 --- a/extensions/sql-migration/src/wizard/skuRecommendationPage.ts +++ b/extensions/sql-migration/src/wizard/skuRecommendationPage.ts @@ -607,7 +607,12 @@ export class SKURecommendationPage extends MigrationWizardPage { private createAssessmentProgress(): azdata.FlexContainer { - this._assessmentLoader = this._view.modelBuilder.loadingComponent().component(); + this._assessmentLoader = this._view.modelBuilder.loadingComponent().withProps({ + CSSStyles: { + 'margin-top': '15px' + } + }).component(); + this._assessmentProgress = this._view.modelBuilder.text().withProps({ value: constants.ASSESSMENT_IN_PROGRESS, CSSStyles: { diff --git a/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts b/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts index eeffb8fee1..88c2f9fbfe 100644 --- a/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts +++ b/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts @@ -19,7 +19,7 @@ import { ILogService } from 'vs/platform/log/common/log'; @Component({ selector: 'modelview-loadingComponent', template: ` -