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

Custom channel emoticons WIP (#130): fix CSS

Browse Source
This commit is contained in:
John Livingston 2024-06-07 14:08:35 +02:00
parent f1cf98921f
commit 92cf83dcdf
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
5 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -1,5 +1,4 @@
TODO: tag conversejs livechat branch, and replace commit ID in build-converse.js 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 # 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)). * 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. * #377: new setting to listen C2S connection on non-localhost interfaces.
* #130: custom channel emoticons. * #130: channel custom emojis.
### Minor changes and fixes ### Minor changes and fixes

4
assets/styles/configuration.scss
View File

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

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

@ -46,7 +46,7 @@ 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'] headerClassList: ['peertube-livechat-emojis-col-file']
} }
} }
const tableSchema: DynamicFormSchema = { const tableSchema: DynamicFormSchema = {
@ -56,7 +56,8 @@ export class ChannelEmojisElement extends LivechatElement {
}, },
url: { url: {
inputType: 'image-file', inputType: 'image-file',
default: '' default: '',
colClassList: ['peertube-livechat-emojis-col-file']
} }
} }
return this._asyncTaskRender.render({ return this._asyncTaskRender.render({

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

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

4
shared/lib/emojis.ts
View File

@ -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 maxSize: number = 30 * 1024
export const allowedExtensions = ['png', 'jpg', 'jpeg', 'gif'] export const allowedExtensions = ['png', 'jpg', 'jpeg', 'gif']
export const inputFileAccept = ['image/jpg', 'image/png', 'image/gif'] export const inputFileAccept = ['image/jpg', 'image/png', 'image/gif']