Skip to content

Commit

Permalink
WIP change theme button
Browse files Browse the repository at this point in the history
  • Loading branch information
sneridagh committed Oct 28, 2024
1 parent 2e15d44 commit 11e49dc
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';
import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
import { isEmpty, isEqual } from 'lodash';
import { defineMessages, useIntl } from 'react-intl';
import { Button } from '@plone/components';
import cx from 'classnames';

const messages = defineMessages({
Color: {
id: 'Color',
defaultMessage: 'Color',
},
});

type Color =
| {
name: string;
label: string;
style: Record<`--${string}`, string>;
}
| {
name: string;
label: string;
style: undefined;
};

export type ColorPickerWidgetProps = {
id: string;
title: string;
value?: string;
default?: string | object;
required?: boolean;
missing_value?: unknown;
className?: string;
onChange: (id: string, value: any) => void;
colors: Color[];
themes: Color[];
};

const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
const { id, value, onChange } = props;
const colors = props.themes || props.colors || [];
const intl = useIntl();

return colors.length > 0 ? (
<FormFieldWrapper {...props} className="theme-picker-widget">
<div className="buttons">
{colors.map((color) => {
const colorName = color.name;
return (
<Button
key={id + colorName}
className={cx(colorName, { active: value === colorName })}
onPress={(e) => {
onChange(
id,
colorName === value ? props.missing_value : colorName,
);
}}
value={value}
style={color.style}
aria-label={color.label}
/>
);
})}
</div>
</FormFieldWrapper>
) : null;
};

export default ColorPickerWidget;
8 changes: 6 additions & 2 deletions packages/volto-light-theme/src/theme/_widgets.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,14 @@
text-align: center;
}

.button {
button {
position: relative;
width: 32px;
height: 32px;
padding: 1rem;
border: 2px solid #ccc;
border-radius: 100%;
margin-right: 0.25rem;

&.active {
border: 2px solid red;
Expand All @@ -57,7 +61,7 @@
}
}

.theme-picker-widget .button {
.theme-picker-widget button {
background-color: var(--theme-color);
}

Expand Down

0 comments on commit 11e49dc

Please sign in to comment.