matrix-dimension/web/app/widget-wrappers/sticker-picker/sticker-picker.component.html

<div class="wrapper">
    <div class="control-page" *ngIf="isLoading || authError">
        <div class="loading-badge" *ngIf="isLoading">
            <my-spinner></my-spinner>
        </div>
        <div class="auth-error" *ngIf="!isLoading && authError">
            {{'There was a problem authenticating your use of this sticker picker. Please make sure you\'re using a client that has Dimension enabled and correctly set up.' | translate}}
        </div>
    </div>
    <div class="no-stickers" *ngIf="!isLoading && !authError && (!packs || packs.length === 0)">
        <img src="/assets/img/no_stickers.png"/>
        <span class="message">{{'You have no sticker packs.' | translate}}</span>
        <button class="btn btn-link btn-sm" (click)="openIntegrationManager()">{{'Add some stickers' | translate}}</button>
    </div>
    <div class="sticker-picker" *ngIf="!isLoading && !authError">
        <div class="sticker-pack" *ngFor="let pack of packs trackById" [attr.id]="'pack-' + pack.id">
            <div class="header">
                <span class="title">{{ pack.displayName }}</span>
                <span class="license"><a [href]="pack.license.urlPath"
                                         target="_blank">{{ pack.license.name }}</a></span>
                <span class="author" *ngIf="pack.author.type !== 'none'">
                    <a [href]="pack.author.reference" target="_blank">{{ pack.author.name }}</a>
                </span>
            </div>

            <div class="stickers">
                <div class="sticker" *ngFor="let sticker of pack.stickers trackById"
                     (click)="sendSticker(sticker, pack)">
                    <img [src]="getThumbnailUrl(sticker.thumbnail.mxc, 48, 48)" width="48" height="48" class="image" loading="lazy"
                         [alt]="sticker.name" [ngbTooltip]="sticker.name" placement="bottom"/>
                </div>
            </div>
        </div>
        <div class="sticker-pack-list" [@hideList]="isListVisible ? 'visible' : 'hidden'" (wheel)="scrollHorizontal($event)" >
            <div class="sticker-pack-list-item" *ngFor="let pack of packs trackById" (click)="scrollToPack('pack-' + pack.id)">
                <img [src]="getThumbnailUrl(pack.stickers[0].thumbnail.mxc, 48, 48)" width="40" height="40" class="image" loading="lazy"
                         [alt]="pack.displayName" [ngbTooltip]="pack.displayName" placement="top" container="body"/>
            </div>
            <div class="sticker-pack-list-config" (click)="openIntegrationManager()"
                 ngbTooltip="Settings" placement="top" container="body">
                <i class="fas fa-2x fa-cog"></i>
            </div>
        </div>
    </div>
</div>