Fix endpoint links to not overflow text (#7312)

* Fix endpoint links to not overflow

* Add titles to links

* Re-add title to Text and fix errors
This commit is contained in:
Charles Gagnon
2019-09-26 11:47:22 -07:00
committed by GitHub
parent 2d9f6dcd86
commit 33854d42e4
12 changed files with 114 additions and 38 deletions

View File

@@ -242,13 +242,21 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container:
endPointRow.addItem(nameCell, { CSSStyles: { 'width': `${serviceEndpointRowServiceNameCellWidth}px`, 'min-width': `${serviceEndpointRowServiceNameCellWidth}px`, 'text-align': 'center' } });
if (isHyperlink) {
const endpointCell = modelBuilder.hyperlink()
.withProperties({ label: endpoint.endpoint, url: endpoint.endpoint, CSSStyles: { 'height': '15px' } })
.withProperties<azdata.HyperlinkComponentProperties>({
label: endpoint.endpoint,
title: endpoint.endpoint,
url: endpoint.endpoint, CSSStyles: { 'height': '15px' }
})
.component();
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden', ...cssStyles.hyperlink } });
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.hyperlink } });
}
else if (endpoint.name === Endpoint.sqlServerMaster) {
const endpointCell = modelBuilder.text()
.withProperties({ value: endpoint.endpoint, CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink } })
.withProperties<azdata.TextComponentProperties>({
value: endpoint.endpoint,
title: endpoint.endpoint,
CSSStyles: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.text, ...cssStyles.hyperlink }
})
.component();
endpointCell.onDidClick(async () => {
const connProfile = bdcModel.getSqlServerMasterConnectionProfile();
@@ -263,20 +271,23 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container:
azdata.connection.openConnectionDialog(undefined, connProfile);
}
});
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden' } });
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px` } });
}
else {
const endpointCell = modelBuilder.text()
.withProperties({ value: endpoint.endpoint, CSSStyles: { ...cssStyles.text } })
.withProperties<azdata.TextComponentProperties>({
value: endpoint.endpoint,
title: endpoint.endpoint,
CSSStyles: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.text }
})
.component();
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden' } });
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px` } });
}
const copyValueCell = modelBuilder.button().component();
const copyValueCell = modelBuilder.button().withProperties<azdata.ButtonProperties>({ title: localize('bdc.dashboard.copyTitle', "Copy") }).component();
copyValueCell.iconPath = IconPathHelper.copy;
copyValueCell.onDidClick(() => {
vscode.env.clipboard.writeText(endpoint.endpoint);
});
copyValueCell.title = localize('bdc.dashboard.copyTitle', "Copy");
copyValueCell.iconHeight = '14px';
copyValueCell.iconWidth = '14px';
endPointRow.addItem(copyValueCell, { CSSStyles: { 'width': '14px', 'min-width': '14px', 'padding-left': '10px', ...cssStyles.text } });