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

added notification in component

This commit is contained in:
Nicolas Constant 2019-11-18 23:54:11 -05:00
parent 3e9bd59a7f
commit bd11d1dfea
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
8 changed files with 253 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -78,6 +78,7 @@ import { PollEntryComponent } from './components/create-status/poll-editor/poll-
import { ScheduledStatusesComponent } from './components/floating-column/scheduled-statuses/scheduled-statuses.component';
import { ScheduledStatusComponent } from './components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component';
import { StreamNotificationsComponent } from './components/stream/stream-notifications/stream-notifications.component';
import { NotificationComponent } from './components/floating-column/manage-account/notifications/notification/notification.component';
const routes: Routes = [
@ -138,7 +139,8 @@ const routes: Routes = [
PollEntryComponent,
ScheduledStatusesComponent,
ScheduledStatusComponent,
StreamNotificationsComponent
StreamNotificationsComponent,
NotificationComponent
],
entryComponents: [
EmojiPickerComponent

26
src/app/components/floating-column/manage-account/notifications/notification/notification.component.html Normal file
View File

@ -0,0 +1,26 @@
<div class="notification">
<div *ngIf="notification.type === 'follow'">
<div class="stream__notification--icon" title="{{notification.account.acct}}">
<fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
</div>
<div class="stream__notification--label">
<a href class="stream__link" title="{{notification.account.acct}}"
(click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
innerHTML="{{ notification.account | accountEmoji }}"></a>
followed
you!
</div>
<a href (click)="openAccount(notification.account)" (auxclick)="openUrl(notification.account.url)"
class="follow-account" title="{{notification.account.acct}}">
<img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
<span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></span>
<span class="follow-account__acct">@{{ notification.account.acct }}</span>
</a>
</div>
<app-status *ngIf="notification.status" class="stream__status" [statusWrapper]="notification.status"
[notificationAccount]="notification.account" [notificationType]="notification.type"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-status>
</div>

85
src/app/components/floating-column/manage-account/notifications/notification/notification.component.scss Normal file
View File

@ -0,0 +1,85 @@
@import "variables";
@import "commons";
@import "mixins";
.notification {
position: relative;
}
.stream {
position: relative;
&__notification {
position: relative;
&--icon {
position: absolute;
top: 5px;
left: 43px;
text-align: center;
width: 20px;
// outline: 1px dotted greenyellow;
}
&--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.65;
}
}
.followed {
color: $boost-color;
}
.follow-account {
padding: 5px;
height: 60px;
width: calc(100%);
overflow: hidden;
display: block;
position: relative;
text-decoration: none;
&__avatar {
float: left;
margin: 0 0 0 10px;
width: 45px;
height: 45px;
border-radius: 2px;
}
$acccount-info-left: 70px;
&__display-name {
position: absolute;
top: 7px;
left: $acccount-info-left;
color: whitesmoke;
}
&:hover &__display-name {
text-decoration: underline;
}
&__acct {
position: absolute;
top: 27px;
left: $acccount-info-left;
font-size: 13px;
color: $status-links-color;
}
}

25
src/app/components/floating-column/manage-account/notifications/notification/notification.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NotificationComponent } from './notification.component';
xdescribe('NotificationComponent', () => {
let component: NotificationComponent;
let fixture: ComponentFixture<NotificationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NotificationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NotificationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

49
src/app/components/floating-column/manage-account/notifications/notification/notification.component.ts Normal file
View File

@ -0,0 +1,49 @@
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
import { NotificationWrapper } from '../notifications.component';
import { OpenThreadEvent, ToolsService } from '../../../../../services/tools.service';
import { Account } from '../../../../../services/models/mastodon.interfaces';
@Component({
selector: 'app-notification',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
faUserPlus = faUserPlus;
@Input() notification: NotificationWrapper;
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
constructor(private readonly toolsService: ToolsService) { }
ngOnInit() {
}
browseAccount(accountName: string): void {
this.browseAccountEvent.next(accountName);
}
browseHashtag(hashtag: string): void {
this.browseHashtagEvent.next(hashtag);
}
browseThread(openThreadEvent: OpenThreadEvent): void {
this.browseThreadEvent.next(openThreadEvent);
}
openAccount(account: Account): boolean {
let accountName = this.toolsService.getAccountFullHandle(account);
this.browseAccountEvent.next(accountName);
return false;
}
openUrl(url: string): boolean {
window.open(url, '_blank');
return false;
}
}

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

@ -1,50 +1,6 @@
<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">
<fa-icon class="favorite" [icon]="faStar"></fa-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">
<fa-icon class="boost" [icon]="faRetweet"></fa-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" title="{{notification.account.acct}}">
<fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
</div>
<div class="stream__notification--label">
<a href class="stream__link"
title="{{notification.account.acct}}"
(click)="openAccount(notification.account)"
(auxclick)="openUrl(notification.account.url)"
innerHTML="{{ notification.account | accountEmoji }}"></a> followed
you!
</div>
<a href
(click)="openAccount(notification.account)"
(auxclick)="openUrl(notification.account.url)"
class="follow-account" title="{{notification.account.acct}}">
<img class="follow-account__avatar" src="{{ notification.account.avatar }}" />
<span class="follow-account__display-name" innerHTML="{{ notification.account | accountEmoji }}"></span>
<span class="follow-account__acct">@{{ notification.account.acct }}</span>
</a>
</div>
<app-status *ngIf="notification.status" class="stream__status" [statusWrapper]="notification.status"
[notificationAccount]="notification.account" [notificationType]="notification.type"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-status>
<app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-notification>
</div>
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>

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

@ -13,78 +13,78 @@
color: rgb(255, 113, 113);
}
&__notification {
position: relative;
// &__notification {
// position: relative;
&--icon {
position: absolute;
top: 5px;
left: 43px;
text-align: center;
width: 20px;
// outline: 1px dotted greenyellow;
}
// &--icon {
// position: absolute;
// top: 5px;
// left: 43px;
// text-align: center;
// width: 20px;
// // outline: 1px dotted greenyellow;
// }
&--label {
margin: 0 10px 0 $avatar-column-space;
padding-top: 5px;
}
// &--label {
// margin: 0 10px 0 $avatar-column-space;
// padding-top: 5px;
// }
&:not(:last-child) {
border: solid #06070b;
border-width: 0 0 1px 0;
}
}
// &:not(:last-child) {
// border: solid #06070b;
// border-width: 0 0 1px 0;
// }
// }
&__link {
color: $status-links-color;
}
// &__link {
// color: $status-links-color;
// }
&__status {
display: block;
// opacity: 0.65;
}
// &__status {
// display: block;
// // opacity: 0.65;
// }
}
.followed {
color: $boost-color;
}
// .followed {
// color: $boost-color;
// }
.follow-account {
padding: 5px;
height: 60px;
width: calc(100%);
overflow: hidden;
display: block;
position: relative;
text-decoration: none;
// .follow-account {
// padding: 5px;
// height: 60px;
// width: calc(100%);
// overflow: hidden;
// display: block;
// position: relative;
// text-decoration: none;
&__avatar {
float: left;
margin: 0 0 0 10px;
width: 45px;
height: 45px;
border-radius: 2px;
}
// &__avatar {
// float: left;
// margin: 0 0 0 10px;
// width: 45px;
// height: 45px;
// border-radius: 2px;
// }
$acccount-info-left: 70px;
&__display-name {
position: absolute;
top: 7px;
left: $acccount-info-left;
color: whitesmoke;
}
// $acccount-info-left: 70px;
// &__display-name {
// position: absolute;
// top: 7px;
// left: $acccount-info-left;
// color: whitesmoke;
// }
&:hover &__display-name {
text-decoration: underline;
}
// &:hover &__display-name {
// text-decoration: underline;
// }
&__acct {
position: absolute;
top: 27px;
left: $acccount-info-left;
font-size: 13px;
color: $status-links-color;
}
}
// &__acct {
// position: absolute;
// top: 27px;
// left: $acccount-info-left;
// font-size: 13px;
// color: $status-links-color;
// }
// }

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

@ -1,7 +1,5 @@
import { Component, OnInit, Input, ViewChild, ElementRef, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs';
import { faStar, faUserPlus, faRetweet } from "@fortawesome/free-solid-svg-icons";
import { faStar as faStar2 } from "@fortawesome/free-regular-svg-icons";
import { AccountWrapper } from '../../../../models/account.models';
import { UserNotificationService, UserNotification } from '../../../../services/user-notification.service';
@ -18,10 +16,6 @@ import { OpenThreadEvent, ToolsService } from '../../../../services/tools.servic
styleUrls: ['./notifications.component.scss']
})
export class NotificationsComponent implements OnInit, OnDestroy {
faUserPlus = faUserPlus;
// faStar = faStar;
// faRetweet = faRetweet;
notifications: NotificationWrapper[] = [];
isLoading = false;
@ -45,8 +39,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
private userNotificationServiceSub: Subscription;
private lastId: string;
constructor(
private readonly toolsService: ToolsService,
constructor(
private readonly notificationService: NotificationService,
private readonly userNotificationService: UserNotificationService,
private readonly mastodonService: MastodonWrapperService) { }
@ -125,17 +118,6 @@ export class NotificationsComponent implements OnInit, OnDestroy {
this.isLoading = false;
});
}
openAccount(account: Account): boolean {
let accountName = this.toolsService.getAccountFullHandle(account);
this.browseAccountEvent.next(accountName);
return false;
}
openUrl(url: string): boolean {
window.open(url, '_blank');
return false;
}
browseAccount(accountName: string): void {
this.browseAccountEvent.next(accountName);
@ -150,7 +132,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
}
}
class NotificationWrapper {
export class NotificationWrapper {
constructor(notification: Notification, provider: AccountInfo) {
this.type = notification.type;
switch(this.type){