Changing property header row styling for execution plan properties (#20594)

This commit is contained in:
Aasim Khan
2022-09-12 17:20:16 -07:00
committed by GitHub
parent 46cf166c8c
commit 3f6f6ed07b
3 changed files with 18 additions and 13 deletions

View File

@@ -248,7 +248,6 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
const topProp = v.topProp;
const bottomProp = v.bottomProp;
const parentRowCellStyling = 'font-weight: bold';
let diffIconClass = '';
if (topProp && bottomProp) {
row['displayOrder'] = v.topProp.displayOrder;
@@ -276,8 +275,8 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
title: removeLineBreaks(v.bottomProp.displayValue, ' ')
};
if ((topProp && !isString(topProp.value)) || (bottomProp && !isString(bottomProp.value))) {
row['name'].style = parentRowCellStyling;
row['primary'].style = parentRowCellStyling;
row['name'].iconCssClass += ` parent-row-styling`;
row['primary'].iconCssClass += ` parent-row-styling`;
row['secondary'].iconCssClass += ` parent-row-styling`;
}
rows.push(row);
@@ -295,8 +294,8 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
};
rows.push(row);
if (!isString(topProp.value)) {
row['name'].style = parentRowCellStyling;
row['primary'].style = parentRowCellStyling;
row['name'].iconCssClass += ` parent-row-styling`;
row['primary'].iconCssClass += ` parent-row-styling`;
this.convertPropertiesToTableRows(topProp.value, undefined, rows.length - 1, indent + 2, rows);
}
} else if (!topProp && bottomProp) {
@@ -307,7 +306,7 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
};
rows.push(row);
if (!isString(bottomProp.value)) {
row['name'].style = parentRowCellStyling;
row['name'].iconCssClass += ` parent-row-styling`;
row['secondary'].iconCssClass += ` parent-row-styling`;
this.convertPropertiesToTableRows(undefined, bottomProp.value, rows.length - 1, indent + 2, rows);
}

View File

@@ -128,8 +128,6 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
break;
}
const parentRowCellStyling = 'font-weight: bold';
props.forEach((p, i) => {
let row = {};
rows.push(row);
@@ -138,12 +136,10 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
if (!isString(p.value)) {
// Styling values in the parent row differently to make them more apparent and standout compared to the rest of the cells.
row['name'] = {
text: row['name'],
style: parentRowCellStyling
text: row['name']
};
row['value'] = {
text: removeLineBreaks(p.displayValue, ' '),
style: parentRowCellStyling
text: removeLineBreaks(p.displayValue, ' ')
};
row['tootltip'] = p.displayValue;
this.convertModelToTableRows(p.value, rows.length - 1, indent + 2, rows);

View File

@@ -13,7 +13,7 @@ import { Codicon } from 'vs/base/common/codicons';
import { sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames, sortReverseAlphabeticallyIconClassNames } from 'sql/workbench/contrib/executionPlan/browser/constants';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
import { contrastBorder, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { contrastBorder, listHoverBackground, listInactiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry';
import { TreeGrid } from 'sql/base/browser/ui/table/treeGrid';
import { ISashEvent, IVerticalSashLayoutProvider, Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
import { CellSelectionModel } from 'sql/base/browser/ui/table/plugins/cellSelectionModel.plugin';
@@ -332,6 +332,16 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
}
`);
}
const parentRowBackground = theme.getColor(listInactiveSelectionBackground);
if (parentRowBackground) {
collector.addRule(`
.eps-container .ui-widget-content.slick-row[aria-expanded="true"],
.eps-container .ui-widget-content.slick-row[aria-expanded="false"] {
background-color: ${parentRowBackground};
}
`);
}
});