created a floating header
This commit is contained in:
Nicolas Constant
parent
1351a06eb8
commit
c38db1d1e1
|
|
@ -1,90 +1,104 @@
|
||||||
<div class="profile flexcroll" #statusstream (scroll)="onScroll()">
|
<div class="outer-profile">
|
||||||
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
<div class="profile flexcroll" #statusstream (scroll)="onScroll()">
|
||||||
|
<div class="profile__floating-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}"
|
||||||
<div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved">
|
[class.profile__floating-header__activated]="showFloatingHeader">
|
||||||
{{displayedAccount | accountEmoji }} has moved to <a href (click)="browseAccount(displayedAccount.moved.acct)"
|
<div class="profile__floating-header__inner">
|
||||||
class="profile__moved--link"
|
FLOATING HEADER
|
||||||
title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div *ngIf="displayedAccount" class="profile-header"
|
|
||||||
[ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
|
|
||||||
<div class="profile-header__inner">
|
|
||||||
<a href (click)="showAvatar(displayedAccount.avatar)" (auxclick)="openAccount()" title="open avatar">
|
|
||||||
<img class="profile-header__avatar" [class.profile__disabled]="displayedAccount.moved"
|
|
||||||
src="{{displayedAccount.avatar}}" alt="header" />
|
|
||||||
</a>
|
|
||||||
<h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
|
|
||||||
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">
|
|
||||||
<app-waiting-animation *ngIf="loadingRelationShip" class="waiting-icon profile-header__follow--waiting"></app-waiting-animation>
|
|
||||||
|
|
||||||
<div *ngIf="!loadingRelationShip">
|
|
||||||
<button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
|
|
||||||
(click)="follow()" *ngIf="!relationship.following && !relationship.requested">
|
|
||||||
<fa-icon [icon]="faUserRegular"></fa-icon>
|
|
||||||
</button>
|
|
||||||
<button class="profile-header__follow--button profile-header__follow--followed" title="unfollow"
|
|
||||||
(click)="unfollow()" *ngIf="relationship.following">
|
|
||||||
<fa-icon [icon]="faUserCheck"></fa-icon>
|
|
||||||
</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 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.blocking">blocked</div>
|
|
||||||
<div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div>
|
|
||||||
<div class="profile-header__state--data" *ngIf="relationship.domain_blocking">domain blocked</div>
|
|
||||||
<div class="profile-header__state--data" *ngIf="relationship.muting">muted</div>
|
|
||||||
<div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications muted
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="profile-sub-header ">
|
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
||||||
<div *ngIf="displayedAccount && hasNote" class="profile-description">
|
|
||||||
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="note"
|
<div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved">
|
||||||
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
|
{{displayedAccount | accountEmoji }} has moved to <a href
|
||||||
</app-databinded-text>
|
(click)="browseAccount(displayedAccount.moved.acct)" class="profile__moved--link"
|
||||||
|
title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="profile-fields" *ngIf="displayedAccount && displayedAccount.fields.length > 0">
|
|
||||||
<div class="profile-fields__field" *ngFor="let field of displayedAccount.fields">
|
<div *ngIf="displayedAccount" class="profile-header"
|
||||||
<div class="profile-fields__field--value" innerHTML="{{ displayedAccount | accountEmoji:field.value}}"
|
[ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
|
||||||
[ngClass]="{'profile-fields__field--validated': field.verified_at }">
|
<div class="profile-header__inner">
|
||||||
|
<a href (click)="showAvatar(displayedAccount.avatar)" (auxclick)="openAccount()" title="open avatar">
|
||||||
|
<img class="profile-header__avatar" [class.profile__disabled]="displayedAccount.moved"
|
||||||
|
src="{{displayedAccount.avatar}}" alt="header" />
|
||||||
|
</a>
|
||||||
|
<h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
|
||||||
|
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">
|
||||||
|
<app-waiting-animation *ngIf="loadingRelationShip"
|
||||||
|
class="waiting-icon profile-header__follow--waiting">
|
||||||
|
</app-waiting-animation>
|
||||||
|
|
||||||
|
<div *ngIf="!loadingRelationShip">
|
||||||
|
<button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
|
||||||
|
(click)="follow()" *ngIf="!relationship.following && !relationship.requested">
|
||||||
|
<fa-icon [icon]="faUserRegular"></fa-icon>
|
||||||
|
</button>
|
||||||
|
<button class="profile-header__follow--button profile-header__follow--followed" title="unfollow"
|
||||||
|
(click)="unfollow()" *ngIf="relationship.following">
|
||||||
|
<fa-icon [icon]="faUserCheck"></fa-icon>
|
||||||
|
</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-fields__field--name">
|
<div class="profile-header__state"
|
||||||
{{ field.name }}
|
*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.blocking">blocked</div>
|
||||||
|
<div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div>
|
||||||
|
<div class="profile-header__state--data" *ngIf="relationship.domain_blocking">domain blocked</div>
|
||||||
|
<div class="profile-header__state--data" *ngIf="relationship.muting">muted</div>
|
||||||
|
<div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications
|
||||||
|
muted
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="profile-statuses">
|
<div class="profile-sub-header ">
|
||||||
<div *ngIf="!isLoading && !statusLoading && statuses.length == 0" class="profile-no-toots">
|
<div *ngIf="displayedAccount && hasNote" class="profile-description">
|
||||||
no toots found
|
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="note"
|
||||||
|
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
|
||||||
|
</app-databinded-text>
|
||||||
|
</div>
|
||||||
|
<div class="profile-fields" *ngIf="displayedAccount && 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">
|
||||||
|
{{ field.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngFor="let statusWrapper of pinnedStatuses">
|
<div class="profile-statuses">
|
||||||
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
|
<div *ngIf="!isLoading && !statusLoading && statuses.length == 0" class="profile-no-toots">
|
||||||
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
no toots found
|
||||||
</app-status>
|
</div>
|
||||||
|
|
||||||
|
<div *ngFor="let statusWrapper of pinnedStatuses">
|
||||||
|
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
|
||||||
|
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
||||||
|
</app-status>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngFor="let statusWrapper of statuses">
|
||||||
|
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
|
||||||
|
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
||||||
|
</app-status>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngFor="let statusWrapper of statuses">
|
|
||||||
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
|
|
||||||
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
|
||||||
</app-status>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -5,11 +5,49 @@ $validated-font-color: #4fde23;
|
||||||
$validated-background: #164109;
|
$validated-background: #164109;
|
||||||
$header-height: 160px;
|
$header-height: 160px;
|
||||||
|
|
||||||
|
.outer-profile {
|
||||||
|
height: calc(100%);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.profile {
|
.profile {
|
||||||
// overflow: auto;
|
// overflow: auto;
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
|
&__floating-header {
|
||||||
|
transition: all .2s;
|
||||||
|
transition-timing-function: ease-in;
|
||||||
|
|
||||||
|
height: 60px;
|
||||||
|
width: calc(100% - 7px);
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: -60px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
border-bottom: 1px solid #222736;
|
||||||
|
|
||||||
|
// opacity: 0;
|
||||||
|
|
||||||
|
&__inner {
|
||||||
|
overflow: auto;
|
||||||
|
height: 60px;
|
||||||
|
background-color: rgba(0, 0, 0, .45);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__activated {
|
||||||
|
// opacity: 1;
|
||||||
|
transition: all .25s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__moved {
|
&__moved {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@ export class UserProfileComponent implements OnInit {
|
||||||
|
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
loadingRelationShip = false;
|
loadingRelationShip = false;
|
||||||
|
showFloatingHeader = false;
|
||||||
|
|
||||||
private maxReached = false;
|
private maxReached = false;
|
||||||
private maxId: string;
|
private maxId: string;
|
||||||
|
|
@ -205,6 +206,7 @@ export class UserProfileComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh(): any {
|
refresh(): any {
|
||||||
|
this.showFloatingHeader = false;
|
||||||
this.load(this.lastAccountName);
|
this.load(this.lastAccountName);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -255,6 +257,12 @@ 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){
|
||||||
|
this.showFloatingHeader = true;
|
||||||
|
} else {
|
||||||
|
this.showFloatingHeader = false;
|
||||||
|
}
|
||||||
|
|
||||||
if (atBottom) {
|
if (atBottom) {
|
||||||
this.scrolledToBottom();
|
this.scrolledToBottom();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue