goToTop functionnal on overlay now
This commit is contained in:
parent
3c798baab1
commit
f6b7f95bd6
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue