LogalDeveloper/owncast
0
Fork 0
Code Activity

Remove theme colors from apperaance customization

Browse Source
This commit is contained in:
Gabe Kangas
2023-01-18 14:30:16 -08:00
parent ca0b7cd93e
commit bd8925f135
1 changed files with 15 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/components/admin/config/general/AppearanceConfig.tsx
View File

@@ -35,22 +35,6 @@ const chatColorVariables = [
{ name: 'theme-color-users-7', description: '' }, { name: 'theme-color-users-7', description: '' },
]; ];
const paletteVariables = [
{ name: 'theme-color-palette-0', description: '' },
{ name: 'theme-color-palette-1', description: '' },
{ name: 'theme-color-palette-2', description: '' },
{ name: 'theme-color-palette-3', description: '' },
{ name: 'theme-color-palette-4', description: '' },
{ name: 'theme-color-palette-5', description: '' },
{ name: 'theme-color-palette-6', description: '' },
{ name: 'theme-color-palette-7', description: '' },
{ name: 'theme-color-palette-8', description: '' },
{ name: 'theme-color-palette-9', description: '' },
{ name: 'theme-color-palette-10', description: '' },
{ name: 'theme-color-palette-11', description: '' },
{ name: 'theme-color-palette-12', description: '' },
];
const componentColorVariables = [ const componentColorVariables = [
{ name: 'theme-color-background-main', description: 'Background' }, { name: 'theme-color-background-main', description: 'Background' },
{ name: 'theme-color-action', description: 'Action' }, { name: 'theme-color-action', description: 'Action' },
@@ -68,16 +52,14 @@ const componentColorVariables = [
const others = [{ name: 'theme-rounded-corners', description: 'Corner radius' }]; const others = [{ name: 'theme-rounded-corners', description: 'Corner radius' }];
// Create an object so these vars can be indexed by name. // Create an object so these vars can be indexed by name.
const allAvailableValues = [ const allAvailableValues = [...componentColorVariables, ...chatColorVariables, ...others].reduce(
...paletteVariables, (obj, val) => {
...componentColorVariables, // eslint-disable-next-line no-param-reassign
...chatColorVariables, obj[val.name] = { name: val.name, description: val.description };
...others, return obj;
].reduce((obj, val) => { },
// eslint-disable-next-line no-param-reassign {},
obj[val.name] = { name: val.name, description: val.description }; );
return obj;
}, {});
// eslint-disable-next-line react/function-component-definition // eslint-disable-next-line react/function-component-definition
function ColorPicker({ function ColorPicker({
@@ -125,14 +107,12 @@ export default function Appearance() {
const setColorDefaults = () => { const setColorDefaults = () => {
const c = {}; const c = {};
[...paletteVariables, ...componentColorVariables, ...chatColorVariables, ...others].forEach( [...componentColorVariables, ...chatColorVariables, ...others].forEach(color => {
color => { const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(
const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue( `--${color.name}`,
`--${color.name}`, );
); c[color.name] = { value: resolvedColor.trim(), description: color.description };
c[color.name] = { value: resolvedColor.trim(), description: color.description }; });
},
);
setColors(c); setColors(c);
}; };
@@ -250,23 +230,7 @@ export default function Appearance() {
})} })}
</Row> </Row>
</Panel> </Panel>
<Panel header={<Title level={3}>Theme Colors</Title>} key="3">
<Row gutter={[16, 16]}>
{paletteVariables.map(colorVar => {
const { name } = colorVar;
const c = colors[name];
return (
<ColorPicker
key={name}
value={c.value}
name={name}
description={c.description}
onChange={updateColor}
/>
);
})}
</Row>
</Panel>
<Panel header={<Title level={3}>Other Settings</Title>} key="4"> <Panel header={<Title level={3}>Other Settings</Title>} key="4">
How rounded should corners be? How rounded should corners be?
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>