Improve emoji list display

Chocobozzz · Nov 5, 2020 · 185bf48 · 185bf48
1 parent 861a188
commit 185bf48
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 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
@@ -85,15 +85,10 @@ <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 class="emoji-flex">
+      <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
+        {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
+      </div>
+    </div>
   </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,13 +99,21 @@ form {
   }
 }
 
-.table-emoji {
-  td {
-    &:first-child {
-      width: 20px;
+.emoji-flex {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  .emoji-flex-item {
+    text-align: left;
+    margin: auto;
+    width: 227px;
+
+    code {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 5px;
     }
-
-    vertical-align: top;
   }
 }
 

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
@@ -43,9 +43,15 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   }
 
   get emojiMarkupList () {
-    const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
+    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
 
-    return emojiMarkup
+    // Populate emoji-markup-list from object to array to avoid keys alphabetical order
+    const emojiMarkupArrayList = []
+    for (const emojiMarkupName in emojiMarkupObjectList) {
+      emojiMarkupArrayList.push([emojiMarkupObjectList[emojiMarkupName], emojiMarkupName])
+    }
+
+    return emojiMarkupArrayList
   }
 
   ngOnInit () {