40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<div *ngIf="currentSticker" class="selected-sticker">
|
|
<img [src]="getStickerContentsImage(currentSticker)" />
|
|
</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="10px">
|
|
<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>
|