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

added floating menu

This commit is contained in:
Nicolas Constant 2019-08-08 23:30:51 -04:00
parent 23c9e6873b
commit dc6cd2fb17
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 49 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,7 +132,26 @@
</div>
</div>
<div class="profile-statuses">
<div class="profile-statuses" #profilestatuses>
<div class="profile__extra-info profile__extra-info__preparefloating" *ngIf="!isLoading"
[class.profile__extra-info__floating]="showFloatingStatusMenu">
<div class="profile__extra-info__section">
<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')"
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')" title="Media"
[class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
</div>
</div>
<div class="profile__extra-info" *ngIf="!isLoading">
<div class="profile__extra-info__section">
<a href class="profile__extra-info__links" (click)="switchStatusSection('status')"

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

@ -36,7 +36,7 @@ $full-alias-color-hover: white;
z-index: 100;
// border-bottom: 1px solid #222736;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .45);
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .25);
// opacity: 0;
@ -246,7 +246,8 @@ $full-alias-color-hover: white;
background-color: #141824;
background-color: #1a1f2e;
font-size: 13px;
transition: all .4s;
&__section {
text-align: center;
display: inline-block;
@ -258,6 +259,18 @@ $full-alias-color-hover: white;
}
}
&__preparefloating {
width: calc(100% - 7px);
position: absolute;
top: -66px;
z-index: 99;
}
&__floating {
top: 60px;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .45);
}
&__links {
color: white;

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

@ -35,6 +35,7 @@ export class UserProfileComponent implements OnInit {
isLoading: boolean;
loadingRelationShip = false;
showFloatingHeader = false;
showFloatingStatusMenu = false;
private maxReached = false;
private maxId: string;
@ -56,6 +57,7 @@ export class UserProfileComponent implements OnInit {
private deleteStatusSubscription: Subscription;
@ViewChild('statusstream') public statustream: ElementRef;
@ViewChild('profilestatuses') public profilestatuses: ElementRef;
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@ -161,7 +163,7 @@ export class UserProfileComponent implements OnInit {
}
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, onlyMedia, false, excludeReplies, maxId, null, 20)
.then((statuses: Status[]) => {
@ -273,6 +275,13 @@ export class UserProfileComponent implements OnInit {
this.showFloatingHeader = false;
}
const menuPosition = element.scrollHeight - this.profilestatuses.nativeElement.offsetHeight - 30;
if (element.scrollTop > menuPosition) {
this.showFloatingStatusMenu = true;
} else {
this.showFloatingStatusMenu = false;
}
if (atBottom) {
this.scrolledToBottom();
}
@ -327,6 +336,9 @@ export class UserProfileComponent implements OnInit {
this.statuses.length = 0;
this.maxId = null;
this.showFloatingHeader = false;
this.showFloatingStatusMenu = false;
switch (section) {
case "status":
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, this.maxId);
@ -342,7 +354,7 @@ export class UserProfileComponent implements OnInit {
return false;
}
openAttachment(attachment: Attachment): boolean{
openAttachment(attachment: Attachment): boolean {
let openMediaEvent = new OpenMediaEvent(0, [attachment], null);
this.navigationService.openMedia(openMediaEvent);
return false;