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;
}

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

@ -251,17 +251,14 @@ 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">
<div class="col-12 col-lg-4 col-xl-3">
<livechat-configuration-row <livechat-configuration-row
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
.helpPage=${'documentation/user/streamers/slow_mode'}> .helpPage=${'documentation/user/streamers/slow_mode'}>
</livechat-configuration-row> </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group"> <div class="form-group">
<label> <label>
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
<input <input
type="number" type="number"
name="slowmode_duration" name="slowmode_duration"
@ -278,22 +275,17 @@ export class ChannelConfigurationElement extends LivechatElement {
this.requestUpdate('_channelConfiguration') this.requestUpdate('_channelConfiguration')
} }
} }
value="${this._channelConfiguration?.configuration.slowMode.duration}" value="${this._channelConfiguration?.configuration.slowMode.duration ?? ''}"
/> />
</label> </label>
${this._renderFeedback('peertube-livechat-slowmode-duration-feedback', 'slowMode.duration')} ${this._renderFeedback('peertube-livechat-slowmode-duration-feedback', 'slowMode.duration')}
</div> </div>
</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_BOT_OPTIONS_TITLE)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
.description=${''} .description=${''}
.helpPage=${'documentation/user/streamers/channel'}> .helpPage=${'documentation/user/streamers/channel'}>
</livechat-configuration-row> </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<div class="form-group"> <div class="form-group">
<label> <label>
<input <input
@ -314,8 +306,10 @@ export class ChannelConfigurationElement extends LivechatElement {
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)} ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
</label> </label>
</div> </div>
${this._channelConfiguration?.configuration.bot.enabled
? html`<div class="form-group"> ${!this._channelConfiguration?.configuration.bot.enabled
? ''
: html`<div class="form-group">
<label for="peertube-livechat-bot-nickname"> <label for="peertube-livechat-bot-nickname">
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)} ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
</label> </label>
@ -333,26 +327,16 @@ export class ChannelConfigurationElement extends LivechatElement {
this.requestUpdate('_channelConfiguration') this.requestUpdate('_channelConfiguration')
} }
} }
value="${this._channelConfiguration?.configuration.bot.nickname}" value="${this._channelConfiguration?.configuration.bot.nickname ?? ''}"
/> />
${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')} ${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')}
</div>`
: ''
}
</div> </div>
</div>
${!this._channelConfiguration?.configuration.bot.enabled
? ''
: html`
<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_FORBIDDEN_WORDS_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
.helpPage=${'documentation/user/streamers/bot/forbidden_words'}> .helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
</livechat-configuration-row> </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<livechat-dynamic-table-form <livechat-dynamic-table-form
.header=${tableHeaderList.forbiddenWords} .header=${tableHeaderList.forbiddenWords}
.schema=${tableSchema.forbiddenWords} .schema=${tableSchema.forbiddenWords}
@ -366,19 +350,14 @@ export class ChannelConfigurationElement extends LivechatElement {
} }
} }
} }
.formName=${'forbidden-words'}> .formName=${'forbidden-words'}
</livechat-dynamic-table-form> ></livechat-dynamic-table-form>
</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_QUOTE_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
.helpPage=${'documentation/user/streamers/bot/quotes'}> .helpPage=${'documentation/user/streamers/bot/quotes'}>
</livechat-configuration-row> </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<livechat-dynamic-table-form <livechat-dynamic-table-form
.header=${tableHeaderList.quotes} .header=${tableHeaderList.quotes}
.schema=${tableSchema.quotes} .schema=${tableSchema.quotes}
@ -392,19 +371,14 @@ export class ChannelConfigurationElement extends LivechatElement {
} }
} }
} }
.formName=${'quote'}> .formName=${'quote'}
</livechat-dynamic-table-form> ></livechat-dynamic-table-form>
</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_COMMAND_LABEL)} .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)} .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
.helpPage=${'documentation/user/streamers/bot/commands'}> .helpPage=${'documentation/user/streamers/bot/commands'}>
</livechat-configuration-row> </livechat-configuration-row>
</div>
<div class="col-12 col-lg-8 col-xl-9">
<livechat-dynamic-table-form <livechat-dynamic-table-form
.header=${tableHeaderList.commands} .header=${tableHeaderList.commands}
.schema=${tableSchema.commands} .schema=${tableSchema.commands}
@ -418,11 +392,10 @@ export class ChannelConfigurationElement extends LivechatElement {
} }
} }
} }
.formName=${'command'}> .formName=${'command'}
</livechat-dynamic-table-form> ></livechat-dynamic-table-form>
</div>
</div>
`} `}
<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)}

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

@ -93,6 +93,8 @@ export class ChannelEmojisElement extends LivechatElement {
</livechat-help-button> </livechat-help-button>
</p> </p>
<form role="form" @submit=${this._saveEmojis}>
<div class="peertube-plugin-livechat-configuration-actions"> <div class="peertube-plugin-livechat-configuration-actions">
${ ${
this._channelEmojisConfiguration?.emojis?.customEmojis?.length this._channelEmojisConfiguration?.emojis?.customEmojis?.length
@ -118,8 +120,6 @@ export class ChannelEmojisElement extends LivechatElement {
} }
</div> </div>
<form role="form" @submit=${this._saveEmojis}>
<div class="row mt-5">
<livechat-dynamic-table-form <livechat-dynamic-table-form
.header=${tableHeaderList} .header=${tableHeaderList}
.schema=${tableSchema} .schema=${tableSchema}
@ -141,7 +141,7 @@ export class ChannelEmojisElement extends LivechatElement {
} }
} }
></livechat-dynamic-table-form> ></livechat-dynamic-table-form>
</div>
<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>