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

added animation when fetching relationship

This commit is contained in:
Nicolas Constant 2019-08-05 19:10:58 -04:00
parent 0ce6cf8d4b
commit 1351a06eb8
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/components/stream/user-profile/user-profile.component.html
View File

@ -2,7 +2,9 @@
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation> <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
<div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved"> <div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved">
{{displayedAccount | accountEmoji }} has moved to <a href (click)="browseAccount(displayedAccount.moved.acct)" class="profile__moved--link" title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a> {{displayedAccount | accountEmoji }} has moved to <a href (click)="browseAccount(displayedAccount.moved.acct)"
class="profile__moved--link"
title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a>
</div> </div>
<div *ngIf="displayedAccount" class="profile-header" <div *ngIf="displayedAccount" class="profile-header"
@ -12,24 +14,30 @@
<img class="profile-header__avatar" [class.profile__disabled]="displayedAccount.moved" <img class="profile-header__avatar" [class.profile__disabled]="displayedAccount.moved"
src="{{displayedAccount.avatar}}" alt="header" /> src="{{displayedAccount.avatar}}" alt="header" />
</a> </a>
<h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}" title="{{displayedAccount.display_name}}"></h2> <h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
<h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}" target="_blank" title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2> title="{{displayedAccount.display_name}}"></h2>
<h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}" target="_blank"
title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
<div class="profile-header__follow" *ngIf="relationship && !displayedAccount.moved"> <div class="profile-header__follow" *ngIf="relationship && !displayedAccount.moved">
<button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow" <app-waiting-animation *ngIf="loadingRelationShip" class="waiting-icon profile-header__follow--waiting"></app-waiting-animation>
(click)="follow()" *ngIf="!relationship.following && !relationship.requested">
<fa-icon [icon]="faUserRegular"></fa-icon> <div *ngIf="!loadingRelationShip">
</button> <button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
<button class="profile-header__follow--button profile-header__follow--followed" title="unfollow" (click)="follow()" *ngIf="!relationship.following && !relationship.requested">
(click)="unfollow()" *ngIf="relationship.following"> <fa-icon [icon]="faUserRegular"></fa-icon>
<fa-icon [icon]="faUserCheck"></fa-icon> </button>
</button> <button class="profile-header__follow--button profile-header__follow--followed" title="unfollow"
<button class="profile-header__follow--button profile-header__follow--followed" title="pending" (click)="unfollow()" *ngIf="relationship.following">
(click)="unfollow()" *ngIf="relationship.requested"> <fa-icon [icon]="faUserCheck"></fa-icon>
<fa-icon [icon]="faHourglassHalf"></fa-icon> </button>
</button> <button class="profile-header__follow--button profile-header__follow--followed" title="pending"
(click)="unfollow()" *ngIf="relationship.requested">
<fa-icon [icon]="faHourglassHalf"></fa-icon>
</button>
</div>
</div> </div>
<div class="profile-header__state" *ngIf="relationship && !displayedAccount.moved"> <div class="profile-header__state" *ngIf="relationship && !displayedAccount.moved && !loadingRelationShip">
<div class="profile-header__state--data" *ngIf="relationship.followed_by">follows you</div> <div class="profile-header__state--data" *ngIf="relationship.followed_by">follows you</div>
<div class="profile-header__state--data" *ngIf="relationship.blocking">blocked</div> <div class="profile-header__state--data" *ngIf="relationship.blocking">blocked</div>
<div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div> <div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div>

6
src/app/components/stream/user-profile/user-profile.component.scss
View File

@ -104,6 +104,12 @@ $header-height: 160px;
color: #5fbcff; color: #5fbcff;
color: #85ccff; color: #85ccff;
} }
&--waiting {
position: relative;
top: -5px;
left: 6px;
}
} }
&__state { &__state {

15
src/app/components/stream/user-profile/user-profile.component.ts
View File

@ -33,6 +33,7 @@ export class UserProfileComponent implements OnInit {
note: string; note: string;
isLoading: boolean; isLoading: boolean;
loadingRelationShip = false;
private maxReached = false; private maxReached = false;
private maxId: string; private maxId: string;
@ -76,12 +77,16 @@ export class UserProfileComponent implements OnInit {
if (this.displayedAccount) { if (this.displayedAccount) {
const userAccount = accounts.filter(x => x.isSelected)[0]; const userAccount = accounts.filter(x => x.isSelected)[0];
this.loadingRelationShip = true;
this.toolsService.findAccount(userAccount, this.lastAccountName) this.toolsService.findAccount(userAccount, this.lastAccountName)
.then((account: Account) => { .then((account: Account) => {
this.getFollowStatus(userAccount, account); return this.getFollowStatus(userAccount, account);
}) })
.catch((err: HttpErrorResponse) => { .catch((err: HttpErrorResponse) => {
this.notificationService.notifyHttpError(err); this.notificationService.notifyHttpError(err);
})
.then(() => {
this.loadingRelationShip = false;
}); });
} }
}); });
@ -165,10 +170,16 @@ export class UserProfileComponent implements OnInit {
} }
private getFollowStatus(userAccount: AccountInfo, account: Account): Promise<void> { private getFollowStatus(userAccount: AccountInfo, account: Account): Promise<void> {
// this.relationship = null; this.loadingRelationShip = true;
return this.mastodonService.getRelationships(userAccount, [account]) return this.mastodonService.getRelationships(userAccount, [account])
.then((result: Relationship[]) => { .then((result: Relationship[]) => {
this.relationship = result.filter(x => x.id === account.id)[0]; this.relationship = result.filter(x => x.id === account.id)[0];
})
.catch(err => {
this.notificationService.notifyHttpError(err);
})
.then(() => {
this.loadingRelationShip = false;
}); });
} }