From 6fa5af0ee229f9f02d08ad9c38d95517bc0eaa7e Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Tue, 20 Aug 2024 10:37:20 +0200 Subject: [PATCH 01/19] icons and text development --- packages/volto-blocks/package.json | 3 +- .../components/blocks/IconsAndText/Edit.tsx | 110 +++++++++++ .../components/blocks/IconsAndText/View.tsx | 18 ++ .../components/blocks/IconsAndText/index.ts | 5 + .../components/blocks/IconsAndText/schema.ts | 179 ++++++++++++++++++ .../blocks/IconsAndText/styles.module.css | 0 packages/volto-blocks/src/config/blocks.ts | 37 +++- .../volto-blocks/src/icons/icons_and_text.svg | 30 +++ pnpm-lock.yaml | 9 + 9 files changed, 382 insertions(+), 9 deletions(-) create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/index.ts create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.css create mode 100644 packages/volto-blocks/src/icons/icons_and_text.svg diff --git a/packages/volto-blocks/package.json b/packages/volto-blocks/package.json index c232f19..d65f32d 100644 --- a/packages/volto-blocks/package.json +++ b/packages/volto-blocks/package.json @@ -54,6 +54,7 @@ "classnames": "2.2.6", "lodash": "4.17.21", "react-aria-components": "^1.2.0", - "react-intl": "3.12.1" + "react-intl": "3.12.1", + "uuid": "^10.0.0" } } diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx new file mode 100644 index 0000000..8c32fab --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx @@ -0,0 +1,110 @@ +import { Icon, SidebarPortal } from '@plone/volto/components'; +import { BlockDataForm } from '@plone/volto/components/manage/Form'; +import { useIntl } from 'react-intl'; + +import type { BlockEditProps } from '@plone/types'; + +import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; +import blockIcon from '@redturtle/volto-blocks/icons/icons_and_text.svg'; +import { + TextEditorWidget, + useHandleDetachedBlockFocus, +} from '@redturtle/volto-rt-slate'; + +import config from '@plone/registry'; + +type IconsAndTextEditProps = Omit & { + data: IconsAndTextData; +}; + +export default function Edit(props: IconsAndTextEditProps) { + const { data, selected, block, onChangeBlock, blocksConfig, blocksErrors } = + props; + const intl = useIntl(); + + const column_number = data.column_number ? parseInt(data.column_number) : 3; + + const { selectedField, setSelectedField } = useHandleDetachedBlockFocus( + props, + 'title', + ); + + const schema = blocksConfig[data['@type']].blockSchema({ + data, + intl, + }); + + if (__SERVER__) { + return
; + } + + const Container = config.getComponent('Container').component || 'div'; + const Image = config.getComponent('Image').component; + + return ( + <> +
+ +
+ { + setSelectedField('text'); + }} + showToolbar={false} + placeholder={intl.formatMessage(messages.title)} + /> + { + setSelectedField('title'); + }} + placeholder={intl.formatMessage(messages.text)} + /> +
+ +
+ {/* @ts-expect-error TODO */} + + {schema && ( + } + schema={schema} + title={schema.title} + onChangeField={(id: string, value: unknown) => { + onChangeBlock(block, { + ...data, + [id]: value, + }); + }} + onChangeBlock={onChangeBlock} + formData={data} + block={block} + errors={blocksErrors} + /> + )} + + + ); +} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx new file mode 100644 index 0000000..d7c20fc --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx @@ -0,0 +1,18 @@ +import type { BlockViewProps } from '@plone/types'; + +import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; + +import config from '@plone/registry'; + +type Props = Omit & { + data: IconsAndTextData; +}; + +export default function View({ data, className, style }: Props) { + const column_number = data.column_number ? parseInt(data.column_number) : 3; + + const Container = config.getComponent('Container').component || 'div'; + const Image = config.getComponent('Image').component; + + return
TEST
; +} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/index.ts b/packages/volto-blocks/src/components/blocks/IconsAndText/index.ts new file mode 100644 index 0000000..fbc7268 --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/index.ts @@ -0,0 +1,5 @@ +import loadable from '@loadable/component'; + +export const IconsAndTextEdit = loadable( + () => import(/* webpackChunkName: "redturtle__volto-blocks" */ './Edit'), +); diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts b/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts new file mode 100644 index 0000000..78161f0 --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts @@ -0,0 +1,179 @@ +import type { BlockConfigBase, JSONSchema } from '@plone/types'; +import { type CtaBlockExtender } from '@redturtle/volto-blocks/components/blocks/extenders/cta'; +import { defineMessages, type IntlShape } from 'react-intl'; +import { v4 as uuid } from 'uuid'; + +const messages = defineMessages({ + columnsNumber: { id: 'columnsNumber', defaultMessage: 'Number of columns' }, + noAdaptColumns: { + id: 'noAdaptColumns', + defaultMessage: 'Do not fit the columns to the available space', + }, + column: { + id: 'column', + defaultMessage: 'Column', + }, + addColumn: { + id: 'addColumn', + defaultMessage: 'Add column', + }, + icon: { + id: 'icon', + defaultMessage: 'Icon', + }, + icon_and_text_column_number_title: { + id: 'icon_and_text_column_number_title', + defaultMessage: 'Column Number', + }, + icon_and_text_column_number_description: { + id: 'icon_and_text_column_number_description', + defaultMessage: 'Define the number of columns for this block', + }, + title_title: { + id: 'Title', + defaultMessage: 'Title', + }, + text_title: { + id: 'Text', + defaultMessage: 'Text', + }, + icons_and_text_title: { + id: 'icons_and_text_title', + defaultMessage: 'Icon & Text block', + }, +}); + +export interface IconsAndTextData extends CtaBlockExtender { + '@type': 'iconsandtext'; + columns?: Array<{ + '@id': string; + iconImage: string; + iconSize: string; + headerTextPosition: string; + dividerPosition: string; + href: string; + href_title: string; + }>; + column_number?: string; + title?: string; + text?: object; +} + +export const IconsAndTextSchema = ({ + data, + intl, +}: { + data: IconsAndTextData; + intl: IntlShape; +}): JSONSchema => { + const schema = { + title: intl.formatMessage(messages.icons_and_text_title), + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['title', 'columns', 'column_number'], + }, + ], + properties: { + title: { title: intl.formatMessage(messages.title_title) }, + columns: { + title: intl.formatMessage(messages.column), + addMessage: intl.formatMessage(messages.addColumn), + widget: 'object_list', + default: [ + { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + ], + schema: { + title: intl.formatMessage(messages.column), + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [ + 'iconImage', + 'iconSize', + 'headerTextPosition', + 'dividerPosition', + 'href', + 'href_title', + ], + }, + ], + properties: { + title: intl.formatMessage(messages.column), + iconImage: { + title: intl.formatMessage(messages.icon), + description: + 'The image must be a PNG or SVG. The maximum recommended size for PNG is 200x200px.', + widget: 'image', + }, + iconSize: { + title: 'Image size', + type: 'choices', + choices: [ + ['s', 'Small'], + ['m', 'Medium'], + ['l', 'Large'], + ], + noValueOption: false, + }, + headerTextPosition: { + title: 'Header text position', + type: 'choices', + choices: [ + ['right', 'On right'], + ['bottom', 'On bottom'], + ], + }, + dividerPosition: { + title: 'Divider position', + type: 'choices', + choices: [ + ['before_title', 'Before title'], + ['after_title', 'After title'], + ['before_header_text', 'Before header text'], + ['no_divider', 'Hide divider'], + ], + + noValueOption: false, + }, + href: { + title: 'Link', + widget: 'object_browser', + allowExternals: true, + mode: 'link', + }, + href_title: { + title: 'Link title', + description: + 'If no title is entered, and a link is selected, the link will be added to the block title.', + }, + }, + required: [], + }, + }, + column_number: { + title: intl.formatMessage(messages.icon_and_text_column_number_title), + description: intl.formatMessage( + messages.icon_and_text_column_number_description, + ), + default: '3', + choices: [ + ['2', '2'], + ['3', '3'], + ['4', '4'], + ], + }, + }, + required: ['title'], + }; + return schema; +}; + +export interface IconsAndTextConfig + extends Omit { + blockSchema: typeof IconsAndTextSchema; +} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.css b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.css new file mode 100644 index 0000000..e69de29 diff --git a/packages/volto-blocks/src/config/blocks.ts b/packages/volto-blocks/src/config/blocks.ts index 629bf88..640bcf4 100644 --- a/packages/volto-blocks/src/config/blocks.ts +++ b/packages/volto-blocks/src/config/blocks.ts @@ -2,36 +2,44 @@ import type { BlocksConfigData } from '@plone/types'; import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema'; -import text1SVG from '@redturtle/volto-blocks/icons/text1.svg'; -import Text1View from '@redturtle/volto-blocks/components/blocks/Text1/View'; import { Text1Edit } from '@redturtle/volto-blocks/components/blocks/Text1'; import { Text1Schema, type Text1Config, } from '@redturtle/volto-blocks/components/blocks/Text1/schema'; +import Text1View from '@redturtle/volto-blocks/components/blocks/Text1/View'; +import text1SVG from '@redturtle/volto-blocks/icons/text1.svg'; -import text6SVG from '@redturtle/volto-blocks/icons/text6.svg'; -import Text6View from '@redturtle/volto-blocks/components/blocks/Text6/View'; import { Text6Edit } from '@redturtle/volto-blocks/components/blocks/Text6'; import { Text6Schema, type Text6Config, } from '@redturtle/volto-blocks/components/blocks/Text6/schema'; +import Text6View from '@redturtle/volto-blocks/components/blocks/Text6/View'; +import text6SVG from '@redturtle/volto-blocks/icons/text6.svg'; -import text7SVG from '@redturtle/volto-blocks/icons/text7.svg'; -import Text7View from '@redturtle/volto-blocks/components/blocks/Text7/View'; import { Text7Edit } from '@redturtle/volto-blocks/components/blocks/Text7'; import { Text7Schema, type Text7Config, } from '@redturtle/volto-blocks/components/blocks/Text7/schema'; +import Text7View from '@redturtle/volto-blocks/components/blocks/Text7/View'; +import text7SVG from '@redturtle/volto-blocks/icons/text7.svg'; -import TestimonialsView from '@redturtle/volto-blocks/components/blocks/Testimonials/View'; import { TestimonialsEdit } from '@redturtle/volto-blocks/components/blocks/Testimonials'; import { TestimonialsSchema, type TestimonialsConfig, } from '@redturtle/volto-blocks/components/blocks/Testimonials/schema'; +import TestimonialsView from '@redturtle/volto-blocks/components/blocks/Testimonials/View'; + +import { IconsAndTextEdit } from '@redturtle/volto-blocks/components/blocks/IconsAndText'; +import { + IconsAndTextSchema, + type IconsAndTextConfig, +} from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; +import IconsAndTextView from '@redturtle/volto-blocks/components/blocks/IconsAndText/View'; +import iconsAndTextSVG from '@redturtle/volto-blocks/icons/icons_and_text.svg'; declare module '@plone/types' { interface BlocksConfigData { @@ -39,12 +47,13 @@ declare module '@plone/types' { text6: Text6Config; text7: Text7Config; testimonials: TestimonialsConfig; + iconandtext: IconsAndTextConfig; } } type RtBlocksConfig = Pick< BlocksConfigData, - 'text1' | 'text6' | 'text7' | 'testimonials' + 'text1' | 'text6' | 'text7' | 'testimonials' | 'iconandtext' >; const defaultBlocksConfig = { @@ -104,4 +113,16 @@ export const blocks: RtBlocksConfig = { blockHasOwnFocusManagement: true, blockSchema: TestimonialsSchema, }, + iconandtext: { + ...defaultBlocksConfig, + id: 'iconandtext', + title: 'Icon & Text', + icon: iconsAndTextSVG, + group: 'text', + mostUsed: true, + view: IconsAndTextView, + edit: IconsAndTextEdit, + blockHasOwnFocusManagement: true, + blockSchema: IconsAndTextSchema, + }, } as const; diff --git a/packages/volto-blocks/src/icons/icons_and_text.svg b/packages/volto-blocks/src/icons/icons_and_text.svg new file mode 100644 index 0000000..8393bbf --- /dev/null +++ b/packages/volto-blocks/src/icons/icons_and_text.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 671d2fb..fb194b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1473,6 +1473,9 @@ importers: react-intl: specifier: 3.12.1 version: 3.12.1(react@18.2.0) + uuid: + specifier: ^10.0.0 + version: 10.0.0 devDependencies: '@plone/scripts': specifier: ^3.6.1 @@ -14461,6 +14464,10 @@ packages: resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} engines: {node: '>= 0.4.0'} + uuid@10.0.0: + resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==} + hasBin: true + uuid@3.4.0: resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==} deprecated: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. @@ -32982,6 +32989,8 @@ snapshots: utils-merge@1.0.1: {} + uuid@10.0.0: {} + uuid@3.4.0: {} uuid@8.3.2: {} From 1481e9542c632969c634af81bcb3462f6b215f11 Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Tue, 20 Aug 2024 10:37:29 +0200 Subject: [PATCH 02/19] add translations --- .../locales/en/LC_MESSAGES/volto.po | 42 ++++++++++++++++++ .../locales/it/LC_MESSAGES/volto.po | 42 ++++++++++++++++++ packages/volto-blocks/locales/volto.pot | 44 ++++++++++++++++++- 3 files changed, 127 insertions(+), 1 deletion(-) diff --git a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po index 417394d..f6d3bee 100644 --- a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po @@ -27,6 +27,7 @@ msgid "Link to" msgstr "" #. Default: "Text" +#: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema #: components/blocks/Text1/Edit @@ -37,6 +38,7 @@ msgid "Text" msgstr "" #. Default: "Title" +#: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema #: components/blocks/Text1/Edit @@ -48,6 +50,46 @@ msgstr "" msgid "Title" msgstr "" +#. Default: "Add column" +#: components/blocks/IconsAndText/schema +msgid "addColumn" +msgstr "" + +#. Default: "Column" +#: components/blocks/IconsAndText/schema +msgid "column" +msgstr "" + +#. Default: "Number of columns" +#: components/blocks/IconsAndText/schema +msgid "columnsNumber" +msgstr "" + +#. Default: "Icon" +#: components/blocks/IconsAndText/schema +msgid "icon" +msgstr "" + +#. Default: "Define the number of columns for this block" +#: components/blocks/IconsAndText/schema +msgid "icon_and_text_column_number_description" +msgstr "" + +#. Default: "Column Number" +#: components/blocks/IconsAndText/schema +msgid "icon_and_text_column_number_title" +msgstr "" + +#. Default: "Icon & Text block" +#: components/blocks/IconsAndText/schema +msgid "icons_and_text_title" +msgstr "" + +#. Default: "Do not fit the columns to the available space" +#: components/blocks/IconsAndText/schema +msgid "noAdaptColumns" +msgstr "" + #. Default: "Call to action" #: components/blocks/extenders/cta msgid "redturtle__volto-blocks__cta_fieldset_title" diff --git a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po index 6e0e943..44a2a2e 100644 --- a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po @@ -27,6 +27,7 @@ msgid "Link to" msgstr "" #. Default: "Text" +#: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema #: components/blocks/Text1/Edit @@ -37,6 +38,7 @@ msgid "Text" msgstr "Testo" #. Default: "Title" +#: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema #: components/blocks/Text1/Edit @@ -48,6 +50,46 @@ msgstr "Testo" msgid "Title" msgstr "Titolo" +#. Default: "Add column" +#: components/blocks/IconsAndText/schema +msgid "addColumn" +msgstr "" + +#. Default: "Column" +#: components/blocks/IconsAndText/schema +msgid "column" +msgstr "" + +#. Default: "Number of columns" +#: components/blocks/IconsAndText/schema +msgid "columnsNumber" +msgstr "" + +#. Default: "Icon" +#: components/blocks/IconsAndText/schema +msgid "icon" +msgstr "" + +#. Default: "Define the number of columns for this block" +#: components/blocks/IconsAndText/schema +msgid "icon_and_text_column_number_description" +msgstr "" + +#. Default: "Column Number" +#: components/blocks/IconsAndText/schema +msgid "icon_and_text_column_number_title" +msgstr "" + +#. Default: "Icon & Text block" +#: components/blocks/IconsAndText/schema +msgid "icons_and_text_title" +msgstr "" + +#. Default: "Do not fit the columns to the available space" +#: components/blocks/IconsAndText/schema +msgid "noAdaptColumns" +msgstr "" + #. Default: "Call to action" #: components/blocks/extenders/cta msgid "redturtle__volto-blocks__cta_fieldset_title" diff --git a/packages/volto-blocks/locales/volto.pot b/packages/volto-blocks/locales/volto.pot index 72da980..ca38b25 100644 --- a/packages/volto-blocks/locales/volto.pot +++ b/packages/volto-blocks/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-08-16T14:26:11.417Z\n" +"POT-Creation-Date: 2024-08-20T08:36:55.857Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "Content-Type: text/plain; charset=utf-8\n" @@ -29,6 +29,7 @@ msgid "Link to" msgstr "" #. Default: "Text" +#: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema #: components/blocks/Text1/Edit @@ -39,6 +40,7 @@ msgid "Text" msgstr "" #. Default: "Title" +#: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema #: components/blocks/Text1/Edit @@ -50,6 +52,46 @@ msgstr "" msgid "Title" msgstr "" +#. Default: "Add column" +#: components/blocks/IconsAndText/schema +msgid "addColumn" +msgstr "" + +#. Default: "Column" +#: components/blocks/IconsAndText/schema +msgid "column" +msgstr "" + +#. Default: "Number of columns" +#: components/blocks/IconsAndText/schema +msgid "columnsNumber" +msgstr "" + +#. Default: "Icon" +#: components/blocks/IconsAndText/schema +msgid "icon" +msgstr "" + +#. Default: "Define the number of columns for this block" +#: components/blocks/IconsAndText/schema +msgid "icon_and_text_column_number_description" +msgstr "" + +#. Default: "Column Number" +#: components/blocks/IconsAndText/schema +msgid "icon_and_text_column_number_title" +msgstr "" + +#. Default: "Icon & Text block" +#: components/blocks/IconsAndText/schema +msgid "icons_and_text_title" +msgstr "" + +#. Default: "Do not fit the columns to the available space" +#: components/blocks/IconsAndText/schema +msgid "noAdaptColumns" +msgstr "" + #. Default: "Call to action" #: components/blocks/extenders/cta msgid "redturtle__volto-blocks__cta_fieldset_title" From c2a85698e56dd55aa49bc0c64d8bfd6607b398f3 Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Tue, 20 Aug 2024 16:59:29 +0200 Subject: [PATCH 03/19] icons and text development --- .../components/blocks/IconsAndText/Edit.tsx | 74 +++- .../blocks/IconsAndText/EditItem.tsx | 144 +++++++ .../components/blocks/IconsAndText/View.tsx | 66 ++- .../blocks/IconsAndText/ViewItem.tsx | 104 +++++ .../components/blocks/IconsAndText/schema.ts | 39 +- .../blocks/IconsAndText/styles.module.css | 0 .../blocks/IconsAndText/styles.module.scss | 399 ++++++++++++++++++ packages/volto-blocks/src/declaration.d.ts | 6 + 8 files changed, 804 insertions(+), 28 deletions(-) create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx delete mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.css create mode 100644 packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx index b327793..b39011b 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx @@ -1,15 +1,18 @@ import type { BlockEditProps } from '@plone/types'; -import { Icon, SidebarPortal } from '@plone/volto/components'; +import { Icon, SidebarPortal, UniversalLink } from '@plone/volto/components'; import { BlockDataForm } from '@plone/volto/components/manage/Form'; +import EditItem from '@redturtle/volto-blocks/components/blocks/IconsAndText/EditItem'; import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; -import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.css'; +import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; import blockIcon from '@redturtle/volto-blocks/icons/icons_and_text.svg'; import { TextEditorWidget, useHandleDetachedBlockFocus, } from '@redturtle/volto-rt-slate'; import cx from 'classnames'; +import React, { useEffect } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { v4 as uuid } from 'uuid'; import config from '@plone/registry'; @@ -29,6 +32,20 @@ export default function Edit(props: IconsAndTextEditProps) { 'title', ); + useEffect(() => { + if (!data?.columns || data?.columns?.length === 0) { + onChangeBlock(block, { + ...data, + columns: [ + { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + ], + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [block]); + const schema = blocksConfig[data['@type']].blockSchema({ data, intl, @@ -44,23 +61,20 @@ export default function Edit(props: IconsAndTextEditProps) { return ( <>
- +
+
+ {data.columns?.length > 0 && + data.columns.map((item, i) => ( + { + onChangeBlock(block, { + ...data, + columns: data.columns.map((i) => + i['@id'] === id ? { ...i, [field]: value } : i, + ), + }); + }} + // @ts-expect-error TODO fix type in @plone/types + selected={selected} + /> + ))} +
+ {data.linkHref?.[0] && ( +
+ ) => { + e.preventDefault(); + }} + > + {data.linkTitle} + +
+ )}
{/* @ts-expect-error TODO */} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx new file mode 100644 index 0000000..c885126 --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx @@ -0,0 +1,144 @@ +import cx from 'classnames'; +import { defineMessages, useIntl } from 'react-intl'; + +import type { ArrayElement } from '@plone/types'; +import { UniversalLink } from '@plone/volto/components'; +import { flattenToAppURL } from '@plone/volto/helpers'; +import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; +import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; +import { TextEditorWidget } from '@redturtle/volto-rt-slate'; + +type Props = { + data: ArrayElement; + focusOn: string; + setFocusOn: Function; + onChange: (id: string, field: string, value: unknown) => void; + selected: boolean; +}; + +export default function EditItem({ + data, + index, + focusOn, + setFocusOn, + onChange, + selected, +}: Props) { + const intl = useIntl(); + const icon = data.iconImage; + + if (__SERVER__) { + return
; + } + console.log(data.dividerPosition); + return ( +
+
+ {icon && ( +
+ +
+ )} + + {data.headerTextPosition && ( +
+ setFocusOn('headerText' + data['@id'])} + onChangeBlock={(id: string, value: { headerText: string }) => { + onChange(id, 'headerText', value.headerText); + }} + showToolbar={false} + placeholder={intl.formatMessage(messages.textPlaceholder)} + /> +
+ )} +
+ setFocusOn('title' + data['@id'])} + onChangeBlock={(id: string, value: { title: string }) => { + onChange(id, 'title', value.title); + }} + showToolbar={false} + placeholder={intl.formatMessage(messages.title)} + /> + setFocusOn('text' + data['@id'])} + onChangeBlock={(id: string, value: { text: string }) => { + onChange(id, 'text', value.text); + }} + placeholder={intl.formatMessage(messages.text)} + /> + {data.href_title && data.href?.length > 0 && ( +
+
+ ) => { + e.preventDefault(); + }} + > + {data.href_title} + +
+
+ )} +
+ ); +} + +const messages = defineMessages({ + title: { + id: 'Title', + defaultMessage: 'Title', + }, + text: { + id: 'Text', + defaultMessage: 'Text', + }, + textPlaceholder: { + id: 'Text placeholder', + defaultMessage: 'Header text', + }, +}); diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx index d7c20fc..fca75a0 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx @@ -1,8 +1,12 @@ +import config from '@plone/registry'; import type { BlockViewProps } from '@plone/types'; - +import { TextBlockView } from '@plone/volto-slate/blocks/Text'; +import { UniversalLink } from '@plone/volto/components'; +import ViewItem from '@redturtle/volto-blocks/components/blocks/IconsAndText/ViewItem'; import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; - -import config from '@plone/registry'; +import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; +import cx from 'classnames'; +import React from 'react'; type Props = Omit & { data: IconsAndTextData; @@ -14,5 +18,59 @@ export default function View({ data, className, style }: Props) { const Container = config.getComponent('Container').component || 'div'; const Image = config.getComponent('Image').component; - return
TEST
; + return ( + <> +
+ +
+ {data.title && ( +

+ {data.title} +

+ )} + {data.text && ( +
+ +
+ )} +
+
+ {data.columns?.length > 0 && + data.columns.map((item, i) => ( + + ))} +
+ {data.linkHref?.[0] && ( +
+ ) => { + e.preventDefault(); + }} + > + {data.linkTitle} + +
+ )} + +
+ + ); } diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx new file mode 100644 index 0000000..de06b2a --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -0,0 +1,104 @@ +import cx from 'classnames'; +import { useIntl } from 'react-intl'; + +import type { ArrayElement } from '@plone/types'; +import { TextBlockView } from '@plone/volto-slate/blocks/Text'; +import { UniversalLink } from '@plone/volto/components'; +import { flattenToAppURL } from '@plone/volto/helpers'; +import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; +import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; + +type Props = { + data: ArrayElement; + focusOn: string; + setFocusOn: Function; + onChange: (id: string, field: string, value: unknown) => void; + selected: boolean; +}; + +export default function ViewItem({ + data, + focusOn, + setFocusOn, + onChange, + selected, +}: Props) { + const intl = useIntl(); + const icon = data.iconImage; + + return ( +
+
+ {icon && ( +
+ +
+ )} + + {data.headerTextPosition && ( +
+ {data.title && ( +

+ {data.headerText} +

+ )} +
+ )} +
+ {data.title && ( +
+ {data.title && ( +

+ {data.title} +

+ )} +
+ )} + {data.text && ( +
+ +
+ )} + {data.href_title && data.href?.length > 0 && ( +
+
+ ) => { + e.preventDefault(); + }} + > + {data.href_title} + +
+
+ )} +
+ ); +} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts b/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts index 78161f0..d11edb6 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/schema.ts @@ -1,7 +1,11 @@ import type { BlockConfigBase, JSONSchema } from '@plone/types'; -import { type CtaBlockExtender } from '@redturtle/volto-blocks/components/blocks/extenders/cta'; +import { + addCtaFieldset, + type CtaBlockExtender, +} from '@redturtle/volto-blocks/components/blocks/extenders/cta'; + import { defineMessages, type IntlShape } from 'react-intl'; -import { v4 as uuid } from 'uuid'; +// import { v4 as uuid } from 'uuid'; const messages = defineMessages({ columnsNumber: { id: 'columnsNumber', defaultMessage: 'Number of columns' }, @@ -47,12 +51,16 @@ export interface IconsAndTextData extends CtaBlockExtender { '@type': 'iconsandtext'; columns?: Array<{ '@id': string; - iconImage: string; - iconSize: string; - headerTextPosition: string; - dividerPosition: string; - href: string; - href_title: string; + index?: number; + iconImage?: string; + iconSize?: string; + headerText?: string; + headerTextPosition?: string; + dividerPosition?: string; + href?: string; + href_title?: string; + title?: string; + text?: string; }>; column_number?: string; title?: string; @@ -81,11 +89,11 @@ export const IconsAndTextSchema = ({ title: intl.formatMessage(messages.column), addMessage: intl.formatMessage(messages.addColumn), widget: 'object_list', - default: [ - { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, - { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, - { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, - ], + // default: [ + // { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + // { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + // { '@id': uuid(), dividerPosition: 'before_title', iconSize: 's' }, + // ], schema: { title: intl.formatMessage(messages.column), fieldsets: [ @@ -93,6 +101,7 @@ export const IconsAndTextSchema = ({ id: 'default', title: 'Default', fields: [ + // 'title', 'iconImage', 'iconSize', 'headerTextPosition', @@ -103,7 +112,7 @@ export const IconsAndTextSchema = ({ }, ], properties: { - title: intl.formatMessage(messages.column), + title: { title: intl.formatMessage(messages.column) }, iconImage: { title: intl.formatMessage(messages.icon), description: @@ -131,6 +140,7 @@ export const IconsAndTextSchema = ({ dividerPosition: { title: 'Divider position', type: 'choices', + default: 'no_divider', choices: [ ['before_title', 'Before title'], ['after_title', 'After title'], @@ -170,6 +180,7 @@ export const IconsAndTextSchema = ({ }, required: ['title'], }; + addCtaFieldset({ schema, intl }); return schema; }; diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.css b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss new file mode 100644 index 0000000..2e810df --- /dev/null +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss @@ -0,0 +1,399 @@ +.divider_before_title { + .column-head { + border-bottom: 1px solid #ccc; + } +} + +.divider_after_title { + h4 { + padding-bottom: 0.5rem; + border-bottom: 1px solid #ccc; + margin-bottom: 0.5rem; + } +} + +.divider_before_header_text { + h3 { + padding-top: 0.5rem; + border-bottom: 1px solid #ccc; + } +} + +.block_icons_text { + position: relative; + display: flex; + flex-direction: column; + padding-top: 0.5rem; + + .header-text-right { + .header-text { + margin-left: 1.2rem; + + &, + .ui.input > input { + font-size: 1.5rem; + // font-weight: @semibold; + line-height: 1.52em; + } + } + } + + .header-text-bottom { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + .header-text { + width: 100%; + margin-top: 0.85rem; + + &, + .ui.input > input { + font-size: 1.5rem; + } + } + } + + .column_icon { + /* size di default */ + img { + min-height: 2.7rem; + max-height: 2.7rem; + } + + &.size_s { + img { + min-height: 2.7rem; + max-height: 2.7rem; + } + } + + &.size_m { + img { + min-height: 5rem; + max-height: 5rem; + } + } + + &.size_l { + img { + min-height: 8rem; + max-height: 8rem; + } + + img[src*='png'], + img[src*='jpg'], + img[src*='jpeg'], + img[src*='gif'] { + width: 100%; + min-height: unset; + max-height: unset; + aspect-ratio: var(--grid-images-aspect-ratio, 1.77777778); + object-fit: cover; + object-position: var(--grid-images-object-position, top left); + } + } + } + + .block-content-header { + margin-bottom: 2rem; + align-items: center; + text-align: center; + } + + .site--listing-link-more { + margin-bottom: 1rem; + } + + .title { + display: flex; + flex-direction: column; + margin-top: 1rem; + margin-bottom: 1.2rem; + + .ui.input { + width: 100%; + } + } + + .description { + display: flex; + flex-direction: column; + + p { + margin-bottom: 0; + } + } + + /* Align header center and default */ + .header-align-center, + .header-align-undefined { + .title, + .description { + .ui.input input, + .DraftEditor-root, + .DraftEditor-editorContainer, + .public-DraftStyleDefault-block { + width: 100%; + text-align: center; + } + } + + .title, + .description { + align-items: center; + text-align: center; + } + } + .block-columns-wrapper, + .columns-wrapper { + display: flex; + flex-wrap: wrap; + margin-right: -1.15rem; + margin-left: -1.15rem; + + // @media (max-width: @largestMobileScreen) { + // margin-right: 0; + // margin-left: 0; + // } + + .column-block { + position: relative; + display: flex; + flex: 1 1 25%; + flex-direction: column; + padding: 1.15rem; + margin-bottom: 2rem; + font-size: 1rem; + + .column-head { + display: flex; + align-items: center; + padding-bottom: 0.85rem; + margin-bottom: 0.85rem; + + // .column_icon { + // /* size di default */ + // img { + // min-height: 2.7rem; + // max-height: 2.7rem; + // } + + // .size_s { + // img { + // min-height: 2.7rem; + // max-height: 2.7rem; + // } + // } + + // .size_m { + // img { + // min-height: 5rem; + // max-height: 5rem; + // } + // } + + // .size_l { + // img { + // min-height: 8rem; + // max-height: 8rem; + // } + + // img[src*='png'], + // img[src*='jpg'], + // img[src*='jpeg'], + // img[src*='gif'] { + // width: 100%; + // min-height: unset; + // max-height: unset; + // aspect-ratio: var(--grid-images-aspect-ratio, 1.77777778); + // object-fit: cover; + // object-position: var(--grid-images-object-position, top left); + // } + // } + // } + + .header-text { + flex: 1 1 auto; + + // &, + // .ui.input input { + // color: @black; + // } + } + } + + .column-title { + &, + .ui.input input, + textarea { + // font-family: @fontName; + font-size: 1rem; + // font-weight: @semibold; + } + + textarea { + overflow: auto; + width: 100%; + max-width: 100%; + min-height: 1.5em; + border: none; + appearance: none; + background: none; + resize: vertical; + } + } + + .column-text { + flex: 1 1 auto; + -webkit-box-flex: 1; + font-size: 1rem; + } + + .column-footer { + margin-top: 1.5rem; + } + + &.divider_before_title { + .column-head { + // border-bottom: 1px solid @footerBordersColor; + } + } + + &.divider_after_title { + .column-title { + padding-bottom: 0.5rem; + border-bottom: 1px solid; // @footerBordersColor; + margin-bottom: 0.5rem; + } + } + + &.divider_before_header_text { + .header-text { + padding-top: 0.5rem; + border-top: 1px solid; // @footerBordersColor; + } + } + + &.header-text-right { + .column-head { + .header-text { + margin-left: 1.2rem; + + &, + .ui.input > input { + font-size: 1.5rem; + // font-weight: @semibold; + line-height: 1.52em; + } + } + } + } + + &.header-text-bottom { + .column-head { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + .header-text { + width: 100%; + margin-top: 0.85rem; + + &, + .ui.input > input { + font-size: 1.5rem; + } + } + } + } + } + } + + // &.multi-rows { + // .columns-wrapper { + // .column-block { + // flex: 0 1 25%; + // } + // } + // } + + // &.grey-bg { + // padding-top: 2rem; + // padding-right: 3em; + // padding-bottom: 2rem; + // padding-left: 3em; + + // &.full-width { + // padding-right: 0; + // padding-left: 0; + // } + // } + + // &.title-blue { + // .title, + // .title .ui.input input { + // // color: @blue; + // } + // } + + .column-number-4 { + .column-block { + flex-basis: 25%; + } + } + + .column-number-3 { + .column-block { + flex-basis: 33.33%; + } + } + + .column-number-2 { + .column-block { + flex-basis: 50%; + } + } + + &.no-adapt-columns { + .columns-wrapper { + .column-block { + flex-grow: 0; + } + } + } + + // @media (max-width: @largestTabletScreen) { + // .columns-wrapper { + // .column-block { + // flex: 1 0 50%; + // } + // } + // } + // @media (max-width: @largestMobileScreen) { + // &.grey-bg { + // padding: 2rem 1.5em; + // } + + // .columns-wrapper { + // flex-direction: column; + + // .column-block { + // padding-right: 0; + // padding-left: 0; + // } + // } + // } + // } + // @media (max-width: @largestMobileScreen) { + // .block-icons-text.mobile-block .column-block { + // .column-head { + // display: flex; + // justify-content: center; + + // .header-text { + // flex: none; + // } + // } + // } +} diff --git a/packages/volto-blocks/src/declaration.d.ts b/packages/volto-blocks/src/declaration.d.ts index 7f95283..9dbb955 100644 --- a/packages/volto-blocks/src/declaration.d.ts +++ b/packages/volto-blocks/src/declaration.d.ts @@ -1,2 +1,8 @@ declare var __CLIENT__: boolean; declare var __SERVER__: boolean; +declare module '*.module.scss' { + let styles: { + readonly [key: string]: string; + }; + export default styles; +} From 7ee6a6a7120654e9065cc1e3a1967300f839880c Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Tue, 20 Aug 2024 16:59:36 +0200 Subject: [PATCH 04/19] icons and text development --- packages/volto-blocks/locales/en/LC_MESSAGES/volto.po | 7 +++++++ packages/volto-blocks/locales/it/LC_MESSAGES/volto.po | 7 +++++++ packages/volto-blocks/locales/volto.pot | 9 ++++++++- .../components/blocks/IconsAndText/styles.module.scss | 2 +- 4 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po index d125737..6889bfb 100644 --- a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po @@ -29,6 +29,7 @@ msgstr "" #. Default: "Text" #: components/blocks/Accordion/EditItem #: components/blocks/IconsAndText/Edit +#: components/blocks/IconsAndText/EditItem #: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema @@ -39,11 +40,17 @@ msgstr "" msgid "Text" msgstr "" +#. Default: "Header text" +#: components/blocks/IconsAndText/EditItem +msgid "Text placeholder" +msgstr "" + #. Default: "Title" #: components/blocks/Accordion/Edit #: components/blocks/Accordion/EditItem #: components/blocks/Accordion/schema #: components/blocks/IconsAndText/Edit +#: components/blocks/IconsAndText/EditItem #: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema diff --git a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po index 2618f36..8c566cf 100644 --- a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po @@ -29,6 +29,7 @@ msgstr "" #. Default: "Text" #: components/blocks/Accordion/EditItem #: components/blocks/IconsAndText/Edit +#: components/blocks/IconsAndText/EditItem #: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema @@ -39,11 +40,17 @@ msgstr "" msgid "Text" msgstr "Testo" +#. Default: "Header text" +#: components/blocks/IconsAndText/EditItem +msgid "Text placeholder" +msgstr "" + #. Default: "Title" #: components/blocks/Accordion/Edit #: components/blocks/Accordion/EditItem #: components/blocks/Accordion/schema #: components/blocks/IconsAndText/Edit +#: components/blocks/IconsAndText/EditItem #: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema diff --git a/packages/volto-blocks/locales/volto.pot b/packages/volto-blocks/locales/volto.pot index 018e8ac..ca43ba5 100644 --- a/packages/volto-blocks/locales/volto.pot +++ b/packages/volto-blocks/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-08-20T08:53:33.327Z\n" +"POT-Creation-Date: 2024-08-20T14:58:49.661Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "Content-Type: text/plain; charset=utf-8\n" @@ -31,6 +31,7 @@ msgstr "" #. Default: "Text" #: components/blocks/Accordion/EditItem #: components/blocks/IconsAndText/Edit +#: components/blocks/IconsAndText/EditItem #: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema @@ -41,11 +42,17 @@ msgstr "" msgid "Text" msgstr "" +#. Default: "Header text" +#: components/blocks/IconsAndText/EditItem +msgid "Text placeholder" +msgstr "" + #. Default: "Title" #: components/blocks/Accordion/Edit #: components/blocks/Accordion/EditItem #: components/blocks/Accordion/schema #: components/blocks/IconsAndText/Edit +#: components/blocks/IconsAndText/EditItem #: components/blocks/IconsAndText/schema #: components/blocks/Testimonials/Edit #: components/blocks/Testimonials/schema diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss index 2e810df..694a5da 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss @@ -96,8 +96,8 @@ } .block-content-header { - margin-bottom: 2rem; align-items: center; + margin-bottom: 2rem; text-align: center; } From d627841f1cfe04f5c39449a4ec6bbf03a345cc4b Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Wed, 21 Aug 2024 14:04:32 +0200 Subject: [PATCH 05/19] fix styles --- .../locales/en/LC_MESSAGES/volto.po | 2 +- .../locales/it/LC_MESSAGES/volto.po | 2 +- packages/volto-blocks/locales/volto.pot | 4 +- .../components/blocks/IconsAndText/Edit.tsx | 6 +- .../blocks/IconsAndText/EditItem.tsx | 15 +- .../components/blocks/IconsAndText/View.tsx | 3 +- .../blocks/IconsAndText/ViewItem.tsx | 20 +- .../blocks/IconsAndText/styles.module.scss | 356 +++--------------- 8 files changed, 66 insertions(+), 342 deletions(-) diff --git a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po index 6889bfb..995ccdc 100644 --- a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po @@ -40,7 +40,7 @@ msgstr "" msgid "Text" msgstr "" -#. Default: "Header text" +#. Default: "Type header text..." #: components/blocks/IconsAndText/EditItem msgid "Text placeholder" msgstr "" diff --git a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po index 8c566cf..cec254d 100644 --- a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po @@ -40,7 +40,7 @@ msgstr "" msgid "Text" msgstr "Testo" -#. Default: "Header text" +#. Default: "Type header text..." #: components/blocks/IconsAndText/EditItem msgid "Text placeholder" msgstr "" diff --git a/packages/volto-blocks/locales/volto.pot b/packages/volto-blocks/locales/volto.pot index ca43ba5..746680b 100644 --- a/packages/volto-blocks/locales/volto.pot +++ b/packages/volto-blocks/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-08-20T14:58:49.661Z\n" +"POT-Creation-Date: 2024-08-21T08:58:57.178Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "Content-Type: text/plain; charset=utf-8\n" @@ -42,7 +42,7 @@ msgstr "" msgid "Text" msgstr "" -#. Default: "Header text" +#. Default: "Type header text..." #: components/blocks/IconsAndText/EditItem msgid "Text placeholder" msgstr "" diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx index b39011b..04cccfb 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx @@ -56,7 +56,6 @@ export default function Edit(props: IconsAndTextEditProps) { } const Container = config.getComponent('Container').component || 'div'; - const Image = config.getComponent('Image').component; return ( <> @@ -69,7 +68,6 @@ export default function Edit(props: IconsAndTextEditProps) { className={cx( styles['block-content-header'], styles['header-align-center'], - styles['image-wrapper'], )} > ; @@ -18,7 +17,6 @@ type Props = { export default function EditItem({ data, - index, focusOn, setFocusOn, onChange, @@ -30,7 +28,6 @@ export default function EditItem({ if (__SERVER__) { return
; } - console.log(data.dividerPosition); return (
+
diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index de06b2a..c988aec 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -1,5 +1,4 @@ import cx from 'classnames'; -import { useIntl } from 'react-intl'; import type { ArrayElement } from '@plone/types'; import { TextBlockView } from '@plone/volto-slate/blocks/Text'; @@ -8,22 +7,12 @@ import { flattenToAppURL } from '@plone/volto/helpers'; import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; +// XXX Queste con ? servono in view? type Props = { data: ArrayElement; - focusOn: string; - setFocusOn: Function; - onChange: (id: string, field: string, value: unknown) => void; - selected: boolean; }; -export default function ViewItem({ - data, - focusOn, - setFocusOn, - onChange, - selected, -}: Props) { - const intl = useIntl(); +export default function ViewItem({ data }: Props) { const icon = data.iconImage; return ( @@ -57,9 +46,8 @@ export default function ViewItem({ />
)} - {data.headerTextPosition && ( -
+
{data.title && (

{data.title && ( -
+
{data.title && (

{data.title} diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss index 694a5da..d2ff2f8 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/styles.module.scss @@ -1,3 +1,29 @@ +// Titolo e descrizione del blocco centrato +.block-content-header { + align-items: center; + margin-bottom: 2rem; + text-align: center; +} + +// Gestione titolo a destra o sotto immagine dell'header +.header-text-right { + .header-text { + margin-left: 1.2rem; + } +} + +.header-text-bottom { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + +.header-text { + width: 100%; + margin-top: 0.85rem; +} + +// Separatore (linea grigia) prima del titolo, dopo il titolo o prima dell'header .divider_before_title { .column-head { border-bottom: 1px solid #ccc; @@ -13,47 +39,40 @@ } .divider_before_header_text { - h3 { + .column-head { padding-top: 0.5rem; border-bottom: 1px solid #ccc; } } -.block_icons_text { - position: relative; - display: flex; - flex-direction: column; - padding-top: 0.5rem; - - .header-text-right { - .header-text { - margin-left: 1.2rem; +// Gestione delle colonne del blocco +.column-number-4 { + .column-block { + flex-basis: 25%; + } +} - &, - .ui.input > input { - font-size: 1.5rem; - // font-weight: @semibold; - line-height: 1.52em; - } - } +.column-number-3 { + .column-block { + flex-basis: 33.33%; } +} - .header-text-bottom { - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; +.column-number-2 { + .column-block { + flex-basis: 50%; + } +} - .header-text { - width: 100%; - margin-top: 0.85rem; +// Gestione del blocco con icone e testo - &, - .ui.input > input { - font-size: 1.5rem; - } - } - } +.block_icons_text { + position: relative; + display: flex; + flex-direction: column; + padding-top: 0.5rem; + // Gestione dimensione immagine di testata .column_icon { /* size di default */ img { @@ -95,56 +114,6 @@ } } - .block-content-header { - align-items: center; - margin-bottom: 2rem; - text-align: center; - } - - .site--listing-link-more { - margin-bottom: 1rem; - } - - .title { - display: flex; - flex-direction: column; - margin-top: 1rem; - margin-bottom: 1.2rem; - - .ui.input { - width: 100%; - } - } - - .description { - display: flex; - flex-direction: column; - - p { - margin-bottom: 0; - } - } - - /* Align header center and default */ - .header-align-center, - .header-align-undefined { - .title, - .description { - .ui.input input, - .DraftEditor-root, - .DraftEditor-editorContainer, - .public-DraftStyleDefault-block { - width: 100%; - text-align: center; - } - } - - .title, - .description { - align-items: center; - text-align: center; - } - } .block-columns-wrapper, .columns-wrapper { display: flex; @@ -152,11 +121,6 @@ margin-right: -1.15rem; margin-left: -1.15rem; - // @media (max-width: @largestMobileScreen) { - // margin-right: 0; - // margin-left: 0; - // } - .column-block { position: relative; display: flex; @@ -171,229 +135,7 @@ align-items: center; padding-bottom: 0.85rem; margin-bottom: 0.85rem; - - // .column_icon { - // /* size di default */ - // img { - // min-height: 2.7rem; - // max-height: 2.7rem; - // } - - // .size_s { - // img { - // min-height: 2.7rem; - // max-height: 2.7rem; - // } - // } - - // .size_m { - // img { - // min-height: 5rem; - // max-height: 5rem; - // } - // } - - // .size_l { - // img { - // min-height: 8rem; - // max-height: 8rem; - // } - - // img[src*='png'], - // img[src*='jpg'], - // img[src*='jpeg'], - // img[src*='gif'] { - // width: 100%; - // min-height: unset; - // max-height: unset; - // aspect-ratio: var(--grid-images-aspect-ratio, 1.77777778); - // object-fit: cover; - // object-position: var(--grid-images-object-position, top left); - // } - // } - // } - - .header-text { - flex: 1 1 auto; - - // &, - // .ui.input input { - // color: @black; - // } - } - } - - .column-title { - &, - .ui.input input, - textarea { - // font-family: @fontName; - font-size: 1rem; - // font-weight: @semibold; - } - - textarea { - overflow: auto; - width: 100%; - max-width: 100%; - min-height: 1.5em; - border: none; - appearance: none; - background: none; - resize: vertical; - } - } - - .column-text { - flex: 1 1 auto; - -webkit-box-flex: 1; - font-size: 1rem; - } - - .column-footer { - margin-top: 1.5rem; - } - - &.divider_before_title { - .column-head { - // border-bottom: 1px solid @footerBordersColor; - } - } - - &.divider_after_title { - .column-title { - padding-bottom: 0.5rem; - border-bottom: 1px solid; // @footerBordersColor; - margin-bottom: 0.5rem; - } - } - - &.divider_before_header_text { - .header-text { - padding-top: 0.5rem; - border-top: 1px solid; // @footerBordersColor; - } - } - - &.header-text-right { - .column-head { - .header-text { - margin-left: 1.2rem; - - &, - .ui.input > input { - font-size: 1.5rem; - // font-weight: @semibold; - line-height: 1.52em; - } - } - } - } - - &.header-text-bottom { - .column-head { - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - - .header-text { - width: 100%; - margin-top: 0.85rem; - - &, - .ui.input > input { - font-size: 1.5rem; - } - } - } - } - } - } - - // &.multi-rows { - // .columns-wrapper { - // .column-block { - // flex: 0 1 25%; - // } - // } - // } - - // &.grey-bg { - // padding-top: 2rem; - // padding-right: 3em; - // padding-bottom: 2rem; - // padding-left: 3em; - - // &.full-width { - // padding-right: 0; - // padding-left: 0; - // } - // } - - // &.title-blue { - // .title, - // .title .ui.input input { - // // color: @blue; - // } - // } - - .column-number-4 { - .column-block { - flex-basis: 25%; - } - } - - .column-number-3 { - .column-block { - flex-basis: 33.33%; - } - } - - .column-number-2 { - .column-block { - flex-basis: 50%; - } - } - - &.no-adapt-columns { - .columns-wrapper { - .column-block { - flex-grow: 0; } } } - - // @media (max-width: @largestTabletScreen) { - // .columns-wrapper { - // .column-block { - // flex: 1 0 50%; - // } - // } - // } - // @media (max-width: @largestMobileScreen) { - // &.grey-bg { - // padding: 2rem 1.5em; - // } - - // .columns-wrapper { - // flex-direction: column; - - // .column-block { - // padding-right: 0; - // padding-left: 0; - // } - // } - // } - // } - // @media (max-width: @largestMobileScreen) { - // .block-icons-text.mobile-block .column-block { - // .column-head { - // display: flex; - // justify-content: center; - - // .header-text { - // flex: none; - // } - // } - // } } From 5bcd8ac4989ea3a541cf8cb39393317a73f897ba Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Mon, 26 Aug 2024 16:16:20 +0200 Subject: [PATCH 06/19] remove comment --- .../volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index c988aec..451ddb2 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -7,7 +7,6 @@ import { flattenToAppURL } from '@plone/volto/helpers'; import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; -// XXX Queste con ? servono in view? type Props = { data: ArrayElement; }; From 127c438f5cb3b6df57520d88295ecdc300fe2983 Mon Sep 17 00:00:00 2001 From: Luca Date: Wed, 4 Sep 2024 11:32:36 +0200 Subject: [PATCH 07/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx Co-authored-by: Piero Nicolli --- .../volto-blocks/src/components/blocks/IconsAndText/View.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx index 3f826f3..4027c1b 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx @@ -56,7 +56,7 @@ export default function View({ data, className, style }: Props) { ))}

{data.linkHref?.[0] && ( -
+
Date: Wed, 4 Sep 2024 11:33:02 +0200 Subject: [PATCH 08/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx Co-authored-by: Piero Nicolli --- .../volto-blocks/src/components/blocks/IconsAndText/Edit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx index 04cccfb..8736c03 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx @@ -72,7 +72,7 @@ export default function Edit(props: IconsAndTextEditProps) { > Date: Wed, 4 Sep 2024 11:33:20 +0200 Subject: [PATCH 09/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx Co-authored-by: Piero Nicolli --- .../volto-blocks/src/components/blocks/IconsAndText/Edit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx index 8736c03..ae30e41 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/Edit.tsx @@ -123,7 +123,7 @@ export default function Edit(props: IconsAndTextEditProps) { ))}
{data.linkHref?.[0] && ( -
+
Date: Wed, 4 Sep 2024 11:34:04 +0200 Subject: [PATCH 10/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx Co-authored-by: Piero Nicolli --- .../src/components/blocks/IconsAndText/EditItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx index 6bea906..0ca0063 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx @@ -46,7 +46,7 @@ export default function EditItem({ {icon && (
Date: Wed, 4 Sep 2024 11:37:40 +0200 Subject: [PATCH 11/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx Co-authored-by: Piero Nicolli --- .../src/components/blocks/IconsAndText/ViewItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index 451ddb2..565f538 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -24,7 +24,7 @@ export default function ViewItem({ data }: Props) { >
Date: Wed, 4 Sep 2024 11:37:51 +0200 Subject: [PATCH 12/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx Co-authored-by: Piero Nicolli --- .../src/components/blocks/IconsAndText/ViewItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index 565f538..9170cc8 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -32,7 +32,7 @@ export default function ViewItem({ data }: Props) { {icon && (
Date: Wed, 4 Sep 2024 11:39:16 +0200 Subject: [PATCH 13/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx Co-authored-by: Piero Nicolli --- .../src/components/blocks/IconsAndText/ViewItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index 9170cc8..f1c9a11 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -49,7 +49,7 @@ export default function ViewItem({ data }: Props) {
{data.title && (

{data.headerText}

From e51ffde8176bca3a7c99eb08686ae5bae51c3269 Mon Sep 17 00:00:00 2001 From: Luca Date: Wed, 4 Sep 2024 11:39:53 +0200 Subject: [PATCH 14/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx Co-authored-by: Piero Nicolli --- .../volto-blocks/src/components/blocks/IconsAndText/View.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx index 4027c1b..78d9172 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx @@ -60,9 +60,6 @@ export default function View({ data, className, style }: Props) { ) => { - e.preventDefault(); - }} > {data.linkTitle} From 0a178b2e38162b574889f09f6bf2c1b7a3ea16bb Mon Sep 17 00:00:00 2001 From: Luca Date: Wed, 4 Sep 2024 11:42:15 +0200 Subject: [PATCH 15/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx Co-authored-by: Piero Nicolli --- .../volto-blocks/src/components/blocks/IconsAndText/View.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx index 78d9172..188e214 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/View.tsx @@ -33,7 +33,7 @@ export default function View({ data, className, style }: Props) { > {data.title && (

{data.title}

From 06cd60dfe574a5c4630603743e379697a2f2707b Mon Sep 17 00:00:00 2001 From: Luca Date: Wed, 4 Sep 2024 11:42:27 +0200 Subject: [PATCH 16/19] Update packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx Co-authored-by: Piero Nicolli --- .../src/components/blocks/IconsAndText/ViewItem.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index f1c9a11..8ab4f4a 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -77,9 +77,6 @@ export default function ViewItem({ data }: Props) { ) => { - e.preventDefault(); - }} > {data.href_title} From 927238020a417ac8428b117432383ce9532ea52f Mon Sep 17 00:00:00 2001 From: Luca Bellenghi Date: Wed, 4 Sep 2024 11:45:01 +0200 Subject: [PATCH 17/19] apply suggestion from pr --- .../locales/en/LC_MESSAGES/volto.po | 80 ++++++++++++++++++ .../locales/it/LC_MESSAGES/volto.po | 80 ++++++++++++++++++ packages/volto-blocks/locales/volto.pot | 82 ++++++++++++++++++- .../blocks/IconsAndText/EditItem.tsx | 11 ++- .../components/blocks/IconsAndText/View.tsx | 1 - .../blocks/IconsAndText/ViewItem.tsx | 10 ++- .../components/blocks/IconsAndText/schema.ts | 70 ++++++++++++---- 7 files changed, 304 insertions(+), 30 deletions(-) diff --git a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po index 995ccdc..825b24e 100644 --- a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po @@ -68,6 +68,21 @@ msgstr "" msgid "addColumn" msgstr "" +#. Default: "After title" +#: components/blocks/IconsAndText/schema +msgid "after_title" +msgstr "" + +#. Default: "Before header text" +#: components/blocks/IconsAndText/schema +msgid "before_header_text" +msgstr "" + +#. Default: "Before title" +#: components/blocks/IconsAndText/schema +msgid "before_title" +msgstr "" + #. Default: "Column" #: components/blocks/IconsAndText/schema msgid "column" @@ -78,6 +93,21 @@ msgstr "" msgid "columnsNumber" msgstr "" +#. Default: "The image must be a PNG or SVG. The maximum recommended size for PNG is 200x200px." +#: components/blocks/IconsAndText/schema +msgid "description" +msgstr "" + +#. Default: "Divider position" +#: components/blocks/IconsAndText/schema +msgid "divider_position" +msgstr "" + +#. Default: "Header text position" +#: components/blocks/IconsAndText/schema +msgid "header_text_position" +msgstr "" + #. Default: "Icon" #: components/blocks/IconsAndText/schema msgid "icon" @@ -98,11 +128,56 @@ msgstr "" msgid "icons_and_text_title" msgstr "" +#. Default: "Image size" +#: components/blocks/IconsAndText/schema +msgid "image_size" +msgstr "" + +#. Default: "Large" +#: components/blocks/IconsAndText/schema +msgid "large" +msgstr "" + +#. Default: "Link" +#: components/blocks/IconsAndText/schema +msgid "link" +msgstr "" + +#. Default: "Link title" +#: components/blocks/IconsAndText/schema +msgid "link_title" +msgstr "" + +#. Default: "If no title is entered, and a link is selected, the link will be added to the block title." +#: components/blocks/IconsAndText/schema +msgid "link_title_description" +msgstr "" + +#. Default: "Medium" +#: components/blocks/IconsAndText/schema +msgid "medium" +msgstr "" + #. Default: "Do not fit the columns to the available space" #: components/blocks/IconsAndText/schema msgid "noAdaptColumns" msgstr "" +#. Default: "Hide divider" +#: components/blocks/IconsAndText/schema +msgid "no_divider" +msgstr "" + +#. Default: "On bottom" +#: components/blocks/IconsAndText/schema +msgid "on_bottom" +msgstr "" + +#. Default: "On right" +#: components/blocks/IconsAndText/schema +msgid "on_right" +msgstr "" + #. Default: "Columns" #: components/blocks/Accordion/schema msgid "redturtle__volto-blocks__accordion_columns_title" @@ -182,3 +257,8 @@ msgstr "" #: components/blocks/Text7/schema msgid "redturtle__volto-blocks__text7_title" msgstr "" + +#. Default: "Small" +#: components/blocks/IconsAndText/schema +msgid "small" +msgstr "" diff --git a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po index cec254d..cdca41b 100644 --- a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po +++ b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po @@ -68,6 +68,21 @@ msgstr "Titolo" msgid "addColumn" msgstr "" +#. Default: "After title" +#: components/blocks/IconsAndText/schema +msgid "after_title" +msgstr "" + +#. Default: "Before header text" +#: components/blocks/IconsAndText/schema +msgid "before_header_text" +msgstr "" + +#. Default: "Before title" +#: components/blocks/IconsAndText/schema +msgid "before_title" +msgstr "" + #. Default: "Column" #: components/blocks/IconsAndText/schema msgid "column" @@ -78,6 +93,21 @@ msgstr "" msgid "columnsNumber" msgstr "" +#. Default: "The image must be a PNG or SVG. The maximum recommended size for PNG is 200x200px." +#: components/blocks/IconsAndText/schema +msgid "description" +msgstr "" + +#. Default: "Divider position" +#: components/blocks/IconsAndText/schema +msgid "divider_position" +msgstr "" + +#. Default: "Header text position" +#: components/blocks/IconsAndText/schema +msgid "header_text_position" +msgstr "" + #. Default: "Icon" #: components/blocks/IconsAndText/schema msgid "icon" @@ -98,11 +128,56 @@ msgstr "" msgid "icons_and_text_title" msgstr "" +#. Default: "Image size" +#: components/blocks/IconsAndText/schema +msgid "image_size" +msgstr "" + +#. Default: "Large" +#: components/blocks/IconsAndText/schema +msgid "large" +msgstr "" + +#. Default: "Link" +#: components/blocks/IconsAndText/schema +msgid "link" +msgstr "" + +#. Default: "Link title" +#: components/blocks/IconsAndText/schema +msgid "link_title" +msgstr "" + +#. Default: "If no title is entered, and a link is selected, the link will be added to the block title." +#: components/blocks/IconsAndText/schema +msgid "link_title_description" +msgstr "" + +#. Default: "Medium" +#: components/blocks/IconsAndText/schema +msgid "medium" +msgstr "" + #. Default: "Do not fit the columns to the available space" #: components/blocks/IconsAndText/schema msgid "noAdaptColumns" msgstr "" +#. Default: "Hide divider" +#: components/blocks/IconsAndText/schema +msgid "no_divider" +msgstr "" + +#. Default: "On bottom" +#: components/blocks/IconsAndText/schema +msgid "on_bottom" +msgstr "" + +#. Default: "On right" +#: components/blocks/IconsAndText/schema +msgid "on_right" +msgstr "" + #. Default: "Columns" #: components/blocks/Accordion/schema msgid "redturtle__volto-blocks__accordion_columns_title" @@ -182,3 +257,8 @@ msgstr "" #: components/blocks/Text7/schema msgid "redturtle__volto-blocks__text7_title" msgstr "" + +#. Default: "Small" +#: components/blocks/IconsAndText/schema +msgid "small" +msgstr "" diff --git a/packages/volto-blocks/locales/volto.pot b/packages/volto-blocks/locales/volto.pot index 746680b..a142053 100644 --- a/packages/volto-blocks/locales/volto.pot +++ b/packages/volto-blocks/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2024-08-21T08:58:57.178Z\n" +"POT-Creation-Date: 2024-09-04T09:44:50.487Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "Content-Type: text/plain; charset=utf-8\n" @@ -70,6 +70,21 @@ msgstr "" msgid "addColumn" msgstr "" +#. Default: "After title" +#: components/blocks/IconsAndText/schema +msgid "after_title" +msgstr "" + +#. Default: "Before header text" +#: components/blocks/IconsAndText/schema +msgid "before_header_text" +msgstr "" + +#. Default: "Before title" +#: components/blocks/IconsAndText/schema +msgid "before_title" +msgstr "" + #. Default: "Column" #: components/blocks/IconsAndText/schema msgid "column" @@ -80,6 +95,21 @@ msgstr "" msgid "columnsNumber" msgstr "" +#. Default: "The image must be a PNG or SVG. The maximum recommended size for PNG is 200x200px." +#: components/blocks/IconsAndText/schema +msgid "description" +msgstr "" + +#. Default: "Divider position" +#: components/blocks/IconsAndText/schema +msgid "divider_position" +msgstr "" + +#. Default: "Header text position" +#: components/blocks/IconsAndText/schema +msgid "header_text_position" +msgstr "" + #. Default: "Icon" #: components/blocks/IconsAndText/schema msgid "icon" @@ -100,11 +130,56 @@ msgstr "" msgid "icons_and_text_title" msgstr "" +#. Default: "Image size" +#: components/blocks/IconsAndText/schema +msgid "image_size" +msgstr "" + +#. Default: "Large" +#: components/blocks/IconsAndText/schema +msgid "large" +msgstr "" + +#. Default: "Link" +#: components/blocks/IconsAndText/schema +msgid "link" +msgstr "" + +#. Default: "Link title" +#: components/blocks/IconsAndText/schema +msgid "link_title" +msgstr "" + +#. Default: "If no title is entered, and a link is selected, the link will be added to the block title." +#: components/blocks/IconsAndText/schema +msgid "link_title_description" +msgstr "" + +#. Default: "Medium" +#: components/blocks/IconsAndText/schema +msgid "medium" +msgstr "" + #. Default: "Do not fit the columns to the available space" #: components/blocks/IconsAndText/schema msgid "noAdaptColumns" msgstr "" +#. Default: "Hide divider" +#: components/blocks/IconsAndText/schema +msgid "no_divider" +msgstr "" + +#. Default: "On bottom" +#: components/blocks/IconsAndText/schema +msgid "on_bottom" +msgstr "" + +#. Default: "On right" +#: components/blocks/IconsAndText/schema +msgid "on_right" +msgstr "" + #. Default: "Columns" #: components/blocks/Accordion/schema msgid "redturtle__volto-blocks__accordion_columns_title" @@ -184,3 +259,8 @@ msgstr "" #: components/blocks/Text7/schema msgid "redturtle__volto-blocks__text7_title" msgstr "" + +#. Default: "Small" +#: components/blocks/IconsAndText/schema +msgid "small" +msgstr "" diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx index 0ca0063..a8717ef 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/EditItem.tsx @@ -1,3 +1,4 @@ +import config from '@plone/registry'; import type { ArrayElement } from '@plone/types'; import { UniversalLink } from '@plone/volto/components'; import { flattenToAppURL } from '@plone/volto/helpers'; @@ -6,7 +7,6 @@ import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/style import { TextEditorWidget } from '@redturtle/volto-rt-slate'; import cx from 'classnames'; import { defineMessages, useIntl } from 'react-intl'; - type Props = { data: ArrayElement; focusOn: string; @@ -24,10 +24,7 @@ export default function EditItem({ }: Props) { const intl = useIntl(); const icon = data.iconImage; - - if (__SERVER__) { - return
; - } + const Image = config.getComponent('Image').component; return (
- & { data: IconsAndTextData; diff --git a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx index 8ab4f4a..ab98bca 100644 --- a/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx +++ b/packages/volto-blocks/src/components/blocks/IconsAndText/ViewItem.tsx @@ -1,11 +1,11 @@ -import cx from 'classnames'; - +import config from '@plone/registry'; import type { ArrayElement } from '@plone/types'; import { TextBlockView } from '@plone/volto-slate/blocks/Text'; import { UniversalLink } from '@plone/volto/components'; import { flattenToAppURL } from '@plone/volto/helpers'; import type { IconsAndTextData } from '@redturtle/volto-blocks/components/blocks/IconsAndText/schema'; import styles from '@redturtle/volto-blocks/components/blocks/IconsAndText/styles.module.scss'; +import cx from 'classnames'; type Props = { data: ArrayElement; @@ -13,7 +13,7 @@ type Props = { export default function ViewItem({ data }: Props) { const icon = data.iconImage; - + const Image = config.getComponent('Image').component; return (
- Date: Thu, 5 Sep 2024 12:05:42 +0200 Subject: [PATCH 18/19] Added news item --- packages/volto-blocks/news/58009.feature | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/volto-blocks/news/58009.feature diff --git a/packages/volto-blocks/news/58009.feature b/packages/volto-blocks/news/58009.feature new file mode 100644 index 0000000..ea7f4dd --- /dev/null +++ b/packages/volto-blocks/news/58009.feature @@ -0,0 +1 @@ +Added Icons and Text block @luca-bellenghi From 829051d1195f4addb5a01348f8d547fb6c05a10d Mon Sep 17 00:00:00 2001 From: Piero Nicolli Date: Thu, 5 Sep 2024 12:29:09 +0200 Subject: [PATCH 19/19] Updated ci scripts --- .github/workflows/changelog.yml | 27 +++++++++++++++++++++++++++ .github/workflows/release.yml | 21 +++++++++++++++++---- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml index 61a708b..7f7aedd 100644 --- a/.github/workflows/changelog.yml +++ b/.github/workflows/changelog.yml @@ -5,6 +5,9 @@ on: branches: - main +env: + NODE_VERSION: 20.x + jobs: towncrier: runs-on: ubuntu-latest @@ -17,6 +20,30 @@ jobs: - name: Install towncrier run: pip install towncrier + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + + - name: Enable corepack + run: corepack enable + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - uses: actions/cache@v4 + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install dependencies + run: make install + - uses: dorny/paths-filter@v2 id: filter with: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index d33b590..49e10ad 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -26,11 +26,24 @@ jobs: - run: npm install -g npm - - name: Install pnpm - uses: pnpm/action-setup@v3 + - name: Enable corepack + run: corepack enable + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - uses: actions/cache@v4 + name: Setup pnpm cache with: - run_install: | - - args: [--frozen-lockfile] + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install dependencies + run: make install - name: Extract package from release tag id: get_package