Skip to content

Commit

Permalink
Last changes
Browse files Browse the repository at this point in the history
  • Loading branch information
sneridagh committed Oct 29, 2024
1 parent 70fbf49 commit f1d4975
Show file tree
Hide file tree
Showing 10 changed files with 107 additions and 17 deletions.
1 change: 0 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,3 @@ cypress
node_modules
acceptance
*.json
remove_me
7 changes: 6 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@ module.exports = {
rules: {
'import/no-unresolved': 1,
'import/named': 'error',
'react/jsx-filename-extension': 'error',
'react/jsx-filename-extension': [
2,
{
extensions: ['.jsx', '.tsx'],
},
],
'no-restricted-imports': [
'error',
{
Expand Down
6 changes: 5 additions & 1 deletion packages/volto-light-theme/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,13 @@
},
"devDependencies": {
"@plone/scripts": "^3.6.2",
"@plone/types": "workspace:*",
"@types/react": "^18.2.27",
"@types/react-dom": "^18.2.12",
"react-redux": "8.1.2",
"react-router-dom": "5.2.0",
"release-it": "^17.7.0"
"release-it": "^17.7.0",
"typescript": "^5.6.3"
},
"dependencies": {
"@plone/components": "workspace:*"
Expand Down
43 changes: 29 additions & 14 deletions packages/volto-light-theme/src/components/Theming/Theming.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,45 @@ import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
import Helmet from '@plone/volto/helpers/Helmet/Helmet';
import config from '@plone/volto/registry';

function buildStyleTag(content, colors) {
if (Array.isArray(colors)) {
return colors
.filter((color) => content[color])
.map((color) => {
return `--${color.replace(/_/g, '-')}: ${content[color]};`;
});
}
}

const Theming = ({ content }) => {
const theme = content.theme || true;
const color1 = content.color1 || 'red';
const color2 = content.color2;
const color3 = content.color3;
const color4 = content.color4;
const theme = true; // Do we want a named theme?

const COLORS = [
'theme_color',
'theme_high_contrast_color',
'theme_font_color',
'theme_low_contrast_font_color',
'theme_color_secondary',
'theme_high_contrast_color_secondary',
'theme_font_color_secondary',
'theme_low_contrast_font_color_secondary',
]; // Coming from config?

return (
<>
{theme ? (
<>
{/* <BodyClass className={isSubsite ? 'is-subsite' : null}></BodyClass> */}
<BodyClass className={theme ? `theme--${theme}` : null}></BodyClass>

{theme && (
<Helmet>
<style>{`
:root {
--custom-theme-color1: ${color1};
--custom-theme-color2: ${color2};
--custom-theme-color3: ${color3};
--custom-theme-color4: ${color4};
}
`}</style>
<style>
{`
:root {
${buildStyleTag(content, COLORS)}
}
`}
</style>
</Helmet>
)}
</>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { ColorField, ColorPicker } from '@plone/components';
import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';

import '@plone/components/src/styles/basic/ColorPicker.css';

const ColorPickerWidget = (props: {
id: string;
title: string;
value: string;
default: string;
onChange: (id: string, value: any) => void;
}) => {
// console.log(props.value);
return (
<FormFieldWrapper {...props} className="color">
<ColorPicker
defaultValue="#ffffff"
onChange={(value) =>
props.onChange(props.id, value?.toString('hex') || null)
}
value={props.value || '#ffffff'}
/>
<ColorField
aria-label={`Pick a color for ${props.title}`}
value={props.value}
onChange={(value) =>
props.onChange(props.id, value?.toString('hex') || null)
}
/>
</FormFieldWrapper>
);
};

export default ColorPickerWidget;
Empty file.
14 changes: 14 additions & 0 deletions packages/volto-light-theme/src/config/widgets.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { ConfigType } from '@plone/registry';
import ColorPicker from '../components/Widgets/ColorPickerWidget';

declare module '@plone/types' {
export interface WidgetsConfigByWidget {
color: typeof ColorPicker;
}
}

export default function install(config: ConfigType) {
config.widgets.widget.color = ColorPicker;

return config;
}
2 changes: 2 additions & 0 deletions packages/volto-light-theme/src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import { mapsBlockSchemaEnhancer } from './components/Blocks/Maps/schema';
import { sliderBlockSchemaEnhancer } from './components/Blocks/Slider/schema';
import EventMetadataView from './components/Blocks/EventMetadata/View';
import installSlots from './config/slots';
import installWidgets from './config/widgets';

const BG_COLORS = [
{ name: 'transparent', label: 'Transparent' },
Expand All @@ -57,6 +58,7 @@ defineMessages({

const applyConfig = (config) => {
installSlots(config);
installWidgets(config);

config.settings.enableAutoBlockGroupingByBackgroundColor = true;
config.settings.navDepth = 3;
Expand Down
15 changes: 15 additions & 0 deletions packages/volto-light-theme/src/theme/_widgets.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.field.color {
.eight.wide.column {
flex-direction: row;
align-items: center;

input {
padding-left: 8px;
line-height: 1;
}
}
}

.react-aria-ColorSwatch {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
2 changes: 2 additions & 0 deletions packages/volto-light-theme/src/theme/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
@import 'blocks-chooser';
@import 'blocks/eventMetadata';

@import 'widgets';

@import 'temp';

/* No CSS beyond this point except next line */
Expand Down

0 comments on commit f1d4975

Please sign in to comment.