added notification in component
This commit is contained in:
Nicolas Constant
parent
3e9bd59a7f
commit
bd11d1dfea
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
|
||||
// &__status {
|
||||
// display: block;
|
||||
// // opacity: 0.65;
|
||||
// }
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $status-links-color;
|
||||
}
|
||||
// .followed {
|
||||
// color: $boost-color;
|
||||
// }
|
||||
|
||||
&__status {
|
||||
display: block;
|
||||
// opacity: 0.65;
|
||||
}
|
||||
}
|
||||
// .follow-account {
|
||||
// padding: 5px;
|
||||
// height: 60px;
|
||||
// width: calc(100%);
|
||||
// overflow: hidden;
|
||||
// display: block;
|
||||
// position: relative;
|
||||
// text-decoration: none;
|
||||
|
||||
.followed {
|
||||
color: $boost-color;
|
||||
}
|
||||
// &__avatar {
|
||||
// float: left;
|
||||
// margin: 0 0 0 10px;
|
||||
// width: 45px;
|
||||
// height: 45px;
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
|
||||
.follow-account {
|
||||
padding: 5px;
|
||||
height: 60px;
|
||||
width: calc(100%);
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
// $acccount-info-left: 70px;
|
||||
// &__display-name {
|
||||
// position: absolute;
|
||||
// top: 7px;
|
||||
// left: $acccount-info-left;
|
||||
// color: whitesmoke;
|
||||
// }
|
||||
|
||||
&__avatar {
|
||||
float: left;
|
||||
margin: 0 0 0 10px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// &:hover &__display-name {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
|
||||
$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;
|
||||
}
|
||||
}
|
||||
// &__acct {
|
||||
// position: absolute;
|
||||
// top: 27px;
|
||||
// left: $acccount-info-left;
|
||||
// font-size: 13px;
|
||||
// color: $status-links-color;
|
||||
// }
|
||||
// }
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
@ -46,7 +40,6 @@ export class NotificationsComponent implements OnInit, OnDestroy {
|
|||
private lastId: string;
|
||||
|
||||
constructor(
|
||||
private readonly toolsService: ToolsService,
|
||||
private readonly notificationService: NotificationService,
|
||||
private readonly userNotificationService: UserNotificationService,
|
||||
private readonly mastodonService: MastodonWrapperService) { }
|
||||
|
|
@ -126,17 +119,6 @@ export class NotificationsComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
|
||||
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){
|
||||
|
|
|
|||
Loading…
Reference in New Issue