automatically focus when writing a new status

This commit is contained in:
Nicolas Constant 2018-10-19 23:20:43 -04:00
parent 7aed4569e5
commit 328a87cef8
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 19 additions and 9 deletions

View File

@ -3,10 +3,9 @@
<form (ngSubmit)="onSubmit()">
<!-- <label>Please provide your account:</label> -->
<input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off"
placeholder="Title (optional)" />
<input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title (optional)" />
<!-- <textarea rows="4" cols="50"> -->
<textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>

View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
import { Store } from '@ngxs/store';
import { AccountInfo } from '../../../states/accounts.state';
import { MastodonService, VisibilityEnum } from '../../../services/mastodon.service';
@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
export class AddNewStatusComponent implements OnInit {
@Input() title: string;
@Input() status: string;
@ViewChild('reply') replyElement: ElementRef;
selectedPrivacy = 'Public';
privacyList: string[] = ['Public', 'Unlisted', 'Follows-only', 'DM'];
@ -22,6 +23,9 @@ export class AddNewStatusComponent implements OnInit {
private readonly mastodonService: MastodonService) { }
ngOnInit() {
setTimeout(() => {
this.replyElement.nativeElement.focus();
}, 0);
}
onSubmit(): boolean {

View File

@ -1,5 +1,5 @@
<form (ngSubmit)="onSubmit()">
<textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>

View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { Store } from '@ngxs/store';
import { MastodonService, VisibilityEnum } from '../../../../services/mastodon.service';
import { AccountInfo } from '../../../../states/accounts.state';
@ -14,6 +14,7 @@ export class ReplyToStatusComponent implements OnInit {
@Input() status: string = '';
@Input() statusReplyingToWrapper: StatusWrapper;
@Output() onClose = new EventEmitter();
@ViewChild('reply') replyElement: ElementRef;
private statusReplyingTo: Status;
@ -31,6 +32,10 @@ export class ReplyToStatusComponent implements OnInit {
for (const mention of this.statusReplyingTo.mentions) {
this.status += `@${mention.acct} `;
}
setTimeout(() => {
this.replyElement.nativeElement.focus();
}, 0);
}
onSubmit(): boolean {

View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Inject, LOCALE_ID } from "@angular/core";
import { Component, OnInit, Input, Inject, LOCALE_ID, ElementRef } from "@angular/core";
import { Status } from "../../../services/models/mastodon.interfaces";
import { formatDate } from '@angular/common';
import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
@ -45,7 +45,8 @@ export class StatusComponent implements OnInit {
}
constructor(@Inject(LOCALE_ID) private locale: string) { }
constructor(
@Inject(LOCALE_ID) private locale: string) { }
ngOnInit() {
}
@ -70,6 +71,7 @@ export class StatusComponent implements OnInit {
openReply(): boolean{
this.replyingToStatus = !this.replyingToStatus;
return false;
}