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

goToTop functionnal on overlay now

This commit is contained in:
Nicolas Constant 2019-08-11 01:00:58 -04:00
parent 3c798baab1
commit f6b7f95bd6
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
7 changed files with 93 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/components/stream/hashtag/hashtag.component.ts
View File

@ -14,6 +14,7 @@ import { AccountInfo } from '../../../states/accounts.state';
})
export class HashtagComponent implements OnInit, OnDestroy {
@Input() refreshEventEmitter: EventEmitter<any>;
@Input() goToTopEventEmitter: EventEmitter<any>;
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@ -36,6 +37,7 @@ export class HashtagComponent implements OnInit, OnDestroy {
private lastUsedAccount: AccountInfo;
private refreshSubscription: Subscription;
private goToTopSubscription: Subscription;
constructor(
private readonly store: Store,
@ -47,10 +49,17 @@ export class HashtagComponent implements OnInit, OnDestroy {
this.refresh();
})
}
if(this.goToTopEventEmitter) {
this.goToTopSubscription = this.goToTopEventEmitter.subscribe(() => {
this.goToTop();
})
}
}
ngOnDestroy(): void {
if(this.refreshSubscription) this.refreshSubscription.unsubscribe();
if (this.goToTopSubscription) this.goToTopSubscription.unsubscribe();
}
goToTop(): boolean {

8
src/app/components/stream/stream-overlay/stream-overlay.component.html
View File

@ -12,6 +12,11 @@
title="refresh" (click)="refresh()">
<fa-icon [icon]="faRedoAlt"></fa-icon>
</button>
<a href title="return to top" class="overlay-gototop" (click)="goToTop()">
</a>
<button class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
title="next" (click)="next()">
<fa-icon [icon]="faAngleRight"></fa-icon>
@ -23,6 +28,7 @@
<app-user-profile #appUserProfile *ngIf="e.type === 'account'"
[currentAccount]="e.account"
[refreshEventEmitter]="e.refreshEventEmitter"
[goToTopEventEmitter]="e.goToTopEventEmitter"
class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
@ -30,6 +36,7 @@
<app-hashtag #appHashtag *ngIf="e.type === 'hashtag'"
[hashtagElement]="e.hashtag"
[refreshEventEmitter]="e.refreshEventEmitter"
[goToTopEventEmitter]="e.goToTopEventEmitter"
class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
@ -37,6 +44,7 @@
<app-thread #appThread *ngIf="e.type === 'thread'"
[currentThread]="e.thread" class="stream-overlay__content"
[refreshEventEmitter]="e.refreshEventEmitter"
[goToTopEventEmitter]="e.goToTopEventEmitter"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-thread>

16
src/app/components/stream/stream-overlay/stream-overlay.component.scss
View File

@ -1,7 +1,7 @@
@import "variables";
@import "mixins";
@import "commons";
$header-content: 40px;
$header-content-height: 40px;
.stream-overlay {
// width: $stream-column-width;
height: calc(100%);
@ -10,7 +10,7 @@ $header-content: 40px;
&__header {
width: calc(100%);
height: $header-content;
height: $header-content-height;
background-color: $column-header-background-color; // padding: 6px 10px 0 10px;
border-bottom: 1px solid #222736;
& a {
@ -22,7 +22,7 @@ $header-content: 40px;
&__content-wrapper {
transition: all .2s;
position: absolute;
top: $header-content;
top: $header-content-height;
right: 0;
left: 0;
bottom: 0;
@ -93,13 +93,21 @@ $header-content: 40px;
float: left;
font-size: 18px;
}
&-gototop {
position: absolute;
top: 0;
left: 110px;
right: 40px;
display: block;
height: $header-content-height;
}
&-close {
display: block;
float: right;
font-size: 14px;
color: white;
margin-right: 8px;
}
}
}
.not-active {

12
src/app/components/stream/stream-overlay/stream-overlay.component.ts
View File

@ -121,6 +121,11 @@ export class StreamOverlayComponent implements OnInit, OnDestroy {
return false;
}
goToTop(): boolean {
this.loadedElements[this.visibleElementIndex].goToTop();
return false;
}
browseAccount(accountName: string): void {
if (!accountName) return;
@ -163,8 +168,9 @@ export class StreamOverlayComponent implements OnInit, OnDestroy {
}
}
class OverlayBrowsing {
class OverlayBrowsing {
refreshEventEmitter = new EventEmitter();
goToTopEventEmitter = new EventEmitter();
constructor(
public readonly hashtag: StreamElement,
@ -190,10 +196,12 @@ class OverlayBrowsing {
hide(): any {
this.isVisible = false;
}
refresh(): any {
this.refreshEventEmitter.next();
}
goToTop(): any {
this.goToTopEventEmitter.next();
}
isVisible: boolean;
type: 'hashtag' | 'account' | 'thread';

10
src/app/components/stream/stream-statuses/stream-statuses.component.ts
View File

@ -175,10 +175,12 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
this.statuses.length = 2 * this.streamingService.nbStatusPerIteration;
}
const stream = this.statustream.nativeElement as HTMLElement;
stream.scrollTo({
top: 0,
behavior: 'smooth'
});
setTimeout(() => {
stream.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 0);
return false;
}

40
src/app/components/stream/thread/thread.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ViewChildren, QueryList, ViewChild, ElementRef } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { Subscription } from 'rxjs';
@ -29,6 +29,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@Input() refreshEventEmitter: EventEmitter<any>;
@Input() goToTopEventEmitter: EventEmitter<any>;
@Input('currentThread')
set currentThread(thread: OpenThreadEvent) {
@ -44,6 +45,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
private hideAccountSubscription: Subscription;
private deleteStatusSubscription: Subscription;
private refreshSubscription: Subscription;
private goToTopSubscription: Subscription;
constructor(
private readonly notificationService: NotificationService,
@ -57,26 +59,18 @@ export class ThreadComponent implements OnInit, OnDestroy {
})
}
if(this.goToTopEventEmitter) {
this.goToTopSubscription = this.goToTopEventEmitter.subscribe(() => {
this.goToTop();
})
}
this.newPostSub = this.notificationService.newRespondPostedStream.subscribe((replyData: NewReplyData) => {
if(replyData){
const repondingStatus = this.statuses.find(x => x.status.id === replyData.uiStatusId);
const responseStatus = replyData.response;
if(repondingStatus && this.statuses[0]){
this.statuses.push(responseStatus);
// const uiProvider = this.statuses[0].provider;
// if(uiProvider.id === responseStatus.provider.id){
// } else {
// this.toolsService.getStatusUsableByAccount(uiProvider, responseStatus)
// .then((status: Status) => {
// this.statuses.push(new StatusWrapper(status, uiProvider));
// })
// .catch((err) => {
// this.notificationService.notifyHttpError(err);
// });
// }
// this.getThread(this.statuses[0].provider, this.lastThreadEvent);
this.statuses.push(responseStatus);
}
}
});
@ -106,7 +100,19 @@ export class ThreadComponent implements OnInit, OnDestroy {
if (this.newPostSub) this.newPostSub.unsubscribe();
if (this.hideAccountSubscription) this.hideAccountSubscription.unsubscribe();
if (this.deleteStatusSubscription) this.deleteStatusSubscription.unsubscribe();
if(this.refreshSubscription) this.refreshSubscription.unsubscribe();
if (this.refreshSubscription) this.refreshSubscription.unsubscribe();
if (this.goToTopSubscription) this.goToTopSubscription.unsubscribe();
}
@ViewChild('statusstream') public statustream: ElementRef;
goToTop(): any {
const stream = this.statustream.nativeElement as HTMLElement;
setTimeout(() => {
stream.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 0);
}
private getThread(openThreadEvent: OpenThreadEvent) {

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

@ -56,6 +56,7 @@ export class UserProfileComponent implements OnInit {
private accountSub: Subscription;
private deleteStatusSubscription: Subscription;
private refreshSubscription: Subscription;
private goToTopSubscription: Subscription;
@ViewChild('statusstream') public statustream: ElementRef;
@ViewChild('profilestatuses') public profilestatuses: ElementRef;
@ -65,6 +66,7 @@ export class UserProfileComponent implements OnInit {
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@Input() refreshEventEmitter: EventEmitter<any>;
@Input() goToTopEventEmitter: EventEmitter<any>;
@Input('currentAccount')
set currentAccount(accountName: string) {
@ -82,12 +84,18 @@ export class UserProfileComponent implements OnInit {
}
ngOnInit() {
if(this.refreshEventEmitter) {
if (this.refreshEventEmitter) {
this.refreshSubscription = this.refreshEventEmitter.subscribe(() => {
this.refresh();
})
}
if (this.goToTopEventEmitter) {
this.goToTopSubscription = this.goToTopEventEmitter.subscribe(() => {
this.goToTop();
})
}
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
if (this.displayedAccount) {
const userAccount = accounts.filter(x => x.isSelected)[0];
@ -113,12 +121,23 @@ export class UserProfileComponent implements OnInit {
});
}
});
}
}
ngOnDestroy() {
if(this.accountSub) this.accountSub.unsubscribe();
if(this.deleteStatusSubscription) this.deleteStatusSubscription.unsubscribe();
if(this.refreshSubscription) this.refreshSubscription.unsubscribe();
if (this.accountSub) this.accountSub.unsubscribe();
if (this.deleteStatusSubscription) this.deleteStatusSubscription.unsubscribe();
if (this.refreshSubscription) this.refreshSubscription.unsubscribe();
if (this.goToTopSubscription) this.goToTopSubscription.unsubscribe();
}
goToTop(): any {
const stream = this.statustream.nativeElement as HTMLElement;
setTimeout(() => {
stream.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 0);
}
private load(accountName: string) {
@ -333,7 +352,7 @@ export class UserProfileComponent implements OnInit {
isSwitchingSection: boolean;
switchStatusSection(section: 'status' | 'replies' | 'media'): boolean {
this.isSwitchingSection = true;
this.isSwitchingSection = true;
this.statusSection = section;
this.statuses.length = 0;