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

View File

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

View File

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

View File

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

View File

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

View File

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

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 { HttpErrorResponse } from '@angular/common/http';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
@ -29,6 +29,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>(); @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@Input() refreshEventEmitter: EventEmitter<any>; @Input() refreshEventEmitter: EventEmitter<any>;
@Input() goToTopEventEmitter: EventEmitter<any>;
@Input('currentThread') @Input('currentThread')
set currentThread(thread: OpenThreadEvent) { set currentThread(thread: OpenThreadEvent) {
@ -44,6 +45,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
private hideAccountSubscription: Subscription; private hideAccountSubscription: Subscription;
private deleteStatusSubscription: Subscription; private deleteStatusSubscription: Subscription;
private refreshSubscription: Subscription; private refreshSubscription: Subscription;
private goToTopSubscription: Subscription;
constructor( constructor(
private readonly notificationService: NotificationService, 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) => { this.newPostSub = this.notificationService.newRespondPostedStream.subscribe((replyData: NewReplyData) => {
if(replyData){ if(replyData){
const repondingStatus = this.statuses.find(x => x.status.id === replyData.uiStatusId); const repondingStatus = this.statuses.find(x => x.status.id === replyData.uiStatusId);
const responseStatus = replyData.response; const responseStatus = replyData.response;
if(repondingStatus && this.statuses[0]){ if(repondingStatus && this.statuses[0]){
this.statuses.push(responseStatus); 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);
} }
} }
}); });
@ -106,7 +100,19 @@ export class ThreadComponent implements OnInit, OnDestroy {
if (this.newPostSub) this.newPostSub.unsubscribe(); if (this.newPostSub) this.newPostSub.unsubscribe();
if (this.hideAccountSubscription) this.hideAccountSubscription.unsubscribe(); if (this.hideAccountSubscription) this.hideAccountSubscription.unsubscribe();
if (this.deleteStatusSubscription) this.deleteStatusSubscription.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) { private getThread(openThreadEvent: OpenThreadEvent) {

View File

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