luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Picking the default theme from the user preferences on reload when it is a plugin (#923)

Browse source 
Co-authored-by: Hossein <hahmadia@users.noreply.github.com>
This commit is contained in:
Jesús Espino 2021-08-11 11:53:53 +02:00 committed by GitHub
parent ca40dda8f8
commit ea140ba99b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
mattermost-plugin/webapp/src/index.tsx
View file

@ -6,6 +6,7 @@ import {Provider as ReduxProvider} from 'react-redux'
import {useHistory} from 'mm-react-router-dom'
import {GlobalState} from 'mattermost-redux/types/store'
import {getTheme} from 'mattermost-redux/selectors/entities/preferences'
const windowAny = (window as any)
windowAny.baseURL = '/plugins/focalboard'
@ -16,6 +17,7 @@ import App from '../../../webapp/src/app'
import store from '../../../webapp/src/store'
import GlobalHeader from '../../../webapp/src/components/globalHeader/globalHeader'
import FocalboardIcon from '../../../webapp/src/widgets/icons/logo'
import {setMattermostTheme} from '../../../webapp/src/theme'
import '../../../webapp/src/styles/focalboard-variables.scss'
import '../../../webapp/src/styles/main.scss'
@ -81,6 +83,16 @@ export default class Plugin {
public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
this.registry = registry
let theme = getTheme(store.getState())
setMattermostTheme(theme)
store.subscribe(() => {
const currentTheme = getTheme(store.getState())
if (currentTheme !== theme && currentTheme) {
setMattermostTheme(currentTheme)
theme = currentTheme
}
})
if (this.registry.registerProduct) {
windowAny.frontendBaseURL = '/boards'
const goToFocalboardWorkspace = () => {

23
webapp/src/theme.ts
View file

@ -169,6 +169,29 @@ export function setTheme(theme: Theme | null): Theme {
return consolidatedTheme
}
export function setMattermostTheme(theme: any): Theme {
document.documentElement.style.setProperty('--center-channel-bg-rgb', color(theme.centerChannelBg).rgb().array().join(', '))
document.documentElement.style.setProperty('--center-channel-color-rgb', color(theme.centerChannelColor).rgb().array().join(', '))
document.documentElement.style.setProperty('--button-bg-rgb', color(theme.buttonBg).rgb().array().join(', '))
document.documentElement.style.setProperty('--button-color-rgb', color(theme.buttonColor).rgb().array().join(', '))
document.documentElement.style.setProperty('--sidebar-bg-rgb', color(theme.sidebarBg).rgb().array().join(', '))
document.documentElement.style.setProperty('--sidebar-text-rgb', color(theme.sidebarText).rgb().array().join(', '))
document.documentElement.style.setProperty('--link-color-rgb', color(theme.linkColor).rgb().array().join(', '))
document.documentElement.style.setProperty('--sidebar-text-active-border', color(theme.sidebarTextActiveBorder).rgb().array().join(', '))
return setTheme({
...defaultTheme,
mainBg: color(theme.centerChannelBg).rgb().array().join(', '),
mainFg: color(theme.centerChannelColor).rgb().array().join(', '),
buttonBg: color(theme.buttonBg).rgb().array().join(', '),
buttonFg: color(theme.buttonColor).rgb().array().join(', '),
sidebarBg: color(theme.sidebarBg).rgb().array().join(', '),
sidebarFg: color(theme.sidebarColor || '#ffffff').rgb().array().join(', '),
sidebarTextActiveBorder: color(theme.sidebarTextActiveBorder).rgb().array().join(', '),
link: color(theme.linkColor).rgb().array().join(', '),
})
}
function setActiveThemeName(consolidatedTheme: Theme, theme: Theme | null) {
if (theme === null) {
activeThemeName = systemThemeName