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

Dynamic table description: always displayed, in a separate line.

Browse Source
This commit is contained in:
John Livingston 2024-06-11 17:49:18 +02:00
parent 597afc8ba6
commit 2668e5174c
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
3 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/styles/configuration.scss
View File

@ -223,8 +223,12 @@ $small-view: 800px;
} }
} }
.peertube-livechat-emojis-col-sn {
width: 30%;
}
.peertube-livechat-emojis-col-file { .peertube-livechat-emojis-col-file {
width: 150px; width: 65%;
} }
.peertube-plugin-livechat-configuration-actions { .peertube-plugin-livechat-configuration-actions {
@ -264,6 +268,11 @@ livechat-dynamic-table-form {
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: var(--greySecondaryBackgroundColor); background-color: var(--greySecondaryBackgroundColor);
} }
.livechat-dynamic-table-form-description-header {
font-size: small;
font-weight: lighter;
}
} }
button { button {

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

@ -51,7 +51,8 @@ export class ChannelEmojisElement extends LivechatElement {
const tableHeaderList: DynamicFormHeader = { const tableHeaderList: DynamicFormHeader = {
sn: { sn: {
colName: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME), colName: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME),
description: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC) description: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC),
headerClassList: ['peertube-livechat-emojis-col-sn']
}, },
url: { url: {
colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE), colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),

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

@ -218,30 +218,42 @@ export class DynamicTableFormElement extends LivechatElement {
} }
private readonly _renderHeader = (): TemplateResult => { private readonly _renderHeader = (): TemplateResult => {
const columns = Object.entries(this.header)
.sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
return html`<thead> return html`<thead>
<tr> <tr>
${Object.entries(this.header) ${columns.map(([_, v]) => this._renderHeaderCell(v))}
.sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2)) <th scope="col"></th>
.map(([_, v]) => this._renderHeaderCell(v))} </tr>
<tr>
${columns.map(([_, v]) => this._renderHeaderDescriptionCell(v))}
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
</thead>` </thead>`
} }
private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => { private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => {
return html`<th scope="col"> return html`<th scope="col" class=${headerCellData.headerClassList?.join(' ') ?? ''}>
<div <div
data-toggle="tooltip" data-toggle="tooltip"
data-placement="bottom" data-placement="bottom"
data-html="true" data-html="true"
title=${headerCellData.description}
class=${headerCellData.headerClassList?.join(' ') ?? ''}
> >
${headerCellData.colName} ${headerCellData.colName}
</div> </div>
</th>` </th>`
} }
private _renderHeaderDescriptionCell (headerCellData: DynamicFormHeaderCellData): TemplateResult {
const classList = ['livechat-dynamic-table-form-description-header']
if (headerCellData.headerClassList) {
classList.push(...headerCellData.headerClassList)
}
return html`<th scope="col" class=${classList.join(' ')}>
${headerCellData.description}
</th>`
}
private readonly _renderDataRow = (rowData: DynamicTableRowData): TemplateResult => { private readonly _renderDataRow = (rowData: DynamicTableRowData): TemplateResult => {
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}` const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`