51 lines
1.4 KiB
HTML
51 lines
1.4 KiB
HTML
<div *ngIf="currentSticker" class="selected-sticker">
|
|
<img [src]="getStickerContentsImage(currentSticker)" />
|
|
<span class="btn-close">
|
|
<button
|
|
mat-button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Close"
|
|
(click)="onClickClose()"
|
|
>
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="sticker-selector">
|
|
<mat-tab-group
|
|
mat-stretch-tabs
|
|
animationDuration="0ms"
|
|
(selectedIndexChange)="onSelectedIndexChange($event)"
|
|
>
|
|
<mat-tab
|
|
*ngFor="let stickerInfo of stickerInfoList; let idx = index"
|
|
[aria-label]="stickerInfo.title"
|
|
>
|
|
<ng-template mat-tab-label>
|
|
<img
|
|
#stickerTitle
|
|
[matTooltip]="stickerInfo.title"
|
|
matTooltipPosition="after"
|
|
[src]="getStickerTitleImage(stickerInfo, false, idx)"
|
|
(mouseover)="
|
|
stickerTitle.src = getStickerTitleImage(stickerInfo, true, idx)
|
|
"
|
|
(mouseout)="
|
|
stickerTitle.src = getStickerTitleImage(stickerInfo, false, idx)
|
|
"
|
|
/>
|
|
</ng-template>
|
|
<div fxFlex fxLayout="row" fxLayoutGap="20px" class="sticker-item-box">
|
|
<div
|
|
*ngFor="let sticker of getStickerInfos(stickerInfo)"
|
|
(click)="onClickSelectSticker(sticker)"
|
|
class="sticker-item"
|
|
>
|
|
<img [src]="getStickerContentsImage(sticker)" />
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|