add option to show link icon (#13506)

This commit is contained in:
Alan Ren
2020-11-20 14:06:07 -08:00
committed by GitHub
parent 172a044ba7
commit 815c61315c
5 changed files with 30 additions and 24 deletions

View File

@@ -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: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank">{{label}}</a>`
template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank" [class]="cssClass">{{label}}</a>`
})
export default class HyperlinkComponent extends TitledComponent<azdata.HyperlinkComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@@ -44,6 +45,10 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
this.baseDestroy();
}
public get cssClass(): string {
return this.showLinkIcon ? 'link-with-icon' : '';
}
public setLayout(layout: any): void {
this.layout();
}
@@ -64,6 +69,10 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
return this.getPropertyOrDefault<string>((props) => props.url, '');
}
public get showLinkIcon(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.showLinkIcon, false);
}
public onClick(e: MouseEvent): void {
this.fireEvent({
eventType: ComponentEventType.onDidClick,

View File

@@ -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;
}