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

created a floating header

This commit is contained in:
Nicolas Constant 2019-08-05 20:11:29 -04:00
parent 1351a06eb8
commit c38db1d1e1
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 135 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,17 @@
<div class="outer-profile">
<div class="profile flexcroll" #statusstream (scroll)="onScroll()">
<div class="profile__floating-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}"
[class.profile__floating-header__activated]="showFloatingHeader">
<div class="profile__floating-header__inner">
FLOATING HEADER
</div>
</div>
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
<div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved">
{{displayedAccount | accountEmoji }} has moved to <a href (click)="browseAccount(displayedAccount.moved.acct)"
class="profile__moved--link"
{{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>
@ -20,7 +28,9 @@
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>
<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"
@ -37,13 +47,15 @@
</button>
</div>
</div>
<div class="profile-header__state" *ngIf="relationship && !displayedAccount.moved && !loadingRelationShip">
<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 class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications
muted
</div>
</div>
</div>
@ -57,7 +69,8 @@
</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}}"
<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">
@ -88,3 +101,4 @@
</div>
</div>
</div>
</div>

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

@ -5,11 +5,49 @@ $validated-font-color: #4fde23;
$validated-background: #164109;
$header-height: 160px;
.outer-profile {
height: calc(100%);
overflow: hidden;
position: relative;
}
.profile {
// overflow: auto;
height: calc(100%);
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 {
padding: 5px;
text-align: center;

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

@ -34,6 +34,7 @@ export class UserProfileComponent implements OnInit {
isLoading: boolean;
loadingRelationShip = false;
showFloatingHeader = false;
private maxReached = false;
private maxId: string;
@ -205,6 +206,7 @@ export class UserProfileComponent implements OnInit {
}
refresh(): any {
this.showFloatingHeader = false;
this.load(this.lastAccountName);
}
@ -255,6 +257,12 @@ 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){
this.showFloatingHeader = true;
} else {
this.showFloatingHeader = false;
}
if (atBottom) {
this.scrolledToBottom();
}