Add emoji list to markdown infos

Chocobozzz · Aug 9, 2020 · 3652611 · 3652611
1 parent b789526
commit 3652611
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 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
@@ -8,7 +8,7 @@
  (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
 
  </textarea>
- <my-help class="markdown-guide" helpType="custom" iconName="markdown" i18n-title title="Markdown compatible">
+ <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" i18n-title title="Markdown compatible">
  <ng-template ptTemplate="customHtml">
  <span i18n>Markdown compatible that supports:</span>
 
@@ -27,6 +27,7 @@
  <li>
  <span i18n>Emoji markup</span>
  <code>:smile:</code>
+ <div><a href="" (click)="openEmojiModal($event)" i18n>See complete list</a></div>
  </li>
  </ul>
  </ng-template>
@@ -50,7 +51,7 @@
 <ng-template #visitorModal let-modal>
  <div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
- <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon>
+ <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
  </div>
  <div class="modal-body">
  <span i18n>
@@ -66,7 +67,7 @@ <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from c
  <div class="modal-footer inputs">
  <input
  type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
- (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
+ (click)="hideModals()" (key.enter)="hideModals()"
  >
 
  <input
@@ -75,3 +76,22 @@ <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from c
  >
  </div>
 </ng-template>
+
+<ng-template #emojiModal>
+ <div class="modal-header">
+ <h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4>
+ <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
+ </div>
+ <div class="modal-body">
+ <table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue">
+ <tr>
+ <td>
+ <span>{{ emojiMarkup.value }}</span>
+ </td>
+ <td>
+ <code>:{{ emojiMarkup.key }}:</code>
+ </td>
+ </tr>
+ </table>
+ </div>
+</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
@@ -99,6 +99,16 @@ form {
  }
 }
 
+.table-emoji {
+ td {
+ &:first-child {
+ width: 20px;
+ }
+
+ vertical-align: top;
+ }
+}
+
 @media screen and (max-width: 600px) {
  textarea, .comment-buttons button {
  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
@@ -27,6 +27,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  @Output() cancel = new EventEmitter()
 
  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
+ @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
  @ViewChild('textarea', { static: true }) textareaElement: ElementRef
 
  addingComment = false
@@ -44,6 +45,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  super()
  }
 
+ get emojiMarkupList () {
+ const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
+
+ return emojiMarkup
+ }
+
  ngOnInit () {
  this.buildForm({
  text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
@@ -97,7 +104,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  }
  }
 
- hideVisitorModal () {
+ openEmojiModal (event: any) {
+ event.preventDefault()
+ this.modalService.open(this.emojiModal, { backdrop: true })
+ }
+
+ hideModals () {
  this.modalService.dismissAll()
  }
 
@@ -145,7 +157,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  }
 
  gotoLogin () {
- this.hideVisitorModal()
+ this.hideModals()
  this.router.navigate([ '/login' ])
  }