client: add plugin support for external links (#6784)
* client: add plugin support for external links * Styling --------- Co-authored-by: Chocobozzz <me@florianbigard.com>
This commit is contained in:
parent
3f30458c37
commit
85969c5a67
|
@ -54,16 +54,26 @@
|
|||
<ul class="ul-unstyle">
|
||||
<li *ngFor="let link of menuSection.links">
|
||||
@if (link.isPrimaryButton === true) {
|
||||
<my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [title]="link.label" [ptRouterLink]="link.path" [ptQueryParams]="link.query">
|
||||
<my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [title]="link.label" [ptRouterLink]="link.path" [ptQueryParams]="link.query" [href]="link.url">
|
||||
@if (!collapsed) {
|
||||
{{ link.label }}
|
||||
}
|
||||
</my-button>
|
||||
} @else {
|
||||
<a class="menu-link ellipsis" [routerLink]="link.path" [queryParams]="link.query" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
|
||||
<ng-template #linkTemplate>
|
||||
<my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
|
||||
<span [ngClass]="{ 'visually-hidden': collapsed }">{{ link.label }}</span>
|
||||
</a>
|
||||
</ng-template>
|
||||
|
||||
@if (link.path) {
|
||||
<a class="menu-link ellipsis" [routerLink]="link.path" [queryParams]="link.query" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
|
||||
<ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
|
||||
</a>
|
||||
} @else {
|
||||
<a class="menu-link ellipsis" [href]="link.url" [ngClass]="link.ngClass" [title]="link.label" target="_blank">
|
||||
<ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
|
||||
</a>
|
||||
}
|
||||
}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -25,7 +25,8 @@ type MenuLink = {
|
|||
|
||||
label: string
|
||||
|
||||
path: string
|
||||
path?: string
|
||||
url?: string
|
||||
query?: Params
|
||||
|
||||
isPrimaryButton?: boolean // default false
|
||||
|
|
|
@ -6,6 +6,14 @@
|
|||
>
|
||||
<ng-container *ngTemplateOutlet="content"></ng-container>
|
||||
</a>
|
||||
} @else if (href) {
|
||||
<a
|
||||
class="action-button"
|
||||
[ngClass]="classes" [ngbTooltip]="tooltip" [attr.title]="title"
|
||||
[href]="href" target="_blank"
|
||||
>
|
||||
<ng-container *ngTemplateOutlet="content"></ng-container>
|
||||
</a>
|
||||
} @else {
|
||||
<button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="tooltip" [attr.title]="title">
|
||||
<ng-container *ngTemplateOutlet="content"></ng-container>
|
||||
|
|
|
@ -44,6 +44,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
|
|||
@Input() theme: 'primary' | 'secondary' | 'tertiary' = 'secondary'
|
||||
@Input() icon: GlobalIconName
|
||||
|
||||
@Input() href: string
|
||||
@Input() ptRouterLink: string[] | string
|
||||
@Input() ptQueryParams: Params
|
||||
@Input() ptQueryParamsHandling: QueryParamsHandling
|
||||
|
@ -73,7 +74,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
|
|||
}
|
||||
|
||||
private buildClasses () {
|
||||
const isButtonLink = !!this.ptRouterLink
|
||||
const isButtonLink = !!this.ptRouterLink || !!this.href
|
||||
|
||||
this.classes = {
|
||||
'active': this.active,
|
||||
|
|
Loading…
Reference in New Issue