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

Better UI for channel configuration pages.

Browse Source
This commit is contained in:
John Livingston 2024-06-12 10:27:28 +02:00
parent e811c549fd
commit 72c4b0804d
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
5 changed files with 203 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/styles/configuration.scss
View File

@ -22,6 +22,19 @@ $grey-background-color: var(--greyBackgroundColor);
$sub-menu-margin-bottom: 30px; $sub-menu-margin-bottom: 30px;
$small-view: 800px; $small-view: 800px;
livechat-help-button {
a {
height: 18px !important;
margin: 2px !important;
padding: 1px !important;
}
svg {
display: block;
height: auto;
}
}
/* /*
These are styles to apply for the channel configuration pages. These are styles to apply for the channel configuration pages.
*/ */
@ -232,6 +245,7 @@ $small-view: 800px;
} }
.peertube-plugin-livechat-configuration-actions { .peertube-plugin-livechat-configuration-actions {
margin-bottom: 1rem;
text-align: right; text-align: right;
} }
} }
@ -275,10 +289,6 @@ livechat-dynamic-table-form {
} }
} }
button {
padding: 2px !important;
}
.dynamic-table-add-row { .dynamic-table-add-row {
background-color: var(--bs-green); background-color: var(--bs-green);
@ -462,3 +472,7 @@ livechat-image-file-input {
max-height: 3em !important; // and no max-width max-height: 3em !important; // and no max-width
} }
} }
livechat-configuration-row {
margin-top: 3rem;
}

297
client/common/configuration/elements/channel-configuration.ts
View File

@ -251,178 +251,151 @@ export class ChannelConfigurationElement extends LivechatElement {
</p> </p>
<form livechat-configuration-channel-options role="form" @submit=${this._saveConfig}> <form livechat-configuration-channel-options role="form" @submit=${this._saveConfig}>
<div class="row mt-5"> <livechat-configuration-row
<div class="col-12 col-lg-4 col-xl-3"> .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
<livechat-configuration-row .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)} .helpPage=${'documentation/user/streamers/slow_mode'}>
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)} </livechat-configuration-row>
.helpPage=${'documentation/user/streamers/slow_mode'}> <div class="form-group">
</livechat-configuration-row> <label>
</div> ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
<div class="col-12 col-lg-8 col-xl-9"> <input
<div class="form-group"> type="number"
<label> name="slowmode_duration"
<input class="form-control ${classMap(this._getInputValidationClass('slowMode.duration'))}"
type="number" min="0"
name="slowmode_duration" max="1000"
class="form-control ${classMap(this._getInputValidationClass('slowMode.duration'))}" id="peertube-livechat-slowmode-duration"
min="0" aria-describedby="peertube-livechat-slowmode-duration-feedback"
max="1000" @input=${(event: InputEvent) => {
id="peertube-livechat-slowmode-duration" if (event?.target && this._channelConfiguration) {
aria-describedby="peertube-livechat-slowmode-duration-feedback" this._channelConfiguration.configuration.slowMode.duration =
@input=${(event: InputEvent) => { Number((event.target as HTMLInputElement).value)
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.slowMode.duration =
Number((event.target as HTMLInputElement).value)
}
this.requestUpdate('_channelConfiguration')
}
}
value="${this._channelConfiguration?.configuration.slowMode.duration}"
/>
</label>
${this._renderFeedback('peertube-livechat-slowmode-duration-feedback', 'slowMode.duration')}
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
.description=${''}
.helpPage=${'documentation/user/streamers/channel'}>
</livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group">
<label>
<input
type="checkbox"
name="bot"
id="peertube-livechat-bot"
@input=${(event: InputEvent) => {
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.bot.enabled =
(event.target as HTMLInputElement).checked
}
this.requestUpdate('_channelConfiguration')
}
}
value="1"
?checked=${this._channelConfiguration?.configuration.bot.enabled}
/>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
</label>
</div>
${this._channelConfiguration?.configuration.bot.enabled
? html`<div class="form-group">
<label for="peertube-livechat-bot-nickname">
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
</label>
<input
type="text"
name="bot_nickname"
class="form-control ${classMap(this._getInputValidationClass('bot.nickname'))}"
id="peertube-livechat-bot-nickname"
aria-describedby="peertube-livechat-bot-nickname-feedback"
@input=${(event: InputEvent) => {
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.bot.nickname =
(event.target as HTMLInputElement).value
}
this.requestUpdate('_channelConfiguration')
} }
this.requestUpdate('_channelConfiguration')
} }
value="${this._channelConfiguration?.configuration.bot.nickname}" }
/> value="${this._channelConfiguration?.configuration.slowMode.duration ?? ''}"
${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')} />
</div>` </label>
: '' ${this._renderFeedback('peertube-livechat-slowmode-duration-feedback', 'slowMode.duration')}
}
</div>
</div> </div>
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
.description=${''}
.helpPage=${'documentation/user/streamers/channel'}>
</livechat-configuration-row>
<div class="form-group">
<label>
<input
type="checkbox"
name="bot"
id="peertube-livechat-bot"
@input=${(event: InputEvent) => {
if (event?.target && this._channelConfiguration) {
this._channelConfiguration.configuration.bot.enabled =
(event.target as HTMLInputElement).checked
}
this.requestUpdate('_channelConfiguration')
}
}
value="1"
?checked=${this._channelConfiguration?.configuration.bot.enabled}
/>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
</label>
</div>
${!this._channelConfiguration?.configuration.bot.enabled ${!this._channelConfiguration?.configuration.bot.enabled
? '' ? ''
: html` : html`<div class="form-group">
<div class="row mt-5"> <label for="peertube-livechat-bot-nickname">
<div class="col-12 col-lg-4 col-xl-3"> ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
<livechat-configuration-row </label>
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)} <input
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)} type="text"
.helpPage=${'documentation/user/streamers/bot/forbidden_words'}> name="bot_nickname"
</livechat-configuration-row> class="form-control ${classMap(this._getInputValidationClass('bot.nickname'))}"
</div> id="peertube-livechat-bot-nickname"
<div class="col-12 col-lg-8 col-xl-9"> aria-describedby="peertube-livechat-bot-nickname-feedback"
<livechat-dynamic-table-form @input=${(event: InputEvent) => {
.header=${tableHeaderList.forbiddenWords} if (event?.target && this._channelConfiguration) {
.schema=${tableSchema.forbiddenWords} this._channelConfiguration.configuration.bot.nickname =
.validation=${this._validationError?.properties} (event.target as HTMLInputElement).value
.validationPrefix=${'bot.forbiddenWords'}
.rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
@update=${(e: CustomEvent) => {
if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
this.requestUpdate('_channelConfiguration')
}
} }
this.requestUpdate('_channelConfiguration')
} }
.formName=${'forbidden-words'}> }
</livechat-dynamic-table-form> value="${this._channelConfiguration?.configuration.bot.nickname ?? ''}"
</div> />
${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')}
</div> </div>
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3"> <livechat-configuration-row
<livechat-configuration-row .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)} .helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
.helpPage=${'documentation/user/streamers/bot/quotes'}> </livechat-configuration-row>
</livechat-configuration-row> <livechat-dynamic-table-form
</div> .header=${tableHeaderList.forbiddenWords}
<div class="col-12 col-lg-8 col-xl-9"> .schema=${tableSchema.forbiddenWords}
<livechat-dynamic-table-form .validation=${this._validationError?.properties}
.header=${tableHeaderList.quotes} .validationPrefix=${'bot.forbiddenWords'}
.schema=${tableSchema.quotes} .rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
.validation=${this._validationError?.properties} @update=${(e: CustomEvent) => {
.validationPrefix=${'bot.quotes'} if (this._channelConfiguration) {
.rows=${this._channelConfiguration?.configuration.bot.quotes} this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
@update=${(e: CustomEvent) => { this.requestUpdate('_channelConfiguration')
if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.quotes = e.detail
this.requestUpdate('_channelConfiguration')
}
}
} }
.formName=${'quote'}> }
</livechat-dynamic-table-form> }
</div> .formName=${'forbidden-words'}
</div> ></livechat-dynamic-table-form>
<div class="row mt-5">
<div class="col-12 col-lg-4 col-xl-3"> <livechat-configuration-row
<livechat-configuration-row .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)} .helpPage=${'documentation/user/streamers/bot/quotes'}>
.helpPage=${'documentation/user/streamers/bot/commands'}> </livechat-configuration-row>
</livechat-configuration-row> <livechat-dynamic-table-form
</div> .header=${tableHeaderList.quotes}
<div class="col-12 col-lg-8 col-xl-9"> .schema=${tableSchema.quotes}
<livechat-dynamic-table-form .validation=${this._validationError?.properties}
.header=${tableHeaderList.commands} .validationPrefix=${'bot.quotes'}
.schema=${tableSchema.commands} .rows=${this._channelConfiguration?.configuration.bot.quotes}
.validation=${this._validationError?.properties} @update=${(e: CustomEvent) => {
.validationPrefix=${'bot.commands'} if (this._channelConfiguration) {
.rows=${this._channelConfiguration?.configuration.bot.commands} this._channelConfiguration.configuration.bot.quotes = e.detail
@update=${(e: CustomEvent) => { this.requestUpdate('_channelConfiguration')
if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.commands = e.detail
this.requestUpdate('_channelConfiguration')
}
}
} }
.formName=${'command'}> }
</livechat-dynamic-table-form> }
</div> .formName=${'quote'}
</div> ></livechat-dynamic-table-form>
<livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
.helpPage=${'documentation/user/streamers/bot/commands'}>
</livechat-configuration-row>
<livechat-dynamic-table-form
.header=${tableHeaderList.commands}
.schema=${tableSchema.commands}
.validation=${this._validationError?.properties}
.validationPrefix=${'bot.commands'}
.rows=${this._channelConfiguration?.configuration.bot.commands}
@update=${(e: CustomEvent) => {
if (this._channelConfiguration) {
this._channelConfiguration.configuration.bot.commands = e.detail
this.requestUpdate('_channelConfiguration')
}
}
}
.formName=${'command'}
></livechat-dynamic-table-form>
`} `}
<div class="form-group mt-5"> <div class="form-group mt-5">
<button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}> <button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
${ptTr(LOC_CANCEL)} ${ptTr(LOC_CANCEL)}

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

@ -93,55 +93,55 @@ export class ChannelEmojisElement extends LivechatElement {
</livechat-help-button> </livechat-help-button>
</p> </p>
<div class="peertube-plugin-livechat-configuration-actions">
${
this._channelEmojisConfiguration?.emojis?.customEmojis?.length
? html`
<button
@click=${this._exportEmojis}
?disabled=${this._actionDisabled}
>
${ptTr(LOC_ACTION_EXPORT)}
</button>`
: ''
}
${
(this._channelEmojisConfiguration?.emojis?.customEmojis?.length ?? 0) < maxEmojisPerChannel
? html`
<button
@click=${this._importEmojis}
?disabled=${this._actionDisabled}
>
${ptTr(LOC_ACTION_IMPORT)}
</button>`
: ''
}
</div>
<form role="form" @submit=${this._saveEmojis}> <form role="form" @submit=${this._saveEmojis}>
<div class="row mt-5"> <div class="peertube-plugin-livechat-configuration-actions">
<livechat-dynamic-table-form ${
.header=${tableHeaderList} this._channelEmojisConfiguration?.emojis?.customEmojis?.length
.schema=${tableSchema} ? html`
.maxLines=${maxEmojisPerChannel} <button
.validation=${this._validationError?.properties} @click=${this._exportEmojis}
.validationPrefix=${'emojis'} ?disabled=${this._actionDisabled}
.rows=${this._channelEmojisConfiguration?.emojis.customEmojis} >
@update=${(e: CustomEvent) => { ${ptTr(LOC_ACTION_EXPORT)}
if (this._channelEmojisConfiguration) { </button>`
this._channelEmojisConfiguration.emojis.customEmojis = e.detail : ''
// Fixing missing ':' for shortnames: }
for (const desc of this._channelEmojisConfiguration.emojis.customEmojis) { ${
if (desc.sn === '') { continue } (this._channelEmojisConfiguration?.emojis?.customEmojis?.length ?? 0) < maxEmojisPerChannel
if (!desc.sn.startsWith(':')) { desc.sn = ':' + desc.sn } ? html`
if (!desc.sn.endsWith(':')) { desc.sn += ':' } <button
} @click=${this._importEmojis}
this.requestUpdate('_channelEmojisConfiguration') ?disabled=${this._actionDisabled}
>
${ptTr(LOC_ACTION_IMPORT)}
</button>`
: ''
}
</div>
<livechat-dynamic-table-form
.header=${tableHeaderList}
.schema=${tableSchema}
.maxLines=${maxEmojisPerChannel}
.validation=${this._validationError?.properties}
.validationPrefix=${'emojis'}
.rows=${this._channelEmojisConfiguration?.emojis.customEmojis}
@update=${(e: CustomEvent) => {
if (this._channelEmojisConfiguration) {
this._channelEmojisConfiguration.emojis.customEmojis = e.detail
// Fixing missing ':' for shortnames:
for (const desc of this._channelEmojisConfiguration.emojis.customEmojis) {
if (desc.sn === '') { continue }
if (!desc.sn.startsWith(':')) { desc.sn = ':' + desc.sn }
if (!desc.sn.endsWith(':')) { desc.sn += ':' }
} }
this.requestUpdate('_channelEmojisConfiguration')
} }
} }
></livechat-dynamic-table-form> }
</div> ></livechat-dynamic-table-form>
<div class="form-group mt-5"> <div class="form-group mt-5">
<button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}> <button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
${ptTr(LOC_CANCEL)} ${ptTr(LOC_CANCEL)}

7
client/common/lib/elements/configuration-row.ts
View File

@ -19,10 +19,11 @@ export class ConfigurationRowElement extends LivechatElement {
protected override render = (): unknown => { protected override render = (): unknown => {
return html` return html`
<h2>${this.title}</h2> <h2>
${this.title}
<livechat-help-button .page=${this.helpPage}></livechat-help-button>
</h2>
<p>${this.description}</p> <p>${this.description}</p>
<livechat-help-button .page=${this.helpPage}>
</livechat-help-button>
` `
} }
} }

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

@ -268,7 +268,7 @@ export class DynamicTableFormElement extends LivechatElement {
<button type="button" <button type="button"
class="peertube-button-link orange-button dynamic-table-remove-row" class="peertube-button-link orange-button dynamic-table-remove-row"
.title=${ptTr(LOC_ACTION_REMOVE_ENTRY)} .title=${ptTr(LOC_ACTION_REMOVE_ENTRY)}
@click=${() => this._removeRow(rowData._id)} @click=${async () => this._removeRow(rowData._id)}
> >
${unsafeHTML(RemoveSVG)} ${unsafeHTML(RemoveSVG)}
</button> </button>