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

candid integration of fav/boost in status #55

This commit is contained in:
Nicolas Constant 2019-04-01 23:32:07 -04:00
parent 792cf71352
commit e6237ca0d3
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 140 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<div class="stream flexcroll" #statusstream (scroll)="onScroll()">
<div class="stream__notification" *ngFor="let notification of notifications">
<div *ngIf="notification.type === 'favourite'">
<!-- <div *ngIf="notification.type === 'favourite'">
<div class="stream__notification--icon">
<fa-icon class="favorite" [icon]="faStar"></fa-icon>
</div>
@ -16,20 +16,24 @@
<div class="stream__notification--label">
<a href class="stream__link">{{ notification.account.username }}</a> boosted your status
</div>
</div>
</div> -->
<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!
<a href class="stream__link">{{ notification.account.display_name }}</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>
<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>
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>

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

@ -43,18 +43,10 @@
&__status {
display: block;
opacity: 0.65;
// opacity: 0.65;
}
}
.boost {
color: $boost-color;
}
.favorite {
color: $favorite-color;
}
.followed {
color: $boost-color;
}

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

@ -19,8 +19,8 @@ import { OpenThreadEvent } from '../../../../services/tools.service';
})
export class NotificationsComponent implements OnInit, OnDestroy {
faUserPlus = faUserPlus;
faStar = faStar;
faRetweet = faRetweet;
// faStar = faStar;
// faRetweet = faRetweet;
notifications: NotificationWrapper[] = [];
isLoading = false;

114
src/app/components/stream/status/status.component.html
View File

@ -2,53 +2,75 @@
<a class="reblog__profile-link" href (click)="openAccount(status.account)">{{ status.account.display_name }} <img
*ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
</div>
<div *ngIf="notificationType === 'favourite'">
<div class="notification--icon">
<fa-icon class="favorite" [icon]="faStar"></fa-icon>
</div>
<div class="notification--label">
<a href class="notification--link"
(click)="openAccount(notificationAccount)">{{ notificationAccount.display_name }}</a> favorited your status
</div>
</div>
<div *ngIf="notificationType === 'reblog'">
<div class="notification--icon">
<fa-icon class="boost" [icon]="faRetweet"></fa-icon>
</div>
<div class="notification--label">
<a href class="notification--link" (click)="openAccount(notificationAccount)">{{ notificationAccount.display_name }}</a> boosted your status
</div>
</div>
<div class="status">
<a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
(click)="openAccount(displayedStatus.account)">
<img [class.status__avatar--boosted]="reblog" class="status__avatar"
src="{{ displayedStatus.account.avatar }}" />
<!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
<span class="status__name">
<span class="status__name--displayname" innerHTML="{{displayedStatus.account.display_name}}"></span><span
class="status__name--username">{{displayedStatus.account.acct}}</span>
</span>
</a>
<div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
<a class="status__created-at--link" href="{{ displayedStatus.url }}" target="_blank">
{{ status.created_at | timeAgo | async }}
<div [ngClass]="{'notification--status': notificationAccount }">
<a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
(click)="openAccount(displayedStatus.account)">
<img [class.status__avatar--boosted]="reblog || notificationAccount" class="status__avatar"
src="{{ displayedStatus.account.avatar }}" />
<!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
<img *ngIf="notificationAccount" class="notification--avatar" src="{{ notificationAccount.avatar }}" />
<span class="status__name">
<span class="status__name--displayname"
innerHTML="{{displayedStatus.account.display_name}}"></span><span
class="status__name--username">{{displayedStatus.account.acct}}</span>
</span>
</a>
<div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
<a class="status__created-at--link" href="{{ displayedStatus.url }}" target="_blank">
{{ status.created_at | timeAgo | async }}
</a>
</div>
<div class="status__labels">
<div class="status__labels--label status__labels--bot" title="bot" *ngIf="status.account.bot">
bot
</div>
<div class="status__labels--label status__labels--xpost" title="this status was cross-posted"
*ngIf="isCrossPoster">
x-post
</div>
<div class="status__labels--label status__labels--thread" title="thread" *ngIf="isThread">
thread
</div>
<div class="status__labels--label status__labels--discuss" title="this status has a discution"
*ngIf="hasReply">
replies
</div>
</div>
<!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
<a href class="status__content-warning" *ngIf="isContentWarned" title="show content"
(click)="removeContentWarning()">
<span class="status__content-warning--title">sensitive content</span>
{{ contentWarningText }}
</a>
<app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="displayedStatus.content"
(accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
(textSelected)="textSelected()"></app-databinded-text>
<app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
[attachments]="displayedStatus.media_attachments">
</app-attachements>
<app-action-bar #appActionBar [statusWrapper]="statusWrapper" (cwIsActiveEvent)="changeCw($event)"
(replyEvent)="openReply()"></app-action-bar>
</div>
<div class="status__labels">
<div class="status__labels--label status__labels--bot" title="bot" *ngIf="status.account.bot">
bot
</div>
<div class="status__labels--label status__labels--xpost" title="this status was cross-posted" *ngIf="isCrossPoster">
x-post
</div>
<div class="status__labels--label status__labels--thread" title="thread" *ngIf="isThread">
thread
</div>
<div class="status__labels--label status__labels--discuss" title="this status has a discution" *ngIf="hasReply">
replies
</div>
</div>
<!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
<a href class="status__content-warning" *ngIf="isContentWarned" title="show content"
(click)="removeContentWarning()">
<span class="status__content-warning--title">sensitive content</span>
{{ contentWarningText }}
</a>
<app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="displayedStatus.content"
(accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
(textSelected)="textSelected()"></app-databinded-text>
<app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
[attachments]="displayedStatus.media_attachments">
</app-attachements>
<app-action-bar #appActionBar [statusWrapper]="statusWrapper" (cwIsActiveEvent)="changeCw($event)"
(replyEvent)="openReply()"></app-action-bar>
<app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()"></app-create-status>
<app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper"
(onClose)="closeReply()"></app-create-status>
</div>

51
src/app/components/stream/status/status.component.scss
View File

@ -153,4 +153,53 @@
.attachments {
display: block; // width: calc(100% - 80px);
margin: 10px 10px 0 $avatar-column-space;
}
}
.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;
}
&--link {
color: $status-links-color;
}
&--status:not(.reply-section) {
opacity: 0.65;
}
&--avatar {
position: absolute;
top: 35px;
left: 30px;
width: 30px;
height: 30px;
border-radius: 2px;
z-index: 10;
}
// &:not(:last-child) {
// border: solid #06070b;
// border-width: 0 0 1px 0;
// }
}
.boost {
color: $boost-color;
}
.favorite {
color: $favorite-color;
}

10
src/app/components/stream/status/status.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from "@angular/core";
import { faStar, faRetweet } from "@fortawesome/free-solid-svg-icons";
import { Status, Account } from "../../../services/models/mastodon.interfaces";
import { OpenThreadEvent } from "../../../services/tools.service";
import { ActionBarComponent } from "./action-bar/action-bar.component";
@ -10,6 +12,9 @@ import { StatusWrapper } from '../../../models/common.model';
styleUrls: ["./status.component.scss"]
})
export class StatusComponent implements OnInit {
faStar = faStar;
faRetweet = faRetweet;
displayedStatus: Status;
reblog: boolean;
hasAttachments: boolean;
@ -27,6 +32,9 @@ export class StatusComponent implements OnInit {
@Input() isThreadDisplay: boolean;
@Input() notificationType: 'mention' | 'reblog' | 'favourite';
@Input() notificationAccount: Account;
private _statusWrapper: StatusWrapper;
status: Status;
@Input('statusWrapper')
@ -92,7 +100,7 @@ export class StatusComponent implements OnInit {
}
}
if(this.isThreadDisplay) return;
if (this.isThreadDisplay) return;
if (status.in_reply_to_account_id && status.in_reply_to_account_id === status.account.id) {
this.isThread = true;