diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss index 6947f7b1..f73e8ca8 100644 --- a/assets/styles/configuration.scss +++ b/assets/styles/configuration.scss @@ -223,8 +223,12 @@ $small-view: 800px; } } + .peertube-livechat-emojis-col-sn { + width: 30%; + } + .peertube-livechat-emojis-col-file { - width: 150px; + width: 65%; } .peertube-plugin-livechat-configuration-actions { @@ -264,6 +268,11 @@ livechat-dynamic-table-form { tbody tr:nth-child(odd) { background-color: var(--greySecondaryBackgroundColor); } + + .livechat-dynamic-table-form-description-header { + font-size: small; + font-weight: lighter; + } } button { diff --git a/client/common/configuration/elements/channel-emojis.ts b/client/common/configuration/elements/channel-emojis.ts index 425c3b01..876111da 100644 --- a/client/common/configuration/elements/channel-emojis.ts +++ b/client/common/configuration/elements/channel-emojis.ts @@ -51,7 +51,8 @@ export class ChannelEmojisElement extends LivechatElement { const tableHeaderList: DynamicFormHeader = { sn: { 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: { colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE), diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts index cb88d75e..0267397a 100644 --- a/client/common/lib/elements/dynamic-table-form.ts +++ b/client/common/lib/elements/dynamic-table-form.ts @@ -218,30 +218,42 @@ export class DynamicTableFormElement extends LivechatElement { } 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` - ${Object.entries(this.header) - .sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2)) - .map(([_, v]) => this._renderHeaderCell(v))} + ${columns.map(([_, v]) => this._renderHeaderCell(v))} + + + + ${columns.map(([_, v]) => this._renderHeaderDescriptionCell(v))} ` } private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => { - return html` + return html`
${headerCellData.colName}
` } + private _renderHeaderDescriptionCell (headerCellData: DynamicFormHeaderCellData): TemplateResult { + const classList = ['livechat-dynamic-table-form-description-header'] + if (headerCellData.headerClassList) { + classList.push(...headerCellData.headerClassList) + } + return html` + ${headerCellData.description} + ` + } + private readonly _renderDataRow = (rowData: DynamicTableRowData): TemplateResult => { const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`