IntenseWebs/PeerTube
3
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2024-12-02 05:19:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve markdown-it emoji list column display (#3253)

Browse Source 
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>
This commit is contained in:
Kimsible 2020-11-08 11:35:09 +01:00 committed by GitHub
parent 98b9464312
commit f34cc2a48e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
View File

@ -85,15 +85,10 @@
<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>

21
client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
View File

@ -99,13 +99,22 @@ form {
}
}
.table-emoji {
td {
&:first-child {
width: 20px;
}
.emoji-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
vertical-align: top;
.emoji-flex-item {
text-align: left;
margin: auto;
min-width: 227px;
flex: 1;
code {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
}
}

15
client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
View File

@ -43,9 +43,18 @@ 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) {
if (emojiMarkupName) {
const emoji = emojiMarkupObjectList[emojiMarkupName]
emojiMarkupArrayList.push([emoji, emojiMarkupName])
}
}
return emojiMarkupArrayList
}
ngOnInit () {
@ -89,7 +98,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
openEmojiModal (event: any) {
event.preventDefault()
this.modalService.open(this.emojiModal, { backdrop: true })
this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
}
hideModals () {