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

Add style compat with peertube v7

Browse Source
This commit is contained in:
Chocobozzz
2024-11-28 10:01:49 +01:00
parent 2e011a8022
commit 577eec6fa4
15 changed files with 101 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/admin-plugin-client-plugin.ts
View File

@ -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(

9
client/common/configuration/register.ts
View File

@ -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',

2
client/common/lib/elements/help-button.ts
View File

@ -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())}</a>`
})
}

2
client/common/videowatch/button.ts
View File

@ -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
)

47
client/utils/colors.ts
View File

@ -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) {