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

first iteration of notification display #55

This commit is contained in:
Nicolas Constant 2019-03-27 22:56:17 -04:00
parent 38d5ef40c7
commit dc209ec618
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 147 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/floating-column/manage-account/mentions/mentions.component.ts
View File

@ -47,8 +47,10 @@ export class MentionsComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
if(this.userNotificationServiceSub){
this.userNotificationServiceSub.unsubscribe();
}
}
private loadMentions(){
if(this.userNotificationServiceSub){

37
src/app/components/floating-column/manage-account/notifications/notifications.component.html
View File

@ -1,3 +1,34 @@
<p>
notifications works!
</p>
<div class="stream flexcroll" #statusstream (scroll)="onScroll()">
<div class="stream__notification" *ngFor="let notification of notifications">
<div *ngIf="notification.type === 'favourite'">
<div class="stream__notification--icon">
</div>
<div class="stream__notification--label">
<a href class="stream__link">{{ notification.account.username }}</a> favorited your status
</div>
</div>
<div *ngIf="notification.type === 'reblog'">
<div class="stream__notification--icon">
</div>
<div class="stream__notification--label">
<a href class="stream__link">{{ notification.account.username }}</a> boosted your status
</div>
</div>
<div *ngIf="notification.type === 'follow'">
<div class="stream__notification--icon">
</div>
<div class="stream__notification--label">
<a href class="stream__link">{{ notification.account.username }}</a> followed you!
</div>
</div>
<app-status *ngIf="notification.status" class="stream__status" [statusWrapper]="notification.status"
[isThreadDisplay]="false" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-status>
</div>
</div>

40
src/app/components/floating-column/manage-account/notifications/notifications.component.scss
View File

@ -0,0 +1,40 @@
@import "variables";
@import "commons";
@import "mixins";
.stream {
height: calc(100%);
width: calc(100%);
overflow: auto;
background-color: $column-background;
&__error {
padding: 20px 20px 0 20px;
color: rgb(255, 113, 113);
}
&__notification {
&--icon {}
&--label {
margin: 0 10px 0 $avatar-column-space;
padding-top: 5px;
}
&:not(:last-child) {
border: solid #06070b;
border-width: 0 0 1px 0;
}
}
&__link {
color: $status-links-color;
}
&__status {
display: block;
opacity: 0.6;
}
}

70
src/app/components/floating-column/manage-account/notifications/notifications.component.ts
View File

@ -1,28 +1,90 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { AccountWrapper } from '../../../../models/account.models';
import { UserNotificationService, UserNotification } from '../../../../services/user-notification.service';
import { StatusWrapper } from '../../../../models/common.model';
import { Status, Notification, Account } from '../../../../services/models/mastodon.interfaces';
import { MastodonService } from '../../../../services/mastodon.service';
import { NotificationService } from '../../../../services/notification.service';
import { AccountInfo } from '../../../../states/accounts.state';
@Component({
selector: 'app-notifications',
templateUrl: './notifications.component.html',
styleUrls: ['./notifications.component.scss']
})
export class NotificationsComponent implements OnInit {
export class NotificationsComponent implements OnInit, OnDestroy {
notifications: NotificationWrapper[] = [];
isLoading = false;
@Input('account')
set account(acc: AccountWrapper) {
console.warn('account');
this._account = acc;
this.loadNotifications();
}
get account(): AccountWrapper {
return this._account;
}
private _account: AccountWrapper;
@ViewChild('statusstream') public statustream: ElementRef;
constructor() { }
private maxReached = false;
private _account: AccountWrapper;
private userNotificationServiceSub: Subscription;
private lastId: string;
constructor(
private readonly notificationService: NotificationService,
private readonly userNotificationService: UserNotificationService,
private readonly mastodonService: MastodonService) { }
ngOnInit() {
}
ngOnDestroy(): void {
if(this.userNotificationServiceSub){
this.userNotificationServiceSub.unsubscribe();
}
}
private loadNotifications(){
if(this.userNotificationServiceSub){
this.userNotificationServiceSub.unsubscribe();
}
this.notifications.length = 0;
this.userNotificationService.markNotificationAsRead(this.account.info);
this.userNotificationServiceSub = this.userNotificationService.userNotifications.subscribe((userNotifications: UserNotification[]) => {
const userNotification = userNotifications.find(x => x.account.id === this.account.info.id);
if(userNotification && userNotification.notifications){
userNotification.notifications.forEach((notification: Notification) => {
const notificationWrapper = new NotificationWrapper(notification, this.account.info);
this.notifications.push(notificationWrapper);
});
}
this.lastId = userNotification.lastId;
});
}
}
class NotificationWrapper {
constructor(notification: Notification, provider: AccountInfo) {
this.type = notification.type;
switch(this.type){
case 'mention':
case 'reblog':
case 'favourite':
this.status= new StatusWrapper(notification.status, provider);
break;
}
this.account = notification.account;
}
account: Account;
status: StatusWrapper;
type: 'mention' | 'reblog' | 'favourite' | 'follow';
}

4
src/sass/_variables.scss
View File

@ -47,3 +47,7 @@ $button-color: darken(white, 30);
$button-color-hover: white;
$button-background-color: $color-primary;
$button-background-color-hover: lighten($color-primary, 20);
$column-background: #0f111a;