forks
/
peertube
1
0
Fork 0
Code Releases Activity

Open and close settings modal using query params

This commit is contained in:
Chocobozzz 2022-01-20 10:11:49 +01:00
parent 071f3e519c
commit efd4ff5fbc
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/modal/quick-settings-modal.component.html
View File

@ -7,7 +7,7 @@
<div class="modal-body">
<div i18n class="mb-4 font-italic">These settings apply only to your session on this instance.</div>
<div i18n class="mb-4 quick-settings-title">Display settings</div>
<h6 i18n class="mb-4">Display settings</h6>
<my-user-video-settings
*ngIf="!isUserLoggedIn()"
@ -15,11 +15,11 @@
>
<ng-container ngProjectAs="inner-title">
<div i18n class="mb-4 mt-4 quick-settings-title">Video settings</div>
<h6 i18n class="mb-4 mt-4">Video settings</h6>
</ng-container>
</my-user-video-settings>
<div i18n class="mb-4 mt-4 quick-settings-title">Interface settings</div>
<h6 i18n class="mb-4 mt-4">Interface settings</h6>
<my-user-interface-settings
*ngIf="!isUserLoggedIn()"

31
client/src/app/modal/quick-settings-modal.component.ts
View File

@ -1,8 +1,8 @@
import { ReplaySubject } from 'rxjs'
import { filter } from 'rxjs/operators'
import { Component, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { AuthService, AuthStatus, LocalStorageService, User, UserService } from '@app/core'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@ -10,7 +10,9 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
selector: 'my-quick-settings',
templateUrl: './quick-settings-modal.component.html'
})
export class QuickSettingsModalComponent extends FormReactive implements OnInit {
export class QuickSettingsModalComponent implements OnInit {
private static readonly QUERY_MODAL_NAME = 'quick-settings'
@ViewChild('modal', { static: true }) modal: NgbModal
user: User
@ -19,13 +21,13 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit
private openedModal: NgbModalRef
constructor (
protected formValidatorService: FormValidatorService,
private modalService: NgbModal,
private userService: UserService,
private authService: AuthService,
private localStorageService: LocalStorageService
private localStorageService: LocalStorageService,
private route: ActivatedRoute,
private router: Router
) {
super()
}
ngOnInit () {
@ -45,6 +47,14 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit
this.userInformationLoaded.next(true)
}
})
this.route.queryParams.subscribe(params => {
if (params['modal'] === QuickSettingsModalComponent.QUERY_MODAL_NAME) {
this.openedModal = this.modalService.open(this.modal, { centered: true })
this.openedModal.hidden.subscribe(() => this.setModalQuery('remove'))
}
})
}
isUserLoggedIn () {
@ -52,11 +62,14 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit
}
show () {
this.openedModal = this.modalService.open(this.modal, { centered: true })
this.setModalQuery('add')
}
hide () {
this.openedModal.close()
this.form.reset()
private setModalQuery (type: 'add' | 'remove') {
const modal = type === 'add'
? QuickSettingsModalComponent.QUERY_MODAL_NAME
: null
this.router.navigate([], { queryParams: { modal }, queryParamsHandling: 'merge' })
}
}