aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorKimsible <1877318+kimsible@users.noreply.github.com>2020-11-08 11:35:09 +0100
committerGitHub <noreply@github.com>2020-11-08 11:35:09 +0100
commitf34cc2a48e534c96598490e1d13e426f05b63d0f (patch)
tree43d7e61a1be067569babfea31c8b784f42a10d11 /client
parent98b94643127d881cbc09a12812185aed44173f16 (diff)
downloadPeerTube-f34cc2a48e534c96598490e1d13e426f05b63d0f.tar.gz
PeerTube-f34cc2a48e534c96598490e1d13e426f05b63d0f.tar.zst
PeerTube-f34cc2a48e534c96598490e1d13e426f05b63d0f.zip
Improve markdown-it emoji list column display (#3253)
Co-authored-by: kimsible <kimsible@users.noreply.github.com> Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html15
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss21
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts15
3 files changed, 32 insertions, 19 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 22bcd65db..ca9cd863b 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
@@ -85,15 +85,10 @@
85 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon> 85 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
86 </div> 86 </div>
87 <div class="modal-body"> 87 <div class="modal-body">
88 <table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue"> 88 <div class="emoji-flex">
89 <tr> 89 <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
90 <td> 90 {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
91 <span>{{ emojiMarkup.value }}</span> 91 </div>
92 </td> 92 </div>
93 <td>
94 <code>:{{ emojiMarkup.key }}:</code>
95 </td>
96 </tr>
97 </table>
98 </div> 93 </div>
99</ng-template> 94</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 2be187670..d938e2e28 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,13 +99,22 @@ form {
99 } 99 }
100} 100}
101 101
102.table-emoji { 102.emoji-flex {
103 td { 103 display: flex;
104 &:first-child { 104 flex-flow: row wrap;
105 width: 20px; 105 align-items: center;
106
107 .emoji-flex-item {
108 text-align: left;
109 margin: auto;
110 min-width: 227px;
111 flex: 1;
112
113 code {
114 display: inline-block;
115 vertical-align: middle;
116 margin-left: 5px;
106 } 117 }
107
108 vertical-align: top;
109 } 118 }
110} 119}
111 120
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 d746a614b..4bde5c53d 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
@@ -43,9 +43,18 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
43 } 43 }
44 44
45 get emojiMarkupList () { 45 get emojiMarkupList () {
46 const emojiMarkup = require('markdown-it-emoji/lib/data/light.json') 46 const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
47
48 // Populate emoji-markup-list from object to array to avoid keys alphabetical order
49 const emojiMarkupArrayList = []
50 for (const emojiMarkupName in emojiMarkupObjectList) {
51 if (emojiMarkupName) {
52 const emoji = emojiMarkupObjectList[emojiMarkupName]
53 emojiMarkupArrayList.push([emoji, emojiMarkupName])
54 }
55 }
47 56
48 return emojiMarkup 57 return emojiMarkupArrayList
49 } 58 }
50 59
51 ngOnInit () { 60 ngOnInit () {
@@ -89,7 +98,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
89 98
90 openEmojiModal (event: any) { 99 openEmojiModal (event: any) {
91 event.preventDefault() 100 event.preventDefault()
92 this.modalService.open(this.emojiModal, { backdrop: true }) 101 this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
93 } 102 }
94 103
95 hideModals () { 104 hideModals () {