mirror of https://github.com/Chocobozzz/PeerTube
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>pull/3250/head
parent
98b9464312
commit
f34cc2a48e
|
@ -85,15 +85,10 @@
|
||||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
|
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue">
|
<div class="emoji-flex">
|
||||||
<tr>
|
<div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
|
||||||
<td>
|
{{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
|
||||||
<span>{{ emojiMarkup.value }}</span>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td>
|
|
||||||
<code>:{{ emojiMarkup.key }}:</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
@ -99,13 +99,22 @@ form {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-emoji {
|
.emoji-flex {
|
||||||
td {
|
display: flex;
|
||||||
&:first-child {
|
flex-flow: row wrap;
|
||||||
width: 20px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,9 +43,18 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
|
||||||
}
|
}
|
||||||
|
|
||||||
get emojiMarkupList () {
|
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 () {
|
ngOnInit () {
|
||||||
|
@ -89,7 +98,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
|
||||||
|
|
||||||
openEmojiModal (event: any) {
|
openEmojiModal (event: any) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
this.modalService.open(this.emojiModal, { backdrop: true })
|
this.modalService.open(this.emojiModal, { backdrop: true, size: 'lg' })
|
||||||
}
|
}
|
||||||
|
|
||||||
hideModals () {
|
hideModals () {
|
||||||
|
|
Loading…
Reference in New Issue