matrix-dimension/web/app/widget-wrappers/sticker-picker/sticker-picker.component.html
Tony Stipanic 4954de2a96
Upgrade everything to Angular 12 and more + build changes
This is a very big commit that does an initial job of upgrading everything to the latest version. TSLint gets replaced by ESLint. Instead of plain node, now ts-node is being used. Old modules also get replaced with new ones (mostly ng2 to ngx). Also obsolete configs have been replaced with how it's used today with Angular.

This includes:

* Upgrade to:
** Angular 12
** Typescript 4
** ESLint 7 and replace TSLint
** Bootstrap 5
** Eerything connected to these
* Run with ts-node
* Convert wepack config to angular config
* Remove typescript-ioc
* Update tsconfigs
* Run a git command instead of using a library for sshort hash
* Move assets to a new location align with default Angular settings
* Database migration for new avatarUrl locations
* Simplify Model extension align with newest sequelize version
* Remove breadcrumb hack
* Fix homeserver typo
* A few general fixes that are necessary with newest Typescript rules
* Define Express.User interface
2021-08-29 19:39:43 +02:00

46 lines
2.6 KiB
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"
[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"
[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>