aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/modal
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-04-15 15:35:41 +0200
committerGitHub <noreply@github.com>2020-04-15 15:35:41 +0200
commit437e8e06eb32ffe21111f0946115aae0e4c33381 (patch)
treec221f0c41b4d29de00f4a3318393c32a83b02fe5 /client/src/app/modal
parent45c14ae1b2884e75c6341117489ea39ae0e1a3bc (diff)
downloadPeerTube-437e8e06eb32ffe21111f0946115aae0e4c33381.tar.gz
PeerTube-437e8e06eb32ffe21111f0946115aae0e4c33381.tar.zst
PeerTube-437e8e06eb32ffe21111f0946115aae0e4c33381.zip
Add custom modal to plugin helpers (#2631)
* Add custom modal component * Add custom modal to app and plugins helpers * Fixes custom modal component * Add doc for custom modal * Fix newline end of file html and scss files * Move my-custom-modal component outside component for UserLoggedIn modals * Move initializeCustomModal to ngAfterViewInit() * Wrap events and conditionnals * Replace ng-show with ngIf* * Add modalRef to open only one modal + onCloseClick * Refacto + Fix access methods of custom modal * Fix methods names custom-modal.component * Fix implement AfterViewInit & no default boolean Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/modal')
-rw-r--r--client/src/app/modal/custom-modal.component.html20
-rw-r--r--client/src/app/modal/custom-modal.component.scss20
-rw-r--r--client/src/app/modal/custom-modal.component.ts93
3 files changed, 133 insertions, 0 deletions
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
new file mode 100644
index 000000000..06ecc2743
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.html
@@ -0,0 +1,20 @@
1<ng-template #modal let-hide="close">
2 <div class="modal-header">
3 <h4 class="modal-title">{{title}}</h4>
4 <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
5 </div>
6
7 <div class="modal-body" [innerHTML]="content"></div>
8
9 <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
10 <input
11 *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel"
12 (click)="onCancelClick()" (key.enter)="onCancelClick()"
13 >
14
15 <input
16 *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm"
17 (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
18 >
19 </div>
20</ng-template>
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
new file mode 100644
index 000000000..a7fa30cf5
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -0,0 +1,20 @@
1@import '_mixins';
2@import '_variables';
3
4.modal-body {
5 font-size: 15px;
6}
7
8li {
9 margin-bottom: 10px;
10}
11
12.action-button-cancel {
13 @include peertube-button;
14 @include grey-button;
15}
16
17.action-button-confirm {
18 @include peertube-button;
19 @include orange-button;
20}
diff --git a/client/src/app/modal/custom-modal.component.ts b/client/src/app/modal/custom-modal.component.ts
new file mode 100644
index 000000000..a98579085
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.ts
@@ -0,0 +1,93 @@
1import { Component, ElementRef, ViewChild, Input } from '@angular/core'
2import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
3
4@Component({
5 selector: 'my-custom-modal',
6 templateUrl: './custom-modal.component.html',
7 styleUrls: [ './custom-modal.component.scss' ]
8})
9export class CustomModalComponent {
10 @ViewChild('modal', { static: true }) modal: ElementRef
11
12 @Input() title: string
13 @Input() content: string
14 @Input() close?: boolean
15 @Input() cancel?: { value: string, action?: () => void }
16 @Input() confirm?: { value: string, action?: () => void }
17
18 private modalRef: NgbModalRef
19
20 constructor (
21 private modalService: NgbModal
22 ) { }
23
24 show (input: {
25 title: string,
26 content: string,
27 close?: boolean,
28 cancel?: { value: string, action?: () => void },
29 confirm?: { value: string, action?: () => void }
30 }) {
31 if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
32 console.error('Cannot open another custom modal, one is already opened.')
33 return
34 }
35
36 const { title, content, close, cancel, confirm } = input
37
38 this.title = title
39 this.content = content
40 this.close = close
41 this.cancel = cancel
42 this.confirm = confirm
43
44 this.modalRef = this.modalService.open(this.modal, {
45 centered: true,
46 backdrop: 'static',
47 keyboard: false,
48 size: 'lg'
49 })
50 }
51
52 onCancelClick () {
53 this.modalRef.close()
54
55 if (typeof this.cancel.action === 'function') {
56 this.cancel.action()
57 }
58
59 this.destroy()
60 }
61
62 onCloseClick () {
63 this.modalRef.close()
64 this.destroy()
65 }
66
67 onConfirmClick () {
68 this.modalRef.close()
69
70 if (typeof this.confirm.action === 'function') {
71 this.confirm.action()
72 }
73
74 this.destroy()
75 }
76
77 hasCancel () {
78 return typeof this.cancel !== 'undefined'
79 }
80
81 hasConfirm () {
82 return typeof this.confirm !== 'undefined'
83 }
84
85 private destroy () {
86 delete this.modalRef
87 delete this.title
88 delete this.content
89 delete this.close
90 delete this.cancel
91 delete this.confirm
92 }
93}