Fixing filter layout (#23537)

This commit is contained in:
Aasim Khan
2023-06-28 22:50:48 -07:00
committed by GitHub
parent 95db36dd96
commit 1bbadd8162
2 changed files with 26 additions and 2 deletions

View File

@@ -66,7 +66,7 @@ const CLEAR_COLUMN_HEADER = localize('objectExplorer.clearColumnHeader', "Clear"
const TRUE_SELECT_BOX = localize('objectExplorer.trueSelectBox', "True");
const FALSE_SELECT_BOX = localize('objectExplorer.falseSelectBox', "False");
function nodePathDisplayString(nodepath: string): string { return localize('objectExplorer.nodePath', "Path: {0}", nodepath) }
const SUBTITLE_LABEL = localize('objectExplorer.nodePath', "Path:");
const PROPERTY_COLUMN_ID = 'property';
const OPERATOR_COLUMN_ID = 'operator';
@@ -138,7 +138,12 @@ export class FilterDialog extends Modal {
protected renderBody(container: HTMLElement): void {
const body = DOM.append(container, DOM.$('.filter-dialog-body'));
const subtitle = DOM.append(body, DOM.$('.filter-dialog-node-path'));
subtitle.innerText = nodePathDisplayString(this._filterDialogSubtitle);
const subtileLabel = DOM.append(subtitle, DOM.$('.filter-dialog-node-path-label'));
subtileLabel.innerText = SUBTITLE_LABEL;
const subtilteText = DOM.append(subtitle, DOM.$('.filter-dialog-node-path-text'));
const nodePathText = this._filterDialogSubtitle;
subtilteText.title = nodePathText;
subtilteText.innerText = nodePathText;
const clauseTableContainer = DOM.append(body, DOM.$('.filter-table-container'));
const filter = DOM.append(clauseTableContainer, DOM.$('.filter-table'));
this._tableCellEditorFactory = new TableCellEditorFactory(

View File

@@ -17,9 +17,28 @@
}
.filter-dialog-body .filter-dialog-node-path {
display: flex;
width: 100%;
}
.filter-dialog-body .filter-dialog-node-path-label {
padding: 10px 0px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
display: inline-block;
width: 40px;
flex: 0 0 40px;
}
.filter-dialog-body .filter-dialog-node-path-text {
padding: 10px 0px;
font-size: 13px;
white-space: nowrap;
display: inline-block;
flex: 1;
white-space: initial;
overflow-wrap: anywhere;
}
.filter-table-container {