matrix-dimension/web/app/admin/sticker-packs/sticker-packs.component.html

<div *ngIf="isLoading">
    <my-spinner></my-spinner>
</div>
<div *ngIf="!isLoading">
    <my-ibox title="Sticker Packs">
        <div class="my-ibox-content">
            <p>
                Sticker packs provide a way to convey memes or feelings to others in a room. From here you're able
                to select which sticker packs users of this Dimension instance can use. If no sticker packs are enabled
                then the 'sticker picker' widget will be disabled.
            </p>

            <div class="input-group input-group-sm telegram-import">
                <input type="text" class="form-control" [(ngModel)]="tgUrl" placeholder="https://t.me/addstickers/YourPackID"
                       [disabled]="isImporting" />
                <span class="input-group-btn">
                    <button class="btn btn-primary" (click)="startTelegramImport()" [disabled]="!tgUrl || isImporting">
                        <i class="fa fa-download"></i>
                        Import from Telegram
                    </button>
                </span>
            </div>

            <table class="table table-striped table-condensed table-bordered">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Author</th>
                    <th>License</th>
                    <th class="text-center" style="width: 120px;">Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngIf="!packs || packs.length === 0">
                    <td colspan="5"><i>No sticker packs installed.</i></td>
                </tr>
                <tr *ngFor="let pack of packs trackById">
                    <td>{{ pack.displayName }}</td>
                    <td>{{ pack.description }}</td>

                    <td *ngIf="pack.author.type !== 'none'">
                        <a [href]="pack.author.reference" target="_blank">{{ pack.author.name }}</a>
                    </td>
                    <td *ngIf="pack.author.type === 'none'">Dimension</td>

                    <td><a [href]="pack.license.urlPath" target="_blank">{{ pack.license.name }}</a></td>
                    <td class="text-center">
                        <span class="previewButton" title="preview stickers" (click)="previewStickers(pack)">
                            <i class="fa fa-eye"></i>
                        </span>
                        <ui-switch [checked]="pack.isEnabled" size="small" [disabled]="isUpdating"
                                   (change)="toggleEnabled(pack)"></ui-switch>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </my-ibox>
</div>