Custom channel emoticons WIP (#130)

This commit is contained in:
John Livingston 2024-06-07 12:02:50 +02:00
parent 1b9ecea443
commit 47b580d132
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
3 changed files with 21 additions and 8 deletions

View File

@ -216,6 +216,10 @@ $small-view: 800px;
} }
} }
} }
.peertube-livechat-emojis-thead-file {
min-width: 400px;
}
} }
livechat-dynamic-table-form { livechat-dynamic-table-form {

View File

@ -45,7 +45,8 @@ export class ChannelEmojisElement extends LivechatElement {
}, },
url: { url: {
colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE), colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),
description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC) description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC),
headerClassList: ['peertube-livechat-emojis-thead-file']
} }
} }
const tableSchema: DynamicFormSchema = { const tableSchema: DynamicFormSchema = {

View File

@ -78,11 +78,14 @@ interface DynamicTableRowData {
row: { [key: string]: DynamicTableAcceptedTypes } row: { [key: string]: DynamicTableAcceptedTypes }
} }
export interface DynamicFormHeader { interface DynamicFormHeaderCellData {
[key: string]: {
colName: TemplateResult | DirectiveResult colName: TemplateResult | DirectiveResult
description: TemplateResult | DirectiveResult description: TemplateResult | DirectiveResult
headerClassList?: string[]
} }
export interface DynamicFormHeader {
[key: string]: DynamicFormHeaderCellData
} }
export interface DynamicFormSchema { [key: string]: CellDataSchema } export interface DynamicFormSchema { [key: string]: CellDataSchema }
@ -197,10 +200,15 @@ export class DynamicTableFormElement extends LivechatElement {
</thead>` </thead>`
} }
private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult | DirectiveResult private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => {
description: TemplateResult | DirectiveResult }): TemplateResult => {
return html`<th scope="col"> return html`<th scope="col">
<div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}> <div
data-toggle="tooltip"
data-placement="bottom"
data-html="true"
title=${headerCellData.description}
class=${headerCellData.headerClassList?.join(' ') ?? ''}
>
${headerCellData.colName} ${headerCellData.colName}
</div> </div>
</th>` </th>`