diff --git a/extensions/machine-learning/images/linkIcon.svg b/extensions/machine-learning/images/linkIcon.svg deleted file mode 100644 index 63f69fc22e..0000000000 --- a/extensions/machine-learning/images/linkIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts index 93c972ed67..2553e02ede 100644 --- a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts +++ b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts @@ -405,24 +405,15 @@ export class DashboardWidget { width: maxWidth + 10, justifyContent: 'flex-start' }).component(); - const linkComponent = view.modelBuilder.hyperlink().withProperties({ - label: linkMetaData.title, - url: linkMetaData.link, + const linkComponent = view.modelBuilder.hyperlink().withProps({ + label: linkMetaData.title!, + url: linkMetaData.link!, + showLinkIcon: true, CSSStyles: { 'font-size': '14px', 'margin': '0px' } }).component(); - const image = view.modelBuilder.image().withProperties({ - width: '10px', - height: '10px', - iconPath: { - dark: this.asAbsolutePath('images/linkIcon.svg'), - light: this.asAbsolutePath('images/linkIcon.svg'), - }, - iconHeight: '10px', - iconWidth: '10px' - }).component(); linkContainer.addItem(linkComponent, { CSSStyles: { 'font-size': '14px', @@ -430,12 +421,6 @@ export class DashboardWidget { 'padding': '0 5px 0 0', } }); - linkContainer.addItem(image, { - CSSStyles: { - 'padding': '5px 5px 0 0', - 'height': '10px', - } - }); labelsContainer.addItems([linkContainer, descriptionComponent], { CSSStyles: { 'padding': '5px 0 0 0', diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index b42f136d39..6796ea6a2e 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -270,11 +270,15 @@ declare module 'azdata' { export interface HyperlinkComponent { /** - * An event called when the text is clicked + * An event called when the hyperlink is clicked */ onDidClick: vscode.Event; } + export interface HyperlinkComponentProperties { + showLinkIcon?: boolean; + } + export interface DeclarativeTableColumn { headerCssStyles?: CssStyles; rowCssStyles?: CssStyles; diff --git a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts index fe68ca4b41..495a86cc0a 100644 --- a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts +++ b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts @@ -3,6 +3,7 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import 'vs/css!./media/hyperlink'; import { Component, Input, Inject, ChangeDetectorRef, forwardRef, OnDestroy, AfterViewInit, ElementRef @@ -20,7 +21,7 @@ import { ILogService } from 'vs/platform/log/common/log'; @Component({ selector: 'modelview-hyperlink', - template: `{{label}}` + template: `{{label}}` }) export default class HyperlinkComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit { @Input() descriptor: IComponentDescriptor; @@ -44,6 +45,10 @@ export default class HyperlinkComponent extends TitledComponent((props) => props.url, ''); } + public get showLinkIcon(): boolean { + return this.getPropertyOrDefault((props) => props.showLinkIcon, false); + } + public onClick(e: MouseEvent): void { this.fireEvent({ eventType: ComponentEventType.onDidClick, diff --git a/src/sql/workbench/browser/modelComponents/media/hyperlink.css b/src/sql/workbench/browser/modelComponents/media/hyperlink.css new file mode 100644 index 0000000000..176e82483b --- /dev/null +++ b/src/sql/workbench/browser/modelComponents/media/hyperlink.css @@ -0,0 +1,11 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +modelview-hyperlink .link-with-icon::after { + content: '\eb14'; + font-family: 'codicon'; + margin-left: 5px; + vertical-align: bottom; +}