Standardize font styling on sql migration extension (#16968)

This commit is contained in:
Rachel Kim
2021-10-11 14:58:37 -07:00
committed by GitHub
parent cd053ade22
commit e5f50499ce
20 changed files with 715 additions and 803 deletions

View File

@@ -12,6 +12,7 @@ import * as loc from '../../constants/strings';
import { convertByteSizeToReadableUnit, convertIsoTimeToLocalTime, getSqlServerName, getMigrationStatusImage, SupportedAutoRefreshIntervals, clearDialogMessage, displayDialogErrorMessage } from '../../api/utils';
import { EOL } from 'os';
import { ConfirmCutoverDialog } from './confirmCutoverDialog';
import * as styles from '../../constants/styles';
const refreshFrequency: SupportedAutoRefreshIntervals = 30000;
const statusImageSize: number = 14;
@@ -66,8 +67,7 @@ export class MigrationCutoverDialog {
this._fileCount = view.modelBuilder.text().withProps({
width: '500px',
CSSStyles: {
'font-size': '14px',
'font-weight': 'bold'
...styles.BODY_CSS
}
}).component();
@@ -160,6 +160,7 @@ export class MigrationCutoverDialog {
width: '1100px',
height: '300px',
CSSStyles: {
...styles.BODY_CSS,
'display': 'none',
'padding-left': '0px'
}
@@ -179,9 +180,9 @@ export class MigrationCutoverDialog {
const _emptyTableText = view.modelBuilder.text().withProps({
value: loc.EMPTY_TABLE_TEXT,
CSSStyles: {
...styles.NOTE_CSS,
'margin-top': '8px',
'text-align': 'center',
'font-size': 'large',
'font-weight': 'bold',
'width': '300px'
}
}).component();
@@ -249,9 +250,7 @@ export class MigrationCutoverDialog {
this._databaseTitleName = this._view.modelBuilder.text().withProps({
CSSStyles: {
'font-size': '16px',
'font-weight': 'bold',
'margin': '0px'
...styles.PAGE_TITLE_CSS
},
width: 950,
value: this._model._migration.migrationContext.properties.sourceDatabaseName
@@ -259,8 +258,7 @@ export class MigrationCutoverDialog {
const databaseSubTitle = this._view.modelBuilder.text().withProps({
CSSStyles: {
'font-size': '10px',
'margin': '5px 0px'
...styles.NOTE_CSS
},
width: 950,
value: loc.DATABASE
@@ -306,7 +304,7 @@ export class MigrationCutoverDialog {
width: '150px',
enabled: false,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS,
'display': this._isOnlineMigration() ? 'inline' : 'none'
}
}).component();
@@ -335,7 +333,7 @@ export class MigrationCutoverDialog {
width: '150px',
enabled: false,
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS,
}
}).component();
@@ -364,7 +362,7 @@ export class MigrationCutoverDialog {
height: '20px',
width: '100px',
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS,
}
}).component();
@@ -383,7 +381,7 @@ export class MigrationCutoverDialog {
height: '20px',
width: '200px',
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS,
}
}).component();
@@ -408,7 +406,10 @@ export class MigrationCutoverDialog {
iconHeight: '16px',
iconWidth: '16px',
height: '20px',
width: '140px',
width: '180px',
CSSStyles: {
...styles.BODY_CSS,
}
}).component();
this._newSupportRequest.onDidClick(async (e) => {
@@ -668,6 +669,7 @@ export class MigrationCutoverDialog {
if (this._shouldDisplayBackupFileTable()) {
await this._fileCount.updateCssStyles({
...styles.SECTION_HEADER_CSS,
display: 'inline'
});
await this._fileTable.updateCssStyles({
@@ -745,9 +747,8 @@ export class MigrationCutoverDialog {
const labelComponent = this._view.modelBuilder.text().withProps({
value: label,
CSSStyles: {
'font-weight': 'bold',
...styles.LIGHT_LABEL_CSS,
'margin-bottom': '0',
'font-size': '12px'
}
}).component();
flexContainer.addItem(labelComponent);
@@ -755,12 +756,11 @@ export class MigrationCutoverDialog {
const textComponent = this._view.modelBuilder.text().withProps({
value: value,
CSSStyles: {
'margin-top': '5px',
'margin-bottom': '0',
...styles.BODY_CSS,
'margin': '4px 0 12px',
'width': '100%',
'overflow': 'hidden',
'text-overflow': 'ellipses',
'font-size': '12px'
'text-overflow': 'ellipses'
}
}).component();