creation of follow-request UI
This commit is contained in:
Nicolas Constant
parent
23abf0e0b7
commit
d67ef4aaf2
|
|
@ -1,4 +1,35 @@
|
|||
<div class="notification">
|
||||
<div *ngIf="notification.type === 'follow_request'">
|
||||
<div class="stream__notification--icon" title="{{notification.account.acct}}">
|
||||
<fa-icon class="followed" [icon]="faUserClock"></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>
|
||||
submited a follow request
|
||||
</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 class="follow_request">
|
||||
<a href title="Authorize" class="follow_request__link follow_request__link--check"
|
||||
(click)="acceptFollowRequest()">
|
||||
<fa-icon class="follow_request__icon" [icon]="faCheck"></fa-icon>
|
||||
</a>
|
||||
<a href title="Reject" class="follow_request__link follow_request__link--cross"
|
||||
(click)="refuseFollowRequest()">
|
||||
<fa-icon class="follow_request__icon" [icon]="faTimes"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="notification.type === 'follow'">
|
||||
<div class="stream__notification--icon" title="{{notification.account.acct}}">
|
||||
<fa-icon class="followed" [icon]="faUserPlus"></fa-icon>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
color: $boost-color;
|
||||
}
|
||||
|
||||
$acccount-info-left: 70px;
|
||||
.follow-account {
|
||||
padding: 5px;
|
||||
height: 60px;
|
||||
|
|
@ -62,8 +63,7 @@
|
|||
height: 45px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
$acccount-info-left: 70px;
|
||||
|
||||
&__display-name {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
|
|
@ -81,5 +81,44 @@
|
|||
left: $acccount-info-left;
|
||||
font-size: 13px;
|
||||
color: $status-links-color;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
width: calc(100% - #{$acccount-info-left});
|
||||
}
|
||||
}
|
||||
|
||||
.follow_request {
|
||||
width: calc(100% - #{$acccount-info-left});
|
||||
margin-left: $acccount-info-left;
|
||||
|
||||
&__link {
|
||||
display: inline-block;
|
||||
width: calc(50%);
|
||||
padding: 2px;
|
||||
|
||||
text-align: center;
|
||||
color: rgb(219, 219, 219);
|
||||
transition: all .2s;
|
||||
|
||||
// outline: 1px dotted greenyellow;
|
||||
|
||||
&--check {
|
||||
&:hover {
|
||||
color: greenyellow;
|
||||
}
|
||||
}
|
||||
|
||||
&--cross {
|
||||
&:hover {
|
||||
color: orangered;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faUserPlus, faUserClock, faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { NotificationWrapper } from '../notifications.component';
|
||||
import { ToolsService } from '../../../../../services/tools.service';
|
||||
|
|
@ -13,6 +13,9 @@ import { BrowseBase } from '../../../../../components/common/browse-base';
|
|||
})
|
||||
export class NotificationComponent extends BrowseBase {
|
||||
faUserPlus = faUserPlus;
|
||||
faUserClock = faUserClock;
|
||||
faCheck = faCheck;
|
||||
faTimes = faTimes;
|
||||
|
||||
@Input() notification: NotificationWrapper;
|
||||
|
||||
|
|
@ -36,4 +39,14 @@ export class NotificationComponent extends BrowseBase {
|
|||
window.open(url, '_blank');
|
||||
return false;
|
||||
}
|
||||
|
||||
acceptFollowRequest(): boolean{
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
refuseFollowRequest(): boolean{
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,5 +164,5 @@ export class NotificationWrapper {
|
|||
wrapperId: string;
|
||||
account: Account;
|
||||
status: StatusWrapper;
|
||||
type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll';
|
||||
type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll' | 'follow_request';
|
||||
}
|
||||
|
|
@ -128,6 +128,8 @@ export class StreamNotificationsComponent extends BrowseBase {
|
|||
|
||||
this.mastodonService.getNotifications(this.account, null, null, null, 10)
|
||||
.then((notifications: Notification[]) => {
|
||||
console.warn(notifications);
|
||||
|
||||
this.isNotificationsLoading = false;
|
||||
|
||||
this.notifications = notifications.map(x => {
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ export interface Mention {
|
|||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll';
|
||||
type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll' | 'follow_request';
|
||||
created_at: string;
|
||||
account: Account;
|
||||
status?: Status;
|
||||
|
|
|
|||
Loading…
Reference in New Issue