added sections menu

This commit is contained in:
Nicolas Constant 2019-08-08 22:11:12 -04:00
parent 5697445c08
commit c320518159
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 78 additions and 3 deletions

View File

@ -1,6 +1,7 @@
<div class="outer-profile">
<div class="profile flexcroll" #statusstream (scroll)="onScroll()">
<div *ngIf="!isLoading" class="profile__floating-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}"
<div *ngIf="!isLoading" class="profile__floating-header"
[ngStyle]="{'background-image':'url('+displayedAccount.header+')'}"
[class.profile__floating-header__activated]="showFloatingHeader">
<div class="profile__floating-header__inner">
<a href (click)="showAvatar(displayedAccount.avatar)" (auxclick)="openAccount()" title="open avatar">
@ -36,7 +37,7 @@
</div>
</div>
</div>
</div>
</div>
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
@ -44,7 +45,7 @@
{{displayedAccount | accountEmoji }} has moved to <a href
(click)="openMigratedAccount(displayedAccount.moved)" class="profile__moved--link"
title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a>
</div>
</div>
<div *ngIf="displayedAccount" class="profile-header"
[ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
@ -101,6 +102,23 @@
</app-databinded-text>
</div>
<div class="profile__extra-info">
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchProfileSection('fields')"
[class.profile__extra-info__links--selected]="profileSection === 'fields'">Fields</a>
</div>
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchProfileSection('choices')"
[class.profile__extra-info__links--selected]="profileSection === 'choices'">User choices</a>
</div>
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchProfileSection('hashtags')"
[class.profile__extra-info__links--selected]="profileSection === 'hashtags'">Hashtags</a>
</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"
@ -115,6 +133,24 @@
</div>
<div class="profile-statuses">
<div class="profile__extra-info">
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchStatusSection('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>
</div>
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links"
(click)="switchStatusSection('media')"
[class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
</div>
</div>
<div *ngIf="!isLoading && !statusLoading && statuses.length == 0" class="profile-no-toots">
no status found
</div>

View File

@ -241,6 +241,32 @@ $full-alias-color-hover: white;
}
}
&__extra-info {
background-color: #20273a;
background-color: #141824;
background-color: #1a1f2e;
font-size: 13px;
&__section {
text-align: center;
display: inline-block;
width: calc(33.333% - 5px);
padding: 5px 0 7px 0;
&:not(:last-child) {
margin-right: 5px;
}
}
&__links {
color: white;
&--selected {
text-decoration: underline;
}
}
}
&-fields {
font-size: 13px;
border-bottom: 1px solid black;

View File

@ -45,6 +45,9 @@ export class UserProfileComponent implements OnInit {
statuses: StatusWrapper[] = [];
pinnedStatuses: StatusWrapper[] = [];
profileSection: 'fields' | 'choices' | 'hashtags' = 'fields';
statusSection: 'status' | 'replies' | 'media' = 'status';
private lastAccountName: string;
private currentlyUsedAccount: AccountInfo;
@ -309,4 +312,14 @@ export class UserProfileComponent implements OnInit {
window.open(this.displayedAccount.url, '_blank');
return false;
}
switchProfileSection(section: 'fields' | 'choices' | 'hashtags'): boolean{
this.profileSection = section;
return false;
}
switchStatusSection(section: 'status' | 'replies' | 'media'): boolean{
this.statusSection = section;
return false;
}
}