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

View File

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