mirror of
https://github.com/turt2live/matrix-dimension.git
synced 2024-10-01 05:05:53 +00:00
feat: Sticker pack list in sticker picker widget
This allows the user to jump to a specific sticker pack in the sticker picker. The list hides and shows when scrolling so no view size is lost. It also contains a quick shortcut to the sticker settings.
This commit is contained in:
parent
dd2b45494b
commit
f9402f5aaa
@ -14,7 +14,7 @@
|
||||
<button class="btn btn-link btn-sm" (click)="openIntegrationManager()">Add some stickers</button>
|
||||
</div>
|
||||
<div class="sticker-picker" *ngIf="!isLoading && !authError">
|
||||
<div class="sticker-pack" *ngFor="let pack of packs trackById">
|
||||
<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"
|
||||
@ -32,5 +32,15 @@
|
||||
</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>
|
@ -43,6 +43,7 @@
|
||||
|
||||
.sticker-picker {
|
||||
margin: 15px 15px 30px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.sticker-pack {
|
||||
.header {
|
||||
@ -92,5 +93,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-pack-list {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: themed(stickerPickerControlBgColor);
|
||||
border-top: 1px solid themed(stickerPickerShadowColor);
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
padding: 1px 15px;
|
||||
|
||||
.sticker-pack-list-item {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.sticker-pack-list-config {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -1,6 +1,22 @@
|
||||
import {
|
||||
animate,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
trigger
|
||||
} from '@angular/animations';
|
||||
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { CapableWidget, WIDGET_API_VERSION_OPENID } from "../capable-widget";
|
||||
import { fromEvent } from 'rxjs';
|
||||
import {
|
||||
distinctUntilChanged,
|
||||
filter,
|
||||
map,
|
||||
pairwise,
|
||||
share,
|
||||
throttleTime
|
||||
} from 'rxjs/operators';
|
||||
import { Subscription } from "rxjs/Subscription";
|
||||
import { ScalarWidgetApi } from "../../shared/services/scalar/scalar-widget.api";
|
||||
import { StickerApiService } from "../../shared/services/integrations/sticker-api.service";
|
||||
@ -14,10 +30,25 @@ import { WIDGET_STICKER_PICKER } from "../../shared/models/widget";
|
||||
selector: "my-generic-widget-wrapper",
|
||||
templateUrl: "sticker-picker.component.html",
|
||||
styleUrls: ["sticker-picker.component.scss"],
|
||||
animations: [
|
||||
trigger('hideList', [
|
||||
state(
|
||||
'hidden',
|
||||
style({ opacity: 0, transform: 'translateY(100%)' })
|
||||
),
|
||||
state(
|
||||
'visible',
|
||||
style({ opacity: 1, transform: 'translateY(0)' })
|
||||
),
|
||||
transition('* => *', animate('200ms ease-in'))
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
export class StickerPickerWidgetWrapperComponent extends CapableWidget implements OnInit, OnDestroy {
|
||||
|
||||
public isLoading = true;
|
||||
public isListVisible = true;
|
||||
public authError = false;
|
||||
public packs: FE_UserStickerPack[];
|
||||
|
||||
@ -68,6 +99,28 @@ export class StickerPickerWidgetWrapperComponent extends CapableWidget implement
|
||||
if (this.stickerWidgetApiSubscription) this.stickerWidgetApiSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
public ngAfterViewInit() {
|
||||
const scroll$ = fromEvent(window, 'scroll').pipe(
|
||||
throttleTime(10),
|
||||
map(() => window.pageYOffset),
|
||||
pairwise(),
|
||||
map(([y1, y2]): string => (y2 < y1 ? 'up' : 'down')),
|
||||
distinctUntilChanged(),
|
||||
share()
|
||||
);
|
||||
|
||||
const scrollUp$ = scroll$.pipe(
|
||||
filter(direction => direction === 'up')
|
||||
);
|
||||
|
||||
const scrollDown = scroll$.pipe(
|
||||
filter(direction => direction === 'down')
|
||||
);
|
||||
|
||||
scrollUp$.subscribe(() => (this.isListVisible = true));
|
||||
scrollDown.subscribe(() => (this.isListVisible = false));
|
||||
}
|
||||
|
||||
protected onSupportedVersionsFound(): void {
|
||||
super.onSupportedVersionsFound();
|
||||
|
||||
@ -133,6 +186,16 @@ export class StickerPickerWidgetWrapperComponent extends CapableWidget implement
|
||||
}
|
||||
}
|
||||
|
||||
public scrollHorizontal(event: WheelEvent): void {
|
||||
document.getElementsByClassName('sticker-pack-list')[0].scrollLeft += event.deltaY;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
public scrollToPack(id: string) {
|
||||
const el = document.getElementById(id);
|
||||
el.scrollIntoView({behavior: 'smooth'});
|
||||
}
|
||||
|
||||
public sendSticker(sticker: FE_Sticker, pack: FE_UserStickerPack) {
|
||||
ScalarWidgetApi.sendSticker(sticker, pack);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user