From 577eec6fa45936419305f2409993651c68ea2c34 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 28 Nov 2024 10:01:49 +0100 Subject: [PATCH] Add style compat with peertube v7 --- CHANGELOG.md | 1 + assets/styles/admin/firewall/_firewall.scss | 48 ++++++++++--------- .../styles/configuration/_configuration.scss | 22 ++++----- assets/styles/elements/_share-chat.scss | 2 +- assets/styles/elements/_spinner.scss | 4 +- assets/styles/elements/_tags-input.scss | 18 +++---- assets/styles/list-rooms/_list-rooms.scss | 2 +- assets/styles/mixins/_buttons.scss | 8 ++-- assets/styles/mixins/tables.scss | 4 +- client/admin-plugin-client-plugin.ts | 2 +- client/common/configuration/register.ts | 9 ++-- client/common/lib/elements/help-button.ts | 2 +- client/common/videowatch/button.ts | 2 +- client/utils/colors.ts | 47 +++++++++++++----- conversejs/custom/shared/styles/livechat.scss | 2 +- 15 files changed, 101 insertions(+), 72 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2befddf7..1281ccca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ If you use the "system Prosody", you should update to Prosody 0.12.4, and Lua 5. * #516: new option for the moderation bot: forbid duplicate messages. * #517: new option for the moderation bot: forbid messages with too many special characters. * #518: moderators can send announcements and highlighted messages. +* #610: compatibility with PeerTube v7 ### Minor changes and fixes diff --git a/assets/styles/admin/firewall/_firewall.scss b/assets/styles/admin/firewall/_firewall.scss index 1871a09b..53cfb3a4 100644 --- a/assets/styles/admin/firewall/_firewall.scss +++ b/assets/styles/admin/firewall/_firewall.scss @@ -15,7 +15,7 @@ /* See Peertube sub-menu-h1 mixin */ font-size: 1.3rem; - border-bottom: 2px solid var(--greyBackgroundColor); + border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor)); padding-bottom: 15px; } @@ -42,45 +42,49 @@ input[type="submit"], button[type="submit"] { - // Peertube orange-button mixin &, &:active, + &.active, &:focus { - color: #fff; - background-color: var(--mainColor); + color: var(--on-primary, #fff); + background-color: var(--primary, var(--mainColor)); + border: 1px solid var(--primary, var(--mainColor)); } &:hover { - color: #fff; - background-color: var(--mainHoverColor); + color: var(--on-primary, #fff); + background-color: var(--primary-400, var(--mainHoverColor)); } - &[disabled], - &.disabled { - cursor: default; - color: #fff; - background-color: var(--inputBorderColor); + &[disabled] { + pointer-events: none; + opacity: 0.6; } } input[type="reset"], button[type="reset"] { - // Peertube grey-button mixin - background-color: var(--greyBackgroundColor); - color: var(--greyForegroundColor); + color: var(--fg, var(--mainForegroundColor)); + background-color: transparent; + border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important; - &:hover, &:active, + &.active, &:focus, - &[disabled], - &.disabled { - color: var(--greyForegroundColor); - background-color: var(--greySecondaryBackgroundColor); + &:focus-visible { + color: var(--fg, var(--mainForegroundColor)); + background-color: var(--bg-secondary-500, var(--inputBorderColor)); + border-color: var(--bg-secondary-500, var(--inputBorderColor)); } - &[disabled], - &.disabled { - cursor: default; + &:hover { + color: var(--fg, var(--mainForegroundColor)); + background-color: var(--bg-secondary-450, var(--inputBorderColor)); + } + + &[disabled] { + pointer-events: none; + opacity: 0.8; } } diff --git a/assets/styles/configuration/_configuration.scss b/assets/styles/configuration/_configuration.scss index bd21e761..60c51c69 100644 --- a/assets/styles/configuration/_configuration.scss +++ b/assets/styles/configuration/_configuration.scss @@ -21,7 +21,7 @@ $small-view: 800px; /* See Peertube sub-menu-h1 mixin */ font-size: 1.3rem; - border-bottom: 2px solid var(--greyBackgroundColor); + border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor)); padding-bottom: 15px; } @@ -29,7 +29,7 @@ $small-view: 800px; &.peertube-plugin-livechat-configuration-channel { .peertube-plugin-livechat-configuration-channel-info { /* stylelint-disable-next-line value-keyword-case */ - color: var(--mainForegroundColor); + color: var(--fg, var(--mainForegroundColor)); span:first-child { /* See Peertube .video-channel-display-name */ @@ -48,7 +48,7 @@ $small-view: 800px; h2 { // See Peertube settings-big-title mixin text-transform: uppercase; - color: var(--mainColor); + color: var(--primary, var(--mainColor)); font-weight: variables.$font-bold; font-size: 1rem; margin-bottom: 10px; @@ -82,35 +82,35 @@ $small-view: 800px; &:active, &:focus { color: #fff; - background-color: var(--mainColor); + background-color: var(--primary, var(--mainColor)); } &:hover { color: #fff; - background-color: var(--mainHoverColor); + background-color: var(--fg-400, var(--mainHoverColor)); } &[disabled], &.disabled { cursor: default; color: #fff; - background-color: var(--inputBorderColor); + background-color: var(--input-border-color, var(--inputBorderColor)); } } input[type="reset"], button[type="reset"] { // Peertube grey-button mixin - background-color: var(--greyBackgroundColor); - color: var(--greyForegroundColor); + background-color: var(--bg-secondary-400, var(--greyBackgroundColor)); + color: var(--fg-400, var(--greyForegroundColor)); &:hover, &:active, &:focus, &[disabled], &.disabled { - color: var(--greyForegroundColor); - background-color: var(--greySecondaryBackgroundColor); + color: var(--fg-400, var(--greyForegroundColor)); + background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor)); } &[disabled], @@ -178,7 +178,7 @@ $small-view: 800px; display: flex; align-items: baseline; /* stylelint-disable-next-line value-keyword-case */ - color: var(--mainForegroundColor); + color: var(--fg, var(--mainForegroundColor)); &:hover, &:focus, diff --git a/assets/styles/elements/_share-chat.scss b/assets/styles/elements/_share-chat.scss index 280e243b..a37dfae4 100644 --- a/assets/styles/elements/_share-chat.scss +++ b/assets/styles/elements/_share-chat.scss @@ -56,7 +56,7 @@ livechat-share-chat { &.livechat-shareurl-suboptions-disabled { label { /* stylelint-disable-next-line custom-property-pattern */ - color: var(--greyForegroundColor); + color: var(--fg-400, var(--greyForegroundColor)); } } } diff --git a/assets/styles/elements/_spinner.scss b/assets/styles/elements/_spinner.scss index 9fa9e39d..148a2be3 100644 --- a/assets/styles/elements/_spinner.scss +++ b/assets/styles/elements/_spinner.scss @@ -15,9 +15,9 @@ livechat-spinner, height: 48px; margin: 20px; /* stylelint-disable-next-line custom-property-pattern */ - border: 5px solid var(--greyBackgroundColor) !important; // !important is required for it to work in ConverseJS + border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important; // !important is required for it to work in ConverseJS /* stylelint-disable-next-line custom-property-pattern */ - border-bottom-color: var(--mainColor) !important; // !important is required for it to work in ConverseJS + border-bottom-color: var(--primary, var(--mainColor)) !important; // !important is required for it to work in ConverseJS border-radius: 50%; display: inline-block; box-sizing: border-box; diff --git a/assets/styles/elements/_tags-input.scss b/assets/styles/elements/_tags-input.scss index e667ff06..49aea29f 100644 --- a/assets/styles/elements/_tags-input.scss +++ b/assets/styles/elements/_tags-input.scss @@ -51,14 +51,14 @@ livechat-tags-input { transition-duration: 0.3s; @supports (scrollbar-width: auto) { - scrollbar-color: var(--greyForegroundColor) transparent; + scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent; scrollbar-width: thin; } } .livechat-tags-container, .livechat-tags-searched { - border-bottom: 1px dashed var(--greyForegroundColor); + border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor)); &.livechat-empty { height: 0; @@ -104,7 +104,7 @@ livechat-tags-input { text-align: center; font-size: 10px; margin-left: var(--tag-padding-horizontal); - color: var(--mainColor); + color: var(--primary, var(--mainColor)); border-radius: 50%; background: #fff; cursor: pointer; @@ -118,19 +118,19 @@ livechat-tags-input { &:active, &:focus { color: #fff; - background-color: var(--mainColor); + background-color: var(--primary, var(--mainColor)); .livechat-tag-close { - color: var(--mainColor); + color: var(--primary, var(--mainColor)); } } &:hover { color: #fff; - background-color: var(--mainHoverColor); + background-color: var(--fg-400, var(--mainHoverColor)); .livechat-tag-close { - color: var(--mainHoverColor); + color: var(--fg-400, var(--mainHoverColor)); } } @@ -138,10 +138,10 @@ livechat-tags-input { &.disabled { cursor: default; color: #fff; - background-color: var(--inputBorderColor); + background-color: var(--input-border-color, var(--inputBorderColor)); .livechat-tag-close { - color: var(--inputBorderColor); + color: var(--input-border-color, var(--inputBorderColor)); } } diff --git a/assets/styles/list-rooms/_list-rooms.scss b/assets/styles/list-rooms/_list-rooms.scss index 0c601f53..aa601261 100644 --- a/assets/styles/list-rooms/_list-rooms.scss +++ b/assets/styles/list-rooms/_list-rooms.scss @@ -19,7 +19,7 @@ table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) { table.peertube-plugin-livechat-prosody-list-rooms th { /* stylelint-disable-next-line custom-property-pattern */ - background-color: var(--mainHoverColor); + background-color: var(--fg-400, var(--mainHoverColor)); border: 1px solid black; /* stylelint-disable-next-line custom-property-pattern */ color: var(--mainBackgroundColor); diff --git a/assets/styles/mixins/_buttons.scss b/assets/styles/mixins/_buttons.scss index c9d70f13..2bb7c9d2 100644 --- a/assets/styles/mixins/_buttons.scss +++ b/assets/styles/mixins/_buttons.scss @@ -54,7 +54,7 @@ $bs-green: #39cc0b; &.disabled { cursor: default; color: #fff; - background-color: var(--inputBorderColor); + background-color: var(--input-border-color, var(--inputBorderColor)); } } @@ -67,7 +67,7 @@ $bs-green: #39cc0b; &:active, &:focus { color: #fff; - background-color: var(--mainColor); + background-color: var(--primary, var(--mainColor)); } &:focus, @@ -77,13 +77,13 @@ $bs-green: #39cc0b; &:hover { color: #fff; - background-color: var(--mainHoverColor); + background-color: var(--fg-400, var(--mainHoverColor)); } &[disabled], &.disabled { cursor: default; color: #fff; - background-color: var(--inputBorderColor); + background-color: var(--input-border-color, var(--inputBorderColor)); } } diff --git a/assets/styles/mixins/tables.scss b/assets/styles/mixins/tables.scss index dd7ce961..7db800ad 100644 --- a/assets/styles/mixins/tables.scss +++ b/assets/styles/mixins/tables.scss @@ -13,7 +13,7 @@ text-align: center; tr { - border: 1px var(--greyBackgroundColor) solid; + border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid; } td, @@ -34,6 +34,6 @@ } tbody tr:nth-child(odd) { - background-color: var(--greySecondaryBackgroundColor); + background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor)); } } diff --git a/client/admin-plugin-client-plugin.ts b/client/admin-plugin-client-plugin.ts index 3d4f719f..17c02c9c 100644 --- a/client/admin-plugin-client-plugin.ts +++ b/client/admin-plugin-client-plugin.ts @@ -143,7 +143,7 @@ function register (clientOptions: RegisterClientOptions): void { lastActivityEl.textContent = date.toLocaleDateString() + ' ' + date.toLocaleTimeString() } const promoteButton = document.createElement('a') - promoteButton.classList.add('orange-button', 'peertube-button-link') + promoteButton.classList.add('primary-button', 'orange-button', 'peertube-button-link') promoteButton.style.margin = '5px' promoteButton.onclick = async () => { await fetch( diff --git a/client/common/configuration/register.ts b/client/common/configuration/register.ts index 2dc36d88..447d524e 100644 --- a/client/common/configuration/register.ts +++ b/client/common/configuration/register.ts @@ -66,15 +66,16 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro for (const link of links) { if (typeof link !== 'object') { continue } if (!('key' in link)) { continue } - if (link.key !== 'in-my-library') { continue } - myLibraryLinks = link - break + if (link.key === 'in-my-library' || link.key === 'my-video-space') { + myLibraryLinks = link + break + } } if (!myLibraryLinks) { return links } if (!Array.isArray(myLibraryLinks.links)) { return links } const label = await peertubeHelpers.translate(LOC_MENU_CONFIGURATION_LABEL) - myLibraryLinks.links.push({ + myLibraryLinks.links.unshift({ label, shortLabel: label, path: '/p/livechat/configuration', diff --git a/client/common/lib/elements/help-button.ts b/client/common/lib/elements/help-button.ts index 3ee42165..76ce1ac7 100644 --- a/client/common/lib/elements/help-button.ts +++ b/client/common/lib/elements/help-button.ts @@ -38,7 +38,7 @@ export class HelpButtonElement extends LivechatElement { href="${this.url.href}" target=_blank title="${this.buttonTitle}" - class="orange-button peertube-button-link" + class="primary-button orange-button peertube-button-link" >${unsafeHTML(helpButtonSVG())}` }) } diff --git a/client/common/videowatch/button.ts b/client/common/videowatch/button.ts index 22acf797..0da190c0 100644 --- a/client/common/videowatch/button.ts +++ b/client/common/videowatch/button.ts @@ -27,7 +27,7 @@ type displayButtonOptions = displayButtonOptionsCallback | displayButtonOptionsH function displayButton (dbo: displayButtonOptions): void { const button = document.createElement('a') button.classList.add( - 'orange-button', 'peertube-button-link', + 'primary-button', 'orange-button', 'peertube-button-link', 'peertube-plugin-livechat-button', 'peertube-plugin-livechat-button-' + dbo.name ) diff --git a/client/utils/colors.ts b/client/utils/colors.ts index c6ba2b6f..f8024f33 100644 --- a/client/utils/colors.ts +++ b/client/utils/colors.ts @@ -24,18 +24,41 @@ function computeAutoColors (): AutoColors | null { const buttonStyles = window.getComputedStyle(button) const autocolors: AutoColors = { - mainForeground: styles.getPropertyValue('--mainForegroundColor').trim(), - mainBackground: styles.getPropertyValue('--mainBackgroundColor').trim(), - greyForeground: styles.getPropertyValue('--greyForegroundColor').trim(), - greyBackground: styles.getPropertyValue('--greyBackgroundColor').trim(), - menuForeground: styles.getPropertyValue('--menuForegroundColor').trim(), - menuBackground: styles.getPropertyValue('--menuBackgroundColor').trim(), - inputForeground: styles.getPropertyValue('--inputForegroundColor').trim(), - inputBackground: styles.getPropertyValue('--inputBackgroundColor').trim(), - buttonForeground: buttonStyles.color.trim(), - buttonBackground: styles.getPropertyValue('--mainColor').trim(), - link: styles.getPropertyValue('--mainForegroundColor').trim(), - linkHover: styles.getPropertyValue('--mainForegroundColor').trim() + mainForeground: styles.getPropertyValue('--fg').trim() || + styles.getPropertyValue('--mainForegroundColor').trim(), + + mainBackground: styles.getPropertyValue('--bg').trim() || + styles.getPropertyValue('--mainBackgroundColor').trim(), + + greyForeground: styles.getPropertyValue('--fg-300').trim() || + styles.getPropertyValue('--greyForegroundColor').trim(), + + greyBackground: styles.getPropertyValue('--bg-secondary-300').trim() || + styles.getPropertyValue('--greyBackgroundColor').trim(), + + menuForeground: styles.getPropertyValue('--fg').trim() || + styles.getPropertyValue('--menuForegroundColor').trim(), + + menuBackground: styles.getPropertyValue('--bg-secondary-400').trim() || + styles.getPropertyValue('--menuBackgroundColor').trim(), + + inputForeground: styles.getPropertyValue('--input-fg').trim() || + styles.getPropertyValue('--inputForegroundColor').trim(), + + inputBackground: styles.getPropertyValue('--input-bg').trim() || + styles.getPropertyValue('--inputBackgroundColor').trim(), + + buttonForeground: styles.getPropertyValue('--on-primary').trim() || + buttonStyles.color.trim(), + + buttonBackground: styles.getPropertyValue('--primary').trim() || + styles.getPropertyValue('--mainColor').trim(), + + link: styles.getPropertyValue('--fg').trim() || + styles.getPropertyValue('--mainForegroundColor').trim(), + + linkHover: styles.getPropertyValue('--fg-400').trim() || + styles.getPropertyValue('--mainForegroundColor').trim() } const autoColorsTest = areAutoColorsValid(autocolors) if (autoColorsTest !== true) { diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss index a269f538..f5b5fbc5 100644 --- a/conversejs/custom/shared/styles/livechat.scss +++ b/conversejs/custom/shared/styles/livechat.scss @@ -22,7 +22,7 @@ body.livechat-iframe { } #conversejs .livechat-mini-muc-bar-buttons { - a.orange-button { + a.primary-button { // force these colors... color: var(--peertube-button-foreground); background-color: var(--peertube-button-background);