matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Custom channel emoticons WIP (#130)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/styles/configuration.scss
View File

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

3
client/common/configuration/elements/channel-emojis.ts
View File

@ -45,7 +45,8 @@ export class ChannelEmojisElement extends LivechatElement {
},
url: {
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 = {

22
client/common/lib/elements/dynamic-table-form.ts
View File

@ -78,11 +78,14 @@ interface DynamicTableRowData {
row: { [key: string]: DynamicTableAcceptedTypes }
}
interface DynamicFormHeaderCellData {
colName: TemplateResult | DirectiveResult
description: TemplateResult | DirectiveResult
headerClassList?: string[]
}
export interface DynamicFormHeader {
[key: string]: {
colName: TemplateResult | DirectiveResult
description: TemplateResult | DirectiveResult
}
[key: string]: DynamicFormHeaderCellData
}
export interface DynamicFormSchema { [key: string]: CellDataSchema }
@ -197,10 +200,15 @@ export class DynamicTableFormElement extends LivechatElement {
</thead>`
}
private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult | DirectiveResult
description: TemplateResult | DirectiveResult }): TemplateResult => {
private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => {
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}
</div>
</th>`