aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-01-20 10:11:49 +0100
committerChocobozzz <me@florianbigard.com>2022-01-20 10:11:49 +0100
commitefd4ff5fbcd1e557c3c8af25b8b8ee5b3a2e9f0d (patch)
tree1ee50339dceaf702467ecf9cd7a99d5081d63986
parent071f3e519cbd3184b59ee728fe96c5c29b7792b9 (diff)
downloadPeerTube-efd4ff5fbcd1e557c3c8af25b8b8ee5b3a2e9f0d.tar.gz
PeerTube-efd4ff5fbcd1e557c3c8af25b8b8ee5b3a2e9f0d.tar.zst
PeerTube-efd4ff5fbcd1e557c3c8af25b8b8ee5b3a2e9f0d.zip
Open and close settings modal using query params
-rw-r--r--client/src/app/modal/quick-settings-modal.component.html6
-rw-r--r--client/src/app/modal/quick-settings-modal.component.ts31
2 files changed, 25 insertions, 12 deletions
diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
index 7794e10c4..8fa3aee50 100644
--- a/client/src/app/modal/quick-settings-modal.component.html
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -7,7 +7,7 @@
7 <div class="modal-body"> 7 <div class="modal-body">
8 <div i18n class="mb-4 font-italic">These settings apply only to your session on this instance.</div> 8 <div i18n class="mb-4 font-italic">These settings apply only to your session on this instance.</div>
9 9
10 <div i18n class="mb-4 quick-settings-title">Display settings</div> 10 <h6 i18n class="mb-4">Display settings</h6>
11 11
12 <my-user-video-settings 12 <my-user-video-settings
13 *ngIf="!isUserLoggedIn()" 13 *ngIf="!isUserLoggedIn()"
@@ -15,11 +15,11 @@
15 > 15 >
16 16
17 <ng-container ngProjectAs="inner-title"> 17 <ng-container ngProjectAs="inner-title">
18 <div i18n class="mb-4 mt-4 quick-settings-title">Video settings</div> 18 <h6 i18n class="mb-4 mt-4">Video settings</h6>
19 </ng-container> 19 </ng-container>
20 </my-user-video-settings> 20 </my-user-video-settings>
21 21
22 <div i18n class="mb-4 mt-4 quick-settings-title">Interface settings</div> 22 <h6 i18n class="mb-4 mt-4">Interface settings</h6>
23 23
24 <my-user-interface-settings 24 <my-user-interface-settings
25 *ngIf="!isUserLoggedIn()" 25 *ngIf="!isUserLoggedIn()"
diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
index 7a53179cb..19f75ad5c 100644
--- a/client/src/app/modal/quick-settings-modal.component.ts
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -1,8 +1,8 @@
1import { ReplaySubject } from 'rxjs' 1import { ReplaySubject } from 'rxjs'
2import { filter } from 'rxjs/operators' 2import { filter } from 'rxjs/operators'
3import { Component, OnInit, ViewChild } from '@angular/core' 3import { Component, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router'
4import { AuthService, AuthStatus, LocalStorageService, User, UserService } from '@app/core' 5import { AuthService, AuthStatus, LocalStorageService, User, UserService } from '@app/core'
5import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
6import { NgbModal } from '@ng-bootstrap/ng-bootstrap' 6import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
7import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' 7import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
8 8
@@ -10,7 +10,9 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
10 selector: 'my-quick-settings', 10 selector: 'my-quick-settings',
11 templateUrl: './quick-settings-modal.component.html' 11 templateUrl: './quick-settings-modal.component.html'
12}) 12})
13export class QuickSettingsModalComponent extends FormReactive implements OnInit { 13export class QuickSettingsModalComponent implements OnInit {
14 private static readonly QUERY_MODAL_NAME = 'quick-settings'
15
14 @ViewChild('modal', { static: true }) modal: NgbModal 16 @ViewChild('modal', { static: true }) modal: NgbModal
15 17
16 user: User 18 user: User
@@ -19,13 +21,13 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit
19 private openedModal: NgbModalRef 21 private openedModal: NgbModalRef
20 22
21 constructor ( 23 constructor (
22 protected formValidatorService: FormValidatorService,
23 private modalService: NgbModal, 24 private modalService: NgbModal,
24 private userService: UserService, 25 private userService: UserService,
25 private authService: AuthService, 26 private authService: AuthService,
26 private localStorageService: LocalStorageService 27 private localStorageService: LocalStorageService,
28 private route: ActivatedRoute,
29 private router: Router
27 ) { 30 ) {
28 super()
29 } 31 }
30 32
31 ngOnInit () { 33 ngOnInit () {
@@ -45,6 +47,14 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit
45 this.userInformationLoaded.next(true) 47 this.userInformationLoaded.next(true)
46 } 48 }
47 }) 49 })
50
51 this.route.queryParams.subscribe(params => {
52 if (params['modal'] === QuickSettingsModalComponent.QUERY_MODAL_NAME) {
53 this.openedModal = this.modalService.open(this.modal, { centered: true })
54
55 this.openedModal.hidden.subscribe(() => this.setModalQuery('remove'))
56 }
57 })
48 } 58 }
49 59
50 isUserLoggedIn () { 60 isUserLoggedIn () {
@@ -52,11 +62,14 @@ export class QuickSettingsModalComponent extends FormReactive implements OnInit
52 } 62 }
53 63
54 show () { 64 show () {
55 this.openedModal = this.modalService.open(this.modal, { centered: true }) 65 this.setModalQuery('add')
56 } 66 }
57 67
58 hide () { 68 private setModalQuery (type: 'add' | 'remove') {
59 this.openedModal.close() 69 const modal = type === 'add'
60 this.form.reset() 70 ? QuickSettingsModalComponent.QUERY_MODAL_NAME
71 : null
72
73 this.router.navigate([], { queryParams: { modal }, queryParamsHandling: 'merge' })
61 } 74 }
62} 75}