Better UI for channel configuration pages.

2024-06-12 10:27:28 +02:00 · 2024-06-12 10:27:28 +02:00 · 72c4b0804d
commit 72c4b0804d
parent e811c549fd
5 changed files with 203 additions and 215 deletions
--- a/assets/styles/configuration.scss
+++ b/assets/styles/configuration.scss
@ -22,6 +22,19 @@ $grey-background-color: var(--greyBackgroundColor);
 $sub-menu-margin-bottom: 30px;
 $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.
 */
@ -232,6 +245,7 @@ $small-view: 800px;
  }

  .peertube-plugin-livechat-configuration-actions {
+    margin-bottom: 1rem;
    text-align: right;
  }
 }
@ -275,10 +289,6 @@ livechat-dynamic-table-form {
    }
  }

-  button {
-    padding: 2px !important;
-  }
-
  .dynamic-table-add-row {
    background-color: var(--bs-green);

@ -462,3 +472,7 @@ livechat-image-file-input {
    max-height: 3em !important; // and no max-width
  }
 }
+
+livechat-configuration-row {
+  margin-top: 3rem;
+}
--- a/client/common/configuration/elements/channel-configuration.ts
+++ b/client/common/configuration/elements/channel-configuration.ts
@ -251,17 +251,14 @@ export class ChannelConfigurationElement extends LivechatElement {
          </p>

          <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
              .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
              .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
              .helpPage=${'documentation/user/streamers/slow_mode'}>
            </livechat-configuration-row>
-              </div>
-              <div class="col-12 col-lg-8 col-xl-9">
            <div class="form-group">
              <label>
+                ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
                <input
                  type="number"
                  name="slowmode_duration"
@ -278,22 +275,17 @@ export class ChannelConfigurationElement extends LivechatElement {
                      this.requestUpdate('_channelConfiguration')
                    }
                  }
-                      value="${this._channelConfiguration?.configuration.slowMode.duration}"
+                  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
@ -314,8 +306,10 @@ export class ChannelConfigurationElement extends LivechatElement {
                ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
              </label>
            </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">
                  ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
                </label>
@ -333,26 +327,16 @@ export class ChannelConfigurationElement extends LivechatElement {
                      this.requestUpdate('_channelConfiguration')
                    }
                  }
-                    value="${this._channelConfiguration?.configuration.bot.nickname}"
+                  value="${this._channelConfiguration?.configuration.bot.nickname ?? ''}"
                />
                ${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')}
-                </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
                .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
                .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
                .helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
              </livechat-configuration-row>
-                </div>
-                <div class="col-12 col-lg-8 col-xl-9">
              <livechat-dynamic-table-form
                .header=${tableHeaderList.forbiddenWords}
                .schema=${tableSchema.forbiddenWords}
@ -366,19 +350,14 @@ export class ChannelConfigurationElement extends LivechatElement {
                    }
                  }
                }
-                    .formName=${'forbidden-words'}>
-                  </livechat-dynamic-table-form>
-                </div>
-              </div>
-              <div class="row mt-5">
-                <div class="col-12 col-lg-4 col-xl-3">
+                .formName=${'forbidden-words'}
+              ></livechat-dynamic-table-form>
+
              <livechat-configuration-row
                .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
                .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
                .helpPage=${'documentation/user/streamers/bot/quotes'}>
              </livechat-configuration-row>
-                </div>
-                <div class="col-12 col-lg-8 col-xl-9">
              <livechat-dynamic-table-form
                .header=${tableHeaderList.quotes}
                .schema=${tableSchema.quotes}
@ -392,19 +371,14 @@ export class ChannelConfigurationElement extends LivechatElement {
                    }
                  }
                }
-                    .formName=${'quote'}>
-                  </livechat-dynamic-table-form>
-                </div>
-              </div>
-              <div class="row mt-5">
-                <div class="col-12 col-lg-4 col-xl-3">
+                .formName=${'quote'}
+              ></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>
-                </div>
-                <div class="col-12 col-lg-8 col-xl-9">
              <livechat-dynamic-table-form
                .header=${tableHeaderList.commands}
                .schema=${tableSchema.commands}
@ -418,11 +392,10 @@ export class ChannelConfigurationElement extends LivechatElement {
                    }
                  }
                }
-                    .formName=${'command'}>
-                  </livechat-dynamic-table-form>
-                </div>
-              </div>
+                .formName=${'command'}
+              ></livechat-dynamic-table-form>
            `}
+
            <div class="form-group mt-5">
              <button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
                ${ptTr(LOC_CANCEL)}
--- a/client/common/configuration/elements/channel-emojis.ts
+++ b/client/common/configuration/elements/channel-emojis.ts
@ -93,6 +93,8 @@ export class ChannelEmojisElement extends LivechatElement {
            </livechat-help-button>
          </p>

+          
+          <form role="form" @submit=${this._saveEmojis}>
            <div class="peertube-plugin-livechat-configuration-actions">
              ${
                this._channelEmojisConfiguration?.emojis?.customEmojis?.length
@ -118,8 +120,6 @@ export class ChannelEmojisElement extends LivechatElement {
              }
            </div>

-          <form role="form" @submit=${this._saveEmojis}>
-            <div class="row mt-5">
            <livechat-dynamic-table-form
              .header=${tableHeaderList}
              .schema=${tableSchema}
@ -141,7 +141,7 @@ export class ChannelEmojisElement extends LivechatElement {
                }
              }
            ></livechat-dynamic-table-form>
-            </div>
+
            <div class="form-group mt-5">
              <button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
                ${ptTr(LOC_CANCEL)}
--- a/client/common/lib/elements/configuration-row.ts
+++ b/client/common/lib/elements/configuration-row.ts
@ -19,10 +19,11 @@ export class ConfigurationRowElement extends LivechatElement {

  protected override render = (): unknown => {
    return html`
-      <h2>${this.title}</h2>
+      <h2>
+        ${this.title}
+        <livechat-help-button .page=${this.helpPage}></livechat-help-button>
+      </h2>
      <p>${this.description}</p>
-      <livechat-help-button .page=${this.helpPage}>
-      </livechat-help-button>
      `
  }
 }
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/client/common/lib/elements/dynamic-table-form.ts
@ -268,7 +268,7 @@ export class DynamicTableFormElement extends LivechatElement {
        <button type="button"
          class="peertube-button-link orange-button dynamic-table-remove-row"
          .title=${ptTr(LOC_ACTION_REMOVE_ENTRY)}
-          @click=${() => this._removeRow(rowData._id)}
+          @click=${async () => this._removeRow(rowData._id)}
        >
          ${unsafeHTML(RemoveSVG)}
        </button>