status section menu functional

This commit is contained in:
Nicolas Constant 2019-08-08 22:41:59 -04:00
parent c320518159
commit 78d3cc9631
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 55 additions and 34 deletions

View File

@ -102,7 +102,7 @@
</app-databinded-text>
</div>
<div class="profile__extra-info">
<!-- <div class="profile__extra-info">
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchProfileSection('fields')"
@ -118,14 +118,14 @@
(click)="switchProfileSection('hashtags')"
[class.profile__extra-info__links--selected]="profileSection === 'hashtags'">Hashtags</a>
</div>
</div>
</div> -->
<div class="profile-fields" *ngIf="displayedAccount.fields.length > 0">
<div class="profile-fields__field" *ngFor="let field of displayedAccount.fields">
<div class="profile-fields__field--value"
innerHTML="{{ displayedAccount | accountEmoji:field.value}}"
[ngClass]="{'profile-fields__field--validated': field.verified_at }">
</div>
<div class="profile-fields__field--name">
<div class="profile-fields__field--name" title="{{ field.name }}">
{{ field.name }}
</div>
</div>
@ -133,20 +133,20 @@
</div>
<div class="profile-statuses">
<div class="profile__extra-info">
<div class="profile__extra-info" *ngIf="!isLoading">
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchStatusSection('status')"
<a href class="profile__extra-info__links" (click)="switchStatusSection('status')"
title="Status"
[class.profile__extra-info__links--selected]="statusSection === 'status'">Status</a>
</div>
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchStatusSection('replies')"
[class.profile__extra-info__links--selected]="statusSection === 'replies'">Status & Replies</a>
<a href class="profile__extra-info__links" (click)="switchStatusSection('replies')"
title="Status & Replies"
[class.profile__extra-info__links--selected]="statusSection === 'replies'">Status &
Replies</a>
</div>
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchStatusSection('media')"
<a href class="profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
[class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
</div>
</div>
@ -155,10 +155,12 @@
no status found
</div>
<div *ngFor="let statusWrapper of pinnedStatuses">
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
</app-status>
<div *ngIf="statusSection === 'status'">
<div *ngFor="let statusWrapper of pinnedStatuses">
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
</app-status>
</div>
</div>
<div *ngFor="let statusWrapper of statuses">

View File

@ -132,7 +132,7 @@ export class UserProfileComponent implements OnInit {
}
const getFollowStatusPromise = this.getFollowStatus(this.currentlyUsedAccount, this.displayedAccount);
const getStatusesPromise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount);
const getStatusesPromise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, null);
const getPinnedStatusesPromise = this.getPinnedStatuses(this.currentlyUsedAccount, this.displayedAccount);
return Promise.all([getFollowStatusPromise, getStatusesPromise, getPinnedStatusesPromise]);
@ -160,9 +160,10 @@ export class UserProfileComponent implements OnInit {
});
}
private getStatuses(userAccount: AccountInfo, account: Account): Promise<void> {
this.statusLoading = true;
return this.mastodonService.getAccountStatuses(userAccount, account.id, false, false, true, null, null, 20)
private getStatuses(userAccount: AccountInfo, account: Account, onlyMedia: boolean, excludeReplies: boolean, maxId: string): Promise<void> {
this.statusLoading = true;
return this.mastodonService.getAccountStatuses(userAccount, account.id, onlyMedia, false, excludeReplies, maxId, null, 20)
.then((statuses: Status[]) => {
this.loadStatus(userAccount, statuses);
})
@ -266,7 +267,7 @@ export class UserProfileComponent implements OnInit {
var element = this.statustream.nativeElement as HTMLElement;
const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000;
if(element.scrollTop > 150){
if (element.scrollTop > 150) {
this.showFloatingHeader = true;
} else {
this.showFloatingHeader = false;
@ -280,18 +281,21 @@ export class UserProfileComponent implements OnInit {
private scrolledToBottom() {
if (this.statusLoading || this.maxReached) return;
this.statusLoading = true;
const userAccount = this.currentlyUsedAccount;
this.mastodonService.getAccountStatuses(userAccount, this.displayedAccount.id, false, false, true, this.maxId, null, 20)
.then((statuses: Status[]) => {
this.loadStatus(userAccount, statuses);
})
.catch(err => {
this.notificationService.notifyHttpError(err);
})
.then(() => {
this.statusLoading = false;
});
const onlyMedia = this.statusSection === 'media';
const excludeReplies = this.statusSection === 'status';
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, onlyMedia, excludeReplies, this.maxId);
// this.mastodonService.getAccountStatuses(userAccount, this.displayedAccount.id, false, false, true, this.maxId, null, 20)
// .then((statuses: Status[]) => {
// this.loadStatus(userAccount, statuses);
// })
// .catch(err => {
// this.notificationService.notifyHttpError(err);
// })
// .then(() => {
// this.statusLoading = false;
// });
}
private loadStatus(userAccount: AccountInfo, statuses: Status[]) {
@ -313,13 +317,28 @@ export class UserProfileComponent implements OnInit {
return false;
}
switchProfileSection(section: 'fields' | 'choices' | 'hashtags'): boolean{
switchProfileSection(section: 'fields' | 'choices' | 'hashtags'): boolean {
this.profileSection = section;
return false;
}
switchStatusSection(section: 'status' | 'replies' | 'media'): boolean{
switchStatusSection(section: 'status' | 'replies' | 'media'): boolean {
this.statusSection = section;
this.statuses.length = 0;
this.maxId = null;
switch (section) {
case "status":
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, this.maxId);
break;
case "replies":
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, false, this.maxId);
break;
case "media":
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, true, true, this.maxId);
break;
}
return false;
}
}