Auto focus plugin search input

pull/3888/head
Chocobozzz 2021-03-24 13:32:55 +01:00
parent ec99e8486a
commit a3664dfdc9
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
6 changed files with 19 additions and 8 deletions

View File

@ -3,7 +3,7 @@
</div> </div>
<div class="search-bar"> <div class="search-bar">
<input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..."/> <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." autofocus />
</div> </div>
<div class="alert alert-info" i18n *ngIf="pluginInstalled"> <div class="alert alert-info" i18n *ngIf="pluginInstalled">

View File

@ -21,7 +21,7 @@
<label i18n for="username">User</label> <label i18n for="username">User</label>
<input <input
type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1" type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #usernameInput formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" autofocus
> >
</div> </div>

View File

@ -3,9 +3,9 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula
import { ActivatedRoute } from '@angular/router' import { ActivatedRoute } from '@angular/router'
import { AuthService, Notifier, RedirectService, UserService } from '@app/core' import { AuthService, Notifier, RedirectService, UserService } from '@app/core'
import { HooksService } from '@app/core/plugins/hooks.service' import { HooksService } from '@app/core/plugins/hooks.service'
import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators' import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models' import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
@ -16,7 +16,6 @@ import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
}) })
export class LoginComponent extends FormReactive implements OnInit, AfterViewInit { export class LoginComponent extends FormReactive implements OnInit, AfterViewInit {
@ViewChild('usernameInput', { static: false }) usernameInput: ElementRef
@ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
accordion: NgbAccordion accordion: NgbAccordion
@ -91,10 +90,6 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
} }
ngAfterViewInit () { ngAfterViewInit () {
if (this.usernameInput) {
this.usernameInput.nativeElement.focus()
}
this.hooks.runAction('action:login.init', 'login') this.hooks.runAction('action:login.init', 'login')
} }

View File

@ -0,0 +1,12 @@
import { AfterViewInit, Directive, ElementRef } from '@angular/core'
@Directive({
selector: '[autofocus]'
})
export class AutofocusDirective implements AfterViewInit {
constructor (private host: ElementRef) { }
ngAfterViewInit () {
this.host.nativeElement.focus()
}
}

View File

@ -1,3 +1,4 @@
export * from './autofocus.directive'
export * from './bytes.pipe' export * from './bytes.pipe'
export * from './duration-formatter.pipe' export * from './duration-formatter.pipe'
export * from './from-now.pipe' export * from './from-now.pipe'

View File

@ -19,6 +19,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
import { SharedGlobalIconModule } from '../shared-icons' import { SharedGlobalIconModule } from '../shared-icons'
import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account' import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
import { import {
AutofocusDirective,
BytesPipe, BytesPipe,
DurationFormatterPipe, DurationFormatterPipe,
FromNowPipe, FromNowPipe,
@ -71,6 +72,7 @@ import { VideoChannelService } from './video-channel'
NumberFormatterPipe, NumberFormatterPipe,
BytesPipe, BytesPipe,
DurationFormatterPipe, DurationFormatterPipe,
AutofocusDirective,
InfiniteScrollerDirective, InfiniteScrollerDirective,
PeerTubeTemplateDirective, PeerTubeTemplateDirective,
@ -125,6 +127,7 @@ import { VideoChannelService } from './video-channel'
BytesPipe, BytesPipe,
NumberFormatterPipe, NumberFormatterPipe,
DurationFormatterPipe, DurationFormatterPipe,
AutofocusDirective,
InfiniteScrollerDirective, InfiniteScrollerDirective,
PeerTubeTemplateDirective, PeerTubeTemplateDirective,