diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss index fc20e3c2..a5c4e441 100644 --- a/assets/styles/configuration.scss +++ b/assets/styles/configuration.scss @@ -4,6 +4,10 @@ Here we are getting some Peertube variables (see _variables.scss in Peertube source code): We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */ +$font-size: 13px; +$button-calc-line-height: 19px; // $font-size + math.round(math.div($font-size, 2)); +$button-font-size: 15px; +$font-bold: 700; $font-semibold: 600; $grey-actor-name: #777272; $grey-background-color: var(--greyBackgroundColor); @@ -24,6 +28,73 @@ $small-view: 800px; margin-bottom: $sub-menu-margin-bottom; } + /* Channel configuration page */ + &.peertube-plugin-livechat-configuration-channel { + .peertube-plugin-livechat-configuration-channel-info { + /* stylelint-disable-next-line value-keyword-case */ + color: var(--mainForegroundColor); + + span:first-child { + /* See Peertube .video-channel-display-name */ + font-weight: $font-semibold; + font-size: 18px; + } + + span:not(:first-child) { + /* See Peertube .video-channel-name */ + margin-left: 5px; + font-size: 14px; + color: $grey-actor-name; + } + } + + h2 { + // See Peertube settings-big-title mixin + text-transform: uppercase; + color: var(--mainColor); + font-weight: $font-bold; + font-size: 1rem; + margin-bottom: 10px; + } + + input[type="submit"], + input[type="reset"] { + // Peertube rounded-line-height-1-5 mixins + line-height: $button-calc-line-height; + + // Peertube peertube-button mixin + padding: 4px 13px; + border: 0; + font-weight: $font-semibold; + border-radius: 3px !important; + text-align: center; + cursor: pointer; + font-size: $button-font-size; + } + + input[type="submit"] { + // Peertube orange-button mixin + &, + &:active, + &:focus { + color: #fff; + background-color: var(--mainColor); + } + + &:hover { + color: #fff; + background-color: var(--mainHoverColor); + } + + &[disabled], + &.disabled { + cursor: default; + color: #fff; + background-color: var(--inputBorderColor); + } + } + } + /* Channel selection page */ &.peertube-plugin-livechat-configuration-home { ul.peertube-plugin-livechat-configuration-home-channels { diff --git a/client/common/configuration/logic/channel.ts b/client/common/configuration/logic/channel.ts index ae38adab..4a4db979 100644 --- a/client/common/configuration/logic/channel.ts +++ b/client/common/configuration/logic/channel.ts @@ -28,7 +28,7 @@ async function vivifyConfigurationChannel ( const channelConfigurationOptions: ChannelConfigurationOptions = { bot: data.get('bot') === '1', botNickname: data.get('bot_nickname')?.toString() ?? '', - bannedJIDs: (data.get('banned_jids')?.toString() ?? '').split(/\r?\n|\r|\n/g), + // bannedJIDs: (data.get('banned_jids')?.toString() ?? '').split(/\r?\n|\r|\n/g), forbiddenWords: (data.get('forbidden_words')?.toString() ?? '').split(/\r?\n|\r|\n/g) } diff --git a/client/common/configuration/templates/channel.ts b/client/common/configuration/templates/channel.ts index ce9114b6..df895ac5 100644 --- a/client/common/configuration/templates/channel.ts +++ b/client/common/configuration/templates/channel.ts @@ -44,7 +44,7 @@ async function renderConfigurationChannel ( enableBot: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL), botOptions: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE), forbiddenWords: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL), - bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BANNED_JIDS_LABEL), + // bannedJIDs: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BANNED_JIDS_LABEL), save: await peertubeHelpers.translate(LOC_SAVE), cancel: await peertubeHelpers.translate(LOC_CANCEL), botNickname: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME), @@ -52,49 +52,62 @@ async function renderConfigurationChannel ( } return Mustache.render(` -
{{description}}
-