added icons

This commit is contained in:
Nicolas Constant 2019-03-27 23:11:10 -04:00
parent dc209ec618
commit f49aa2266c
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 31 additions and 5 deletions

View File

@ -2,7 +2,7 @@
<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
@ -11,7 +11,7 @@
<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
@ -20,7 +20,7 @@
<div *ngIf="notification.type === 'follow'">
<div class="stream__notification--icon">
<fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
</div>
<div class="stream__notification--label">
<a href class="stream__link">{{ notification.account.username }}</a> followed you!

View File

@ -14,8 +14,16 @@
}
&__notification {
position: relative;
&--icon {}
&--icon {
position: absolute;
top: 5px;
left: 43px;
text-align: center;
width: 20px;
// outline: 1px dotted greenyellow;
}
&--label {
margin: 0 10px 0 $avatar-column-space;
@ -35,6 +43,18 @@
&__status {
display: block;
opacity: 0.6;
opacity: 0.55;
}
}
.boost {
color: $boost-color;
}
.favorite {
color: $favorite-color;
}
.followed {
color: $boost-color;
}

View File

@ -1,5 +1,7 @@
import { Component, OnInit, Input, ViewChild, ElementRef, OnDestroy } 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';
@ -15,6 +17,10 @@ import { AccountInfo } from '../../../../states/accounts.state';
styleUrls: ['./notifications.component.scss']
})
export class NotificationsComponent implements OnInit, OnDestroy {
faUserPlus = faUserPlus;
faStar = faStar;
faRetweet = faRetweet;
notifications: NotificationWrapper[] = [];
isLoading = false;