Custom channel emoticons WIP (#130): fix CSS

CHANGELOG.md

@@ -1,5 +1,4 @@
 TODO: tag conversejs livechat branch, and replace commit ID in build-converse.js
-TODO: check that the help url is ok for the emojis configuration page.
 
 # Changelog
 
@@ -9,7 +8,7 @@ TODO: check that the help url is ok for the emojis configuration page.
 
 * Overhauled configuration page, with more broadly customizable lists of parameters by @Murazaki ([See pull request #352](https://github.com/JohnXLivingston/peertube-plugin-livechat/pull/352)).
 * #377: new setting to listen C2S connection on non-localhost interfaces.
-* #130: custom channel emoticons.
+* #130: channel custom emojis.
 
 ### Minor changes and fixes
 

assets/styles/configuration.scss

@@ -217,8 +217,8 @@ $small-view: 800px;
     }
   }
 
-  .peertube-livechat-emojis-thead-file {
-    min-width: 400px;
+  .peertube-livechat-emojis-col-file {
+    width: 150px;
   }
 }
 

client/common/configuration/elements/channel-emojis.ts

@@ -46,7 +46,7 @@ export class ChannelEmojisElement extends LivechatElement {
       url: {
         colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),
         description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC),
-        headerClassList: ['peertube-livechat-emojis-thead-file']
+        headerClassList: ['peertube-livechat-emojis-col-file']
       }
     }
     const tableSchema: DynamicFormSchema = {
@@ -56,7 +56,8 @@ export class ChannelEmojisElement extends LivechatElement {
       },
       url: {
         inputType: 'image-file',
-        default: ''
+        default: '',
+        colClassList: ['peertube-livechat-emojis-col-file']
       }
     }
     return this._asyncTaskRender.render({

client/common/lib/elements/dynamic-table-form.ts

@@ -70,6 +70,7 @@ interface CellDataSchema {
   separators?: string[]
   inputType?: DynamicTableAcceptedInputTypes
   default?: DynamicTableAcceptedTypes
+  colClassList?: string[] // CSS classes to add to the <td> element.
 }
 
 interface DynamicTableRowData {
@@ -460,7 +461,11 @@ export class DynamicTableFormElement extends LivechatElement {
         `with field type '${propertySchema.inputType as string}' for form entry '${propertyName.toString()}'.`)
     }
 
-    return html`<td class="form-group">${formElement}</td>`
+    const classList = ['form-group']
+    if (propertySchema.colClassList) {
+      classList.push(...propertySchema.colClassList)
+    }
+    return html`<td class=${classList.join(' ')}>${formElement}</td>`
   }
 
   _renderInput = (rowId: number,

shared/lib/emojis.ts

@@ -1,3 +1,7 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
 export const maxSize: number = 30 * 1024
 export const allowedExtensions = ['png', 'jpg', 'jpeg', 'gif']
 export const inputFileAccept = ['image/jpg', 'image/png', 'image/gif']