Skip to content

Commit

Permalink
Merge branch 'main' into cc-check-poc
Browse files Browse the repository at this point in the history
  • Loading branch information
danalvrz authored Dec 22, 2024
2 parents 9dd0acd + a2f87d4 commit 47ff9be
Show file tree
Hide file tree
Showing 22 changed files with 245 additions and 67 deletions.
31 changes: 31 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,37 @@

<!-- towncrier release notes start -->

## 6.0.0-alpha.9 (2024-12-17)

### Feature

- Added logos footer handlers for logo size and logos container size. Overall improvements for look and feel. @sneridagh [#451](https://github.com/kitconcept/volto-light-theme/pull/451)

### Bugfix

- Remove teaser styling tab inside grids since it's empty. @sneridagh [#449](https://github.com/kitconcept/volto-light-theme/pull/449)
- Remove the last dangling `aspect-ratio` handler from image block. @sneridagh [#450](https://github.com/kitconcept/volto-light-theme/pull/450)

## 6.0.0-alpha.8 (2024-12-13)

### Bugfix

- Remove the `aspect-ratio` handler by default in images and teasers. @sneridagh [#448](https://github.com/kitconcept/volto-light-theme/pull/448)

## 6.0.0-alpha.7 (2024-12-11)

### Feature

- Image aspect-ratio handlers for Teaser/Image inside a grid. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)

### Bugfix

- Don't show image size and alignment settings for image block inside a grid. @danalvrz [#435](https://github.com/kitconcept/volto-light-theme/pull/435)

### Documentation

- Update compatibility matrix. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)

## 6.0.0-alpha.6 (2024-12-10)

### Bugfix
Expand Down
6 changes: 5 additions & 1 deletion docs/compatibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,12 @@ myst:
|-------------|---------------|
| 3.x.x | >= Volto 17.0.0-alpha.16 |
| 4.x.x | < Volto 17.18.0 |
| 5.x.x / 6.x.x | >= Volto 17.18.0 or >=Volto 18.0.0-alpha.36 |
| 5.x.x | >= Volto 17.18.0 |
| 6.x.x | >=Volto 18.0.0 |

Compatibility with Volto 16 might be achieved, but it has to be at the customization level in the specific project add-on.
This is mainly due to the `RenderBlocks` customization that is based on the one in Volto 17, because of the Grid block in core and the autogrouping feature.

Same applies for achieving compatibility with Volto 17 beyond 5.x.x series, it will require backporting the utilities registry along with the client transforms for Redux reducers and the `styleWrapperStyleObjectEnhancer` feature.

See more information about the other dependencies in `peerDependencies` in {file}`package.json`.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kitconcept/volto-light-theme-dev",
"version": "6.0.0-alpha.6",
"version": "6.0.0-alpha.9",
"description": "Volto Light Theme by kitconcept",
"main": "src/index.js",
"types": "src/types/index.d.ts",
Expand Down
31 changes: 31 additions & 0 deletions packages/volto-light-theme/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,37 @@

<!-- towncrier release notes start -->

## 6.0.0-alpha.9 (2024-12-17)

### Feature

- Added logos footer handlers for logo size and logos container size. Overall improvements for look and feel. @sneridagh [#451](https://github.com/kitconcept/volto-light-theme/pull/451)

### Bugfix

- Remove teaser styling tab inside grids since it's empty. @sneridagh [#449](https://github.com/kitconcept/volto-light-theme/pull/449)
- Remove the last dangling `aspect-ratio` handler from image block. @sneridagh [#450](https://github.com/kitconcept/volto-light-theme/pull/450)

## 6.0.0-alpha.8 (2024-12-13)

### Bugfix

- Remove the `aspect-ratio` handler by default in images and teasers. @sneridagh [#448](https://github.com/kitconcept/volto-light-theme/pull/448)

## 6.0.0-alpha.7 (2024-12-11)

### Feature

- Image aspect-ratio handlers for Teaser/Image inside a grid. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)

### Bugfix

- Don't show image size and alignment settings for image block inside a grid. @danalvrz [#435](https://github.com/kitconcept/volto-light-theme/pull/435)

### Documentation

- Update compatibility matrix. @sneridagh [#447](https://github.com/kitconcept/volto-light-theme/pull/447)

## 6.0.0-alpha.6 (2024-12-10)

### Bugfix
Expand Down
1 change: 0 additions & 1 deletion packages/volto-light-theme/news/435.bugfix

This file was deleted.

1 change: 1 addition & 0 deletions packages/volto-light-theme/news/438.bugfix
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Removed the non-breaking space from the external URL icon, removing the strange underline. @Tishasoumya-02
2 changes: 1 addition & 1 deletion packages/volto-light-theme/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kitconcept/volto-light-theme",
"version": "6.0.0-alpha.6",
"version": "6.0.0-alpha.9",
"description": "Volto Light Theme by kitconcept",
"main": "src/index.ts",
"types": "src/types/index.d.ts",
Expand Down
30 changes: 20 additions & 10 deletions packages/volto-light-theme/src/components/Blocks/Image/schema.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { defineMessages } from 'react-intl';
import { insertInArray } from '@plone/volto/helpers/Utils/Utils';
import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
import config from '@plone/volto/registry';

const messages = defineMessages({
Expand Down Expand Up @@ -55,7 +56,6 @@ export const standAloneImageBlockSchemaEnhancer = ({
schema.properties.size.disabled = formData.align === 'center';
schema.properties.styles.schema.fieldsets[0].fields = [
'blockWidth:noprefix',
'--image-aspect-ratio',
...schema.properties.styles.schema.fieldsets[0].fields,
];

Expand All @@ -67,18 +67,28 @@ export const standAloneImageBlockSchemaEnhancer = ({
actions: config.blocks.widths,
};

schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
widget: 'select',
title: 'Aspect Ratio',
choices: [
['1', '1:1'],
['16 / 9', '16/9'],
],
};

schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
formData.align === 'left' || formData.align === 'right';
}

return schema;
};

export function aspectRatioSchemaEnhancer({ schema, intl }) {
addStyling({ schema, intl });

schema.properties.styles.schema.fieldsets[0].fields = [
...schema.properties.styles.schema.fieldsets[0].fields,
'--image-aspect-ratio',
];
schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
widget: 'select',
title: 'Aspect Ratio',
choices: [
['16 / 9', '16/9'],
['1', '1:1'],
],
};

return schema;
}
34 changes: 13 additions & 21 deletions packages/volto-light-theme/src/components/Blocks/Teaser/schema.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,22 @@
export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
schema.properties.href.selectedItemAttrs.push('getRemoteUrl');

schema.properties.styles.schema.fieldsets[0].fields = [
...schema.properties.styles.schema.fieldsets[0].fields,
'--image-aspect-ratio',
];

schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
widget: 'select',
title: 'Aspect Ratio',
choices: [
['1', '1:1'],
['16 / 9', '16/9'],
],
};

return schema;
};

// Not sure why, but it was in the new one, check with blockModel3
// export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
// schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
// return schema;
// };
export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
// Remove all the existing fields from the default schema
schema.properties.styles.schema.fieldsets[0].fields = [];
schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
return schema;
};

export const gridTeaserDisableAlignHandlersSchema = ({
schema,
formData,
intl,
}) => {
schema.properties.styles.schema.fieldsets[0].fields =
schema.properties.styles.schema.fieldsets[0].fields.filter(
(item) => !['align'].includes(item),
);
return schema;
};
27 changes: 23 additions & 4 deletions packages/volto-light-theme/src/components/Footer/FooterLogos.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
import { useSelector } from 'react-redux';
import { Container } from '@plone/components';
import cx from 'classnames';

type FormState = {
content: {
data: Content;
};
form: {
global: Content;
};
navroot: {
data: {
navroot: Content;
Expand All @@ -20,11 +24,22 @@ const FooterLogos = () => {
const navroot = useSelector<FormState, Content>(
(state) => state.navroot.data.navroot,
);
const logos = navroot?.footer_logos;
const formState = useSelector<FormState, Content>(
(state) => state.form.global,
);
const logos = formState?.footer_logos || navroot?.footer_logos;
const logosSize = formState?.footer_logos_size || navroot?.footer_logos_size;
const footer_logos_container_width =
formState?.footer_logos_container_width ||
navroot?.footer_logos_container_width;

return (
<Container layout>
<ul className="footer-logos">
<Container className={cx({ [footer_logos_container_width]: 1 })}>
<ul
className={cx('footer-logos', {
[logosSize]: logosSize,
})}
>
{!isEmpty(logos?.blocks)
? logos.blocks_layout.items.map((itemId) => {
const logo = logos.blocks[itemId];
Expand All @@ -41,14 +56,18 @@ const FooterLogos = () => {
src: '',
srcAlt: '',
};
if (logo?.href) {
if (logo?.href?.length > 0) {
logoInfo.hrefTitle = logo.href[0]['title'];
logoInfo.href = flattenToAppURL(logo.href[0]['@id']);
}
if (logo?.logo && logo.logo[0]?.image_scales) {
logoInfo.logoHref = logo.logo[0]['@id'];
logoInfo.srcAlt = logo['alt'];
logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/${logo.logo[0].image_scales[logo.logo[0].image_field][0].download}`;
} else if (logo?.logo) {
logoInfo.logoHref = logo.logo[0]['@id'];
logoInfo.srcAlt = logo['alt'];
logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/@@images/image`;
}

if (!logoInfo.src) return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import config from '@plone/volto/registry';
import type { ColorPickerWidgetProps } from '@plone/volto/components/manage/Widgets/ColorPickerWidget';

const BackgroundColorWidget = (props: ColorPickerWidgetProps) => {
const colors: ColorPickerWidgetProps['colors'] =
config.settings.backgroundColors;
const colors: ColorPickerWidgetProps['colors'] = config.blocks.themes;

const defaultValue = colors.find(
(color) => color.name === config.settings.defaultBackgroundColor,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,22 @@ const ButtonsWidget = (props: ButtonsWidgetProps) => {
key={action.name}
aria-label={actionsInfoMap[action.name][1]}
onPress={() => onChange(id, action.style || action.name)}
className={isEqual(value, action.style) ? 'active' : null}
className={
isEqual(value, action.style || action.name) ? 'active' : null
}
isDisabled={disabled || isDisabled}
>
<Icon
name={actionsInfoMap[action.name][0]}
title={actionsInfoMap[action.name][1] || action.name}
size="24px"
/>
{typeof actionsInfoMap[action.name][0] === 'string' ? (
<div className="image-sizes-text">
{actionsInfoMap[action.name][0]}
</div>
) : (
<Icon
name={actionsInfoMap[action.name][0]}
title={actionsInfoMap[action.name][1] || action.name}
size="24px"
/>
)}
</Button>
))}
</div>
Expand Down
68 changes: 68 additions & 0 deletions packages/volto-light-theme/src/components/Widgets/SizeWidget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { defineMessages, useIntl } from 'react-intl';
import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
import type { IntlShape } from 'react-intl';

const messages = defineMessages({
s: {
id: 'Small',
defaultMessage: 'Small',
},
m: {
id: 'Medium',
defaultMessage: 'Medium',
},
l: {
id: 'Large',
defaultMessage: 'Large',
},
});

export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
s: ['S', intl.formatMessage(messages.s)],
m: ['M', intl.formatMessage(messages.m)],
l: ['L', intl.formatMessage(messages.l)],
});

const DEFAULT_ACTIONS = [
{
name: 's',
label: 'Small',
},
{
name: 'm',
label: 'Medium',
},
{
name: 'l',
label: 'Large',
},
];

const SizeWidget = (props: ButtonsWidgetProps) => {
const intl = useIntl();

const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
let filteredActions;
if (filterActions) {
filteredActions = actions.filter((action) =>
filterActions.includes(action.name),
);
} else {
filteredActions = actions;
}

const actionsInfo = {
...defaultActionsInfo({ intl }),
...actionsInfoMap,
};

return (
<ButtonsWidget
{...props}
actions={filteredActions}
actionsInfoMap={actionsInfo}
/>
);
};

export default SizeWidget;
Loading

0 comments on commit 47ff9be

Please sign in to comment.