aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/modal
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-02-28 13:52:21 +0100
committerGitHub <noreply@github.com>2020-02-28 13:52:21 +0100
commitd3217560a611b94f888ecf3de93b428a7521d4de (patch)
tree26fc984f351afb994dc13c94e138476ded50c76a /client/src/app/modal
parent64645512b08875c18ebdc009a550cdfa69def955 (diff)
downloadPeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.gz
PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.zst
PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.zip
Add visitor settings, rework logged-in dropdown (#2514)
* Add visitor settings, rework logged-in dropdown * Make user dropdown P2P switch functional * Fix lint * Fix unnecessary notification when user logs out * Simplify visitor settings code and remove unnecessary icons * Catch parsing errors and reindent menu styles
Diffstat (limited to 'client/src/app/modal')
-rw-r--r--client/src/app/modal/quick-settings-modal.component.html19
-rw-r--r--client/src/app/modal/quick-settings-modal.component.scss39
-rw-r--r--client/src/app/modal/quick-settings-modal.component.ts62
3 files changed, 120 insertions, 0 deletions
diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
new file mode 100644
index 000000000..8ee83e7dc
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -0,0 +1,19 @@
1<ng-template #modal let-hide="close">
2 <div class="modal-header">
3 <h4 i18n class="modal-title">Settings</h4>
4 </div>
5
6 <div class="modal-body">
7 <div i18n class="mb-4 quick-settings-title">Display settings</div>
8
9 <my-account-video-settings *ngIf="!isUserLoggedIn()" [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true">
10 <ng-container ngProjectAs="inner-title">
11 <div i18n class="mb-4 mt-4 quick-settings-title">Video settings</div>
12 </ng-container>
13 </my-account-video-settings>
14
15 <div i18n class="mb-4 mt-4 quick-settings-title">Interface settings</div>
16
17 <my-account-interface-settings *ngIf="!isUserLoggedIn()" [user]="user" [userInformationLoaded]="userInformationLoaded" [reactiveUpdate]="true" [notifyOnUpdate]="true"></my-account-interface-settings>
18 </div>
19</ng-template>
diff --git a/client/src/app/modal/quick-settings-modal.component.scss b/client/src/app/modal/quick-settings-modal.component.scss
new file mode 100644
index 000000000..ef21542f3
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.scss
@@ -0,0 +1,39 @@
1@import '_mixins';
2
3.modal-button {
4 @include disable-default-a-behaviour;
5 transform: translateY(2px);
6
7 button {
8 @include peertube-button;
9 @include grey-button;
10 @include button-with-icon(18px, 4px, -1px);
11
12 my-global-icon {
13 @include apply-svg-color(#585858);
14 }
15 }
16
17 & + .modal-button {
18 margin-left: 1rem;
19 }
20}
21
22.icon {
23 @include disable-outline;
24 @include icon(22px);
25 opacity: 0.6;
26 margin-left: -1px;
27
28 &.icon-shortcuts {
29 position: relative;
30 top: -1px;
31 margin-right: 4px;
32
33 background-image: url('../../assets/images/menu/keyboard.png');
34 }
35}
36
37.quick-settings-title {
38 @include in-content-small-title;
39} \ No newline at end of file
diff --git a/client/src/app/modal/quick-settings-modal.component.ts b/client/src/app/modal/quick-settings-modal.component.ts
new file mode 100644
index 000000000..41d6c9f47
--- /dev/null
+++ b/client/src/app/modal/quick-settings-modal.component.ts
@@ -0,0 +1,62 @@
1import { Component, ViewChild, OnInit } from '@angular/core'
2import { AuthService, AuthStatus } from '@app/core'
3import { FormReactive, FormValidatorService, UserService, User } from '@app/shared'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
5import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
6import { ReplaySubject } from 'rxjs'
7import { LocalStorageService } from '@app/shared/misc/storage.service'
8import { filter } from 'rxjs/operators'
9
10@Component({
11 selector: 'my-quick-settings',
12 templateUrl: './quick-settings-modal.component.html',
13 styleUrls: [ './quick-settings-modal.component.scss' ]
14})
15export class QuickSettingsModalComponent extends FormReactive implements OnInit {
16 @ViewChild('modal', { static: true }) modal: NgbModal
17
18 user: User
19 userInformationLoaded = new ReplaySubject<boolean>(1)
20
21 private openedModal: NgbModalRef
22
23 constructor (
24 protected formValidatorService: FormValidatorService,
25 private modalService: NgbModal,
26 private userService: UserService,
27 private authService: AuthService,
28 private localStorageService: LocalStorageService
29 ) {
30 super()
31 }
32
33 ngOnInit () {
34 this.user = this.userService.getAnonymousUser()
35 this.localStorageService.watch().subscribe(
36 () => this.user = this.userService.getAnonymousUser()
37 )
38 this.userInformationLoaded.next(true)
39
40 this.authService.loginChangedSource
41 .pipe(filter(status => status !== AuthStatus.LoggedIn))
42 .subscribe(
43 () => {
44 this.user = this.userService.getAnonymousUser()
45 this.userInformationLoaded.next(true)
46 }
47 )
48 }
49
50 isUserLoggedIn () {
51 return this.authService.isLoggedIn()
52 }
53
54 show () {
55 this.openedModal = this.modalService.open(this.modal, { centered: true })
56 }
57
58 hide () {
59 this.openedModal.close()
60 this.form.reset()
61 }
62}