Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added notification switch, animation and mentions

This commit is contained in:
Nicolas Constant 2019-11-20 22:15:50 -05:00
parent 29d646477d
commit c182540ca8
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 141 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/components/stream/stream-notifications/stream-notifications.component.html
View File

@ -1,17 +1,28 @@
<div class="notifications">
<div class="notifications__selector">
<a href class="notifications__selector__button" title="display all notifications" (click)="select('all')"
[class.notifications__selector__button--selected]="displayingAll">All</a>
[class.notifications__selector__button--selected]="displayingNotifications">All</a>
<a href class="notifications__selector__button" title="display mentions" (click)="select('mentions')"
[class.notifications__selector__button--selected]="!displayingAll">Mentions</a>
[class.notifications__selector__button--selected]="displayingMentions">Mentions</a>
</div>
<div class="notifications__elements flexcroll" #statusstream (scroll)="onScroll()" tabindex="0">
<div class="notification" *ngFor="let notification of notifications">
<app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
</app-notification>
</div>
<div class="notifications__elements">
<div [class.notifications__elements__wrapper--selected]="displayingNotifications"
class="notifications__elements__wrapper flexcroll" #notificationstream (scroll)="onScroll()" tabindex="0">
<div class="notification" *ngFor="let notification of notifications">
<app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
</app-notification>
</div>
</div>
<div [class.notifications__elements__wrapper--selected]="displayingMentions"
class="notifications__elements__wrapper flexcroll" #mentionstream (scroll)="onScroll()" tabindex="0">
<div class="notification" *ngFor="let notification of mentions">
<app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
</app-notification>
</div>
</div>
</div>
</div>

35
src/app/components/stream/stream-notifications/stream-notifications.component.scss
View File

@ -34,13 +34,36 @@ $selector-height: 30px;
height: calc(100% - #{$selector-height});
width: calc(100%);
position: relative;
overflow: auto;
outline: none;
:focus {
outline: none;
&__wrapper {
transition: all .15s;
position: absolute;
height: calc(100%);
width: calc(100%);
// right: 0;
// left: 0;
// bottom: 0;
z-index: 1;
opacity: 0;
overflow: auto;
outline: none;
&--selected {
z-index: 10;
opacity: 1;
}
}
:focus {
outline: none;
}
}
}

117
src/app/components/stream/stream-notifications/stream-notifications.component.ts
View File

@ -1,33 +1,40 @@
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Notification } from '../../../services/models/mastodon.interfaces';
import { StreamElement } from '../../../states/streams.state';
import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
import { MastodonService } from '../../../services/mastodon.service';
import { UserNotificationService } from '../../../services/user-notification.service';
import { UserNotificationService, UserNotification } from '../../../services/user-notification.service';
import { NotificationWrapper } from '../../floating-column/manage-account/notifications/notifications.component';
import { AccountInfo } from 'src/app/states/accounts.state';
@Component({
selector: 'app-stream-notifications',
templateUrl: './stream-notifications.component.html',
styleUrls: ['./stream-notifications.component.scss']
})
export class StreamNotificationsComponent implements OnInit {
displayingAll = true;
export class StreamNotificationsComponent implements OnInit, OnDestroy {
displayingNotifications = true;
displayingMentions = false;
notifications: NotificationWrapper[] = [];
mentions: NotificationWrapper[] = [];
@Input() streamElement: StreamElement;
@Input() goToTop: Observable<void>;
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@ViewChild('statusstream') public statustream: ElementRef;
@ViewChild('notificationstream') public notificationstream: ElementRef;
@ViewChild('mentionstream') public mentionstream: ElementRef;
private nbStatusPerIteration: number = 10;
private goToTopSubscription: Subscription;
private mentionsSubscription: Subscription;
constructor(
private readonly userNotificationService: UserNotificationService,
@ -35,34 +42,91 @@ export class StreamNotificationsComponent implements OnInit {
private readonly toolsService: ToolsService) { }
ngOnInit() {
this.goToTopSubscription = this.goToTop.subscribe(() => {
this.applyGoToTop();
});
this.loadNotifications();
}
ngOnDestroy(): void {
this.goToTopSubscription.unsubscribe();
this.mentionsSubscription.unsubscribe();
}
private reduceSize(elements: NotificationWrapper[]) {
if (elements.length > 2 * this.nbStatusPerIteration) {
elements.length = 2 * this.nbStatusPerIteration;
}
}
private applyGoToTop(): boolean {
let stream: HTMLElement;
if (this.displayingNotifications) {
this.reduceSize(this.notifications);
stream = this.notificationstream.nativeElement as HTMLElement;
} else {
this.reduceSize(this.mentions);
stream = this.mentionstream.nativeElement as HTMLElement;
}
setTimeout(() => {
stream.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 0);
return false;
}
private loadMentions(account: AccountInfo, userNotifications: UserNotification[]) {
if(!userNotifications) return;
let userNotification = userNotifications.find(x => x.account.id === account.id);
if(!userNotification) return;
let mentions = userNotification.mentions.map(x => new NotificationWrapper(x, account)).reverse();
if(!mentions) return;
mentions.forEach(mention => {
if (!this.mentions.find(x => x.wrapperId === mention.wrapperId)) {
this.mentions.unshift(mention);
}
});
}
loadNotifications(): any {
const account = this.toolsService.getAccountById(this.streamElement.accountId);
// let getMentionsPromise = this.mastodonService.getNotifications(account, ['favourite', 'follow', 'reblog', 'poll'], null, null, 10)
// .then((notifications: Notification[]) => {
// this.mentions = notifications;
// })
// .catch(err => {
// });
this.mentionsSubscription = this.userNotificationService.userNotifications.subscribe((userNotifications: UserNotification[]) => {
console.warn(userNotifications);
this.loadMentions(account, userNotifications);
});
let getNotificationPromise = this.mastodonService.getNotifications(account, null, null, null, 10)
.then((notifications: Notification[]) => {
this.notifications = notifications.map(x => new NotificationWrapper(x, account));
})
.catch(err => {
});
.then((notifications: Notification[]) => {
this.notifications = notifications.map(x => new NotificationWrapper(x, account));
})
.catch(err => {
});
}
select(value: 'all' | 'mentions'): boolean {
if(value === 'all'){
this.displayingAll = true;
if (value === 'all') {
this.displayingMentions = false;
setTimeout(() => {
this.displayingNotifications = true;
}, 150);
} else {
this.displayingAll = false;
this.displayingNotifications = false;
setTimeout(() => {
this.displayingMentions = true;
}, 150);
}
return false;
}
@ -73,7 +137,12 @@ export class StreamNotificationsComponent implements OnInit {
focus(): boolean {
setTimeout(() => {
var element = this.statustream.nativeElement as HTMLElement;
let element: HTMLElement;
if (this.displayingMentions) {
element = this.mentionstream.nativeElement as HTMLElement;
} else {
element = this.notificationstream.nativeElement as HTMLElement;
}
element.focus();
}, 0);
return false;