(fuse/fullscreen) Added [tooltip] & [iconTpl] inputs for customizing the Fullscreen trigger button

This commit is contained in:
sercan 2021-06-08 18:29:49 +03:00
parent 9005f08ac7
commit 945d0a2240
3 changed files with 14 additions and 5 deletions

View File

@ -1,7 +1,12 @@
<!-- Button --> <!-- Button -->
<button <button
mat-icon-button mat-icon-button
[matTooltip]="'Toggle Fullscreen'" [matTooltip]="tooltip || 'Toggle Fullscreen'"
(click)="toggleFullscreen()"> (click)="toggleFullscreen()">
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon> <ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
</button> </button>
<!-- Default icon -->
<ng-template #defaultIconTpl>
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
</ng-template>

View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types'; import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
@ -11,6 +11,8 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
}) })
export class FuseFullscreenComponent implements OnInit export class FuseFullscreenComponent implements OnInit
{ {
@Input() iconTpl: TemplateRef<any>;
@Input() tooltip: string;
private _fsDoc: FSDocument; private _fsDoc: FSDocument;
private _fsDocEl: FSDocumentElement; private _fsDocEl: FSDocumentElement;
private _isFullscreen: boolean = false; private _isFullscreen: boolean = false;

View File

@ -3,15 +3,17 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
import { CommonModule } from '@angular/common';
@NgModule({ @NgModule({
declarations: [ declarations: [
FuseFullscreenComponent FuseFullscreenComponent
], ],
imports : [ imports: [
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatTooltipModule MatTooltipModule,
CommonModule
], ],
exports : [ exports : [
FuseFullscreenComponent FuseFullscreenComponent