added autofocus on status in thread

This commit is contained in:
Nicolas Constant 2019-08-13 23:56:47 -04:00
parent ef0602e54a
commit f0035149eb
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 33 additions and 12 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "sengi",
"version": "0.12.2",
"version": "0.14.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -129,7 +129,9 @@
"category": "Network"
},
"snap": {
"publish": ["github"]
"publish": [
"github"
]
}
}
}

View File

@ -1,4 +1,4 @@
<div class="status-wrapper" [class.direct-message]="isDirectMessage">
<div class="status-wrapper" [class.direct-message]="isDirectMessage" [class.status-selected]="isSelected">
<div class="reblog" *ngIf="reblog">
<a class="reblog__profile-link" href title="{{ status.account.acct }}"
(click)="openAccount(status.account)"

View File

@ -33,6 +33,11 @@
background-color: $direct-message-background;
}
.status-selected {
background-color: #0f111a;
background-color: desaturate(lighten(#0f111a, 5%), 4%);
}
.status {
margin: 0;
padding: 0;

View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from "@angular/core";
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from "@angular/core";
import { faStar, faRetweet, faList, faThumbtack } from "@fortawesome/free-solid-svg-icons";
import { Status, Account } from "../../../services/models/mastodon.interfaces";
@ -36,6 +36,7 @@ export class StatusComponent implements OnInit {
hasReply: boolean;
contentWarningText: string;
isDirectMessage: boolean;
isSelected: boolean;
@Output() browseAccountEvent = new EventEmitter<string>();
@Output() browseHashtagEvent = new EventEmitter<string>();
@ -49,6 +50,7 @@ export class StatusComponent implements OnInit {
private _statusWrapper: StatusWrapper;
status: Status;
@Input('statusWrapper')
set statusWrapper(value: StatusWrapper) {
this._statusWrapper = value;
@ -85,6 +87,7 @@ export class StatusComponent implements OnInit {
}
constructor(
public elem: ElementRef,
private readonly toolsService: ToolsService) { }
ngOnInit() {

View File

@ -53,24 +53,24 @@ export class ThreadComponent implements OnInit, OnDestroy {
private readonly mastodonService: MastodonService) { }
ngOnInit() {
if(this.refreshEventEmitter) {
if (this.refreshEventEmitter) {
this.refreshSubscription = this.refreshEventEmitter.subscribe(() => {
this.refresh();
})
}
if(this.goToTopEventEmitter) {
if (this.goToTopEventEmitter) {
this.goToTopSubscription = this.goToTopEventEmitter.subscribe(() => {
this.goToTop();
})
}
this.newPostSub = this.notificationService.newRespondPostedStream.subscribe((replyData: NewReplyData) => {
if(replyData){
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);
if (repondingStatus && this.statuses[0]) {
this.statuses.push(responseStatus);
}
}
});
@ -78,7 +78,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
this.hideAccountSubscription = this.notificationService.hideAccountUrlStream.subscribe((accountUrl: string) => {
if (accountUrl) {
this.statuses = this.statuses.filter(x => {
if(x.status.reblog){
if (x.status.reblog) {
return x.status.reblog.account.url != accountUrl;
} else {
return x.status.account.url != accountUrl;
@ -88,9 +88,9 @@ export class ThreadComponent implements OnInit, OnDestroy {
});
this.deleteStatusSubscription = this.notificationService.deletedStatusStream.subscribe((status: StatusWrapper) => {
if(status){
if (status) {
this.statuses = this.statuses.filter(x => {
return !(x.status.url.replace('https://','').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
return !(x.status.url.replace('https://', '').split('/')[0] === status.provider.instance && x.status.id === status.status.id);
});
}
});
@ -155,6 +155,7 @@ export class ThreadComponent implements OnInit, OnDestroy {
return this.mastodonService.getStatusContext(currentAccount, status.id)
.then((context: Context) => {
let contextStatuses = [...context.ancestors, status, ...context.descendants]
const position = context.ancestors.length;
for (const s of contextStatuses) {
const wrapper = new StatusWrapper(s, currentAccount);
@ -162,9 +163,19 @@ export class ThreadComponent implements OnInit, OnDestroy {
}
this.hasContentWarnings = this.statuses.filter(x => x.status.sensitive || x.status.spoiler_text).length > 1;
return position;
});
})
.then((position: number) => {
setTimeout(() => {
const el = this.statusChildren.toArray()[position];
el.isSelected = true;
// el.elem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
el.elem.nativeElement.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
}, 0);
})
.catch((err: HttpErrorResponse) => {
this.notificationService.notifyHttpError(err);
})