aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html34
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss10
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts16
3 files changed, 52 insertions, 8 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index 4af0d277c..6b3d39730 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
@@ -3,12 +3,14 @@
3 <img [src]="getAvatarUrl()" alt="Avatar" /> 3 <img [src]="getAvatarUrl()" alt="Avatar" />
4 4
5 <div class="form-group"> 5 <div class="form-group">
6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize [readonly]="(user === null) ? true : false" 6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
7 (click)="openVisitorModal($event)" formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }" 7 [readonly]="(user === null) ? true : false"
8 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> 8 (click)="openVisitorModal($event)"
9 formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
10 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
9 11
10 </textarea> 12 </textarea>
11 <my-help class="markdown-guide" helpType="custom" iconName="markdown" i18n-title title="Markdown compatible"> 13 <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" i18n-title title="Markdown compatible">
12 <ng-template ptTemplate="customHtml"> 14 <ng-template ptTemplate="customHtml">
13 <span i18n>Markdown compatible that supports:</span> 15 <span i18n>Markdown compatible that supports:</span>
14 16
@@ -27,6 +29,7 @@
27 <li> 29 <li>
28 <span i18n>Emoji markup</span> 30 <span i18n>Emoji markup</span>
29 <code>:smile:</code> 31 <code>:smile:</code>
32 <div><a href="" (click)="openEmojiModal($event)" i18n>See complete list</a></div>
30 </li> 33 </li>
31 </ul> 34 </ul>
32 </ng-template> 35 </ng-template>
@@ -50,7 +53,7 @@
50<ng-template #visitorModal let-modal> 53<ng-template #visitorModal let-modal>
51 <div class="modal-header"> 54 <div class="modal-header">
52 <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4> 55 <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
53 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon> 56 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
54 </div> 57 </div>
55 <div class="modal-body"> 58 <div class="modal-body">
56 <span i18n> 59 <span i18n>
@@ -66,7 +69,7 @@
66 <div class="modal-footer inputs"> 69 <div class="modal-footer inputs">
67 <input 70 <input
68 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel" 71 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
69 (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()" 72 (click)="hideModals()" (key.enter)="hideModals()"
70 > 73 >
71 74
72 <input 75 <input
@@ -75,3 +78,22 @@
75 > 78 >
76 </div> 79 </div>
77</ng-template> 80</ng-template>
81
82<ng-template #emojiModal>
83 <div class="modal-header">
84 <h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4>
85 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
86 </div>
87 <div class="modal-body">
88 <table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue">
89 <tr>
90 <td>
91 <span>{{ emojiMarkup.value }}</span>
92 </td>
93 <td>
94 <code>:{{ emojiMarkup.key }}:</code>
95 </td>
96 </tr>
97 </table>
98 </div>
99</ng-template>
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index daaf337c8..2be187670 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -99,6 +99,16 @@ form {
99 } 99 }
100} 100}
101 101
102.table-emoji {
103 td {
104 &:first-child {
105 width: 20px;
106 }
107
108 vertical-align: top;
109 }
110}
111
102@media screen and (max-width: 600px) { 112@media screen and (max-width: 600px) {
103 textarea, .comment-buttons button { 113 textarea, .comment-buttons button {
104 font-size: 14px !important; 114 font-size: 14px !important;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
index c6e9c73b8..3d0611a2d 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
@@ -27,6 +27,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
27 @Output() cancel = new EventEmitter() 27 @Output() cancel = new EventEmitter()
28 28
29 @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal 29 @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
30 @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
30 @ViewChild('textarea', { static: true }) textareaElement: ElementRef 31 @ViewChild('textarea', { static: true }) textareaElement: ElementRef
31 32
32 addingComment = false 33 addingComment = false
@@ -44,6 +45,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
44 super() 45 super()
45 } 46 }
46 47
48 get emojiMarkupList () {
49 const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
50
51 return emojiMarkup
52 }
53
47 ngOnInit () { 54 ngOnInit () {
48 this.buildForm({ 55 this.buildForm({
49 text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT 56 text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
@@ -97,7 +104,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
97 } 104 }
98 } 105 }
99 106
100 hideVisitorModal () { 107 openEmojiModal (event: any) {
108 event.preventDefault()
109 this.modalService.open(this.emojiModal, { backdrop: true })
110 }
111
112 hideModals () {
101 this.modalService.dismissAll() 113 this.modalService.dismissAll()
102 } 114 }
103 115
@@ -145,7 +157,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
145 } 157 }
146 158
147 gotoLogin () { 159 gotoLogin () {
148 this.hideVisitorModal() 160 this.hideModals()
149 this.router.navigate([ '/login' ]) 161 this.router.navigate([ '/login' ])
150 } 162 }
151 163