From 9d952798bb9e80da2781091bc0c582d6a0809481 Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Sat, 24 Sep 2022 19:34:06 +0300 Subject: [PATCH 01/14] Add styling schema demo --- src/blocks/Listing/index.js | 9 +- src/blocks/Listing/schema.js | 99 ++++++++++++------- src/blocks/Teaser/index.js | 4 +- .../UniversalItem/UniversalItem.jsx | 4 +- src/components/UniversalItem/schema.js | 24 ++++- src/schema-utils.js | 57 +++++++++-- 6 files changed, 138 insertions(+), 59 deletions(-) diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index b7f04f5a..30263b56 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -11,7 +11,7 @@ import { import { DefaultItemLayout } from './ItemTemplates'; import { SearchItemLayout } from './SearchItemTemplate'; -import { ListingStylingSchema } from './schema'; +import { ListingStylingSchemaEnhancer } from './schema'; const applyConfig = (config) => { // moment date locale. See https://momentjs.com/ - Multiple Locale Support @@ -84,6 +84,7 @@ const applyConfig = (config) => { isDefault: false, title: 'Search Item', view: SearchItemLayout, + stylesSchema: ListingStylingSchemaEnhancer, }, ], cardTemplates: [ @@ -112,10 +113,8 @@ const applyConfig = (config) => { }; // Theming - if (!listing.enableStyling) { - listing.enableStyling = true; - listing.stylesSchema = ListingStylingSchema; - } + // This bug needs to be fixed first: https://github.com/plone/volto/issues/3675 + // listing.enableStyling = true; return config; }; diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index 9e68b37e..0fd46842 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -11,6 +11,11 @@ const ALIGN_VALUE_MAP = [ ]; const messages = defineMessages({ + styling: { + id: 'Styling', + defaultMessage: 'Styling', + }, + Type: { id: 'Listing', defaultMessage: 'Listing', @@ -57,42 +62,60 @@ const messages = defineMessages({ }, }); -export const ListingStylingSchema = ({ intl }) => ({ - title: intl.formatMessage(messages.Type), - block: 'listing', - fieldsets: [ - { - id: 'default', - title: 'Default', - fields: ['theme', 'text_align', 'rounded', 'inverted'], - }, - ], - properties: { - theme: { - title: intl.formatMessage(messages.Theme), - description: intl.formatMessage(messages.ThemeHelp), - choices: [ - ['', intl.formatMessage(messages.ThemeDefault)], - ['primary', intl.formatMessage(messages.ThemePrimary)], - ['secondary', intl.formatMessage(messages.ThemeSecondary)], - ['tertiary', intl.formatMessage(messages.ThemeTertiary)], - ], - }, - text_align: { - title: 'Text align', - widget: 'style_text_align', - actions: ALIGN_VALUE_MAP, - }, - inverted: { - title: intl.formatMessage(messages.Inverted), - description: intl.formatMessage(messages.InvertedHelp), - type: 'boolean', - }, - rounded: { - title: intl.formatMessage(messages.Rounded), - description: intl.formatMessage(messages.RoundedHelp), - type: 'boolean', +export const ListingStylingSchemaEnhancer = ({ schema, intl }) => { + // console.log('schema', schema); + + schema.fieldsets.push({ + id: 'styling', + title: intl.formatMessage(messages.styling), + fields: ['styles'], + }); + + const stylesSchema = { + title: intl.formatMessage(messages.Type), + block: 'listing', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['theme', 'text_align', 'rounded', 'inverted'], + }, + ], + properties: { + theme: { + title: intl.formatMessage(messages.Theme), + description: intl.formatMessage(messages.ThemeHelp), + choices: [ + ['', intl.formatMessage(messages.ThemeDefault)], + ['primary', intl.formatMessage(messages.ThemePrimary)], + ['secondary', intl.formatMessage(messages.ThemeSecondary)], + ['tertiary', intl.formatMessage(messages.ThemeTertiary)], + ], + }, + text_align: { + title: 'Text align', + widget: 'style_text_align', + actions: ALIGN_VALUE_MAP, + }, + inverted: { + title: intl.formatMessage(messages.Inverted), + description: intl.formatMessage(messages.InvertedHelp), + type: 'boolean', + }, + rounded: { + title: intl.formatMessage(messages.Rounded), + description: intl.formatMessage(messages.RoundedHelp), + type: 'boolean', + }, }, - }, - required: [], -}); + required: [], + }; + + schema.properties.styles = { + widget: 'object', + title: intl.formatMessage(messages.styling), + schema: stylesSchema, + }; + + return schema; +}; diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js index 85ab1853..14808e2a 100644 --- a/src/blocks/Teaser/index.js +++ b/src/blocks/Teaser/index.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import TeaserCardTemplate from './Card'; -import { ListingStylingSchema } from '../Listing/schema'; +import { ListingStylingSchemaEnhancer } from '../Listing/schema'; import { adjustTeaserSchema } from './schema'; import { UniversalCard } from '@eeacms/volto-listing-block'; @@ -21,7 +21,7 @@ export default (config) => { }, ]; config.blocks.blocksConfig.teaser.enableStyling = true; - config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchema; + config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchemaEnhancer; } // Teaser Grid diff --git a/src/components/UniversalItem/UniversalItem.jsx b/src/components/UniversalItem/UniversalItem.jsx index 0dbbe54e..8e3ffc4c 100644 --- a/src/components/UniversalItem/UniversalItem.jsx +++ b/src/components/UniversalItem/UniversalItem.jsx @@ -2,7 +2,7 @@ import config from '@plone/volto/registry'; import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions'; import { Item } from './model'; -import schemaEnhancer from './schema'; +import universalItemSchemaEnhancer from './schema'; const UniversalItem = (props) => { const { itemModel = {}, item, ...rest } = props; @@ -16,6 +16,6 @@ const UniversalItem = (props) => { return ; }; -UniversalItem.schemaEnhancer = schemaEnhancer; +UniversalItem.schemaEnhancer = universalItemSchemaEnhancer; export default UniversalItem; diff --git a/src/components/UniversalItem/schema.js b/src/components/UniversalItem/schema.js index 0603949b..92e698b9 100644 --- a/src/components/UniversalItem/schema.js +++ b/src/components/UniversalItem/schema.js @@ -1,4 +1,7 @@ -import { enhanceSchema } from '@eeacms/volto-listing-block/schema-utils'; +import { + enhanceSchema, + addStylingSchema, +} from '@eeacms/volto-listing-block/schema-utils'; import { defineMessages } from 'react-intl'; const messages = defineMessages({ @@ -74,8 +77,11 @@ const ItemSchema = ({ formData }) => { export default function universalItemSchemaEnhancer(props) { const { schema } = props; - const enhancer = enhanceSchema({ extensionName: 'itemTemplates', messages }); - return { + const enhanceItemModel = enhanceSchema({ + extensionName: 'itemTemplates', + messages, + }); + const baseSchema = { ...schema, fieldsets: [ ...schema.fieldsets, @@ -90,11 +96,21 @@ export default function universalItemSchemaEnhancer(props) { itemModel: { title: 'Item model', widget: 'object', - schema: enhancer({ + schema: enhanceItemModel({ ...props, schema: ItemSchema(props), }), }, }, }; + + console.log('1schema', baseSchema); + + const styledSchema = addStylingSchema({ + ...props, + schema: baseSchema, + formData: props.formData?.itemModel || {}, + }); + + return styledSchema; } diff --git a/src/schema-utils.js b/src/schema-utils.js index a1453588..5704f326 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -15,14 +15,16 @@ const addTypeSelect = ({ intl, schema, extensionName, messages }) => { return schema; }; -export const enhanceSchema = ({ extensionName, messages }) => ({ - schema: originalSchema, - formData, - intl, -}) => { - // const extensionName = 'itemTemplates'; - const extensionType = '@type'; // property name in stored block data - const extensions = config.blocks.blocksConfig.listing.extensions; +export const enhanceSchema = ({ + extensionName, + messages, + blockType = 'listing', +}) => ({ schema: originalSchema, formData, intl }) => { + const extensionType = '@type'; // the attribute name that's stored in the block data + // it identifies the type of extension that's + // applied. Similar in scope, for example, with the block @type + const blockConfig = config.blocks.blocksConfig[blockType]; + const extensions = blockConfig.extensions; const variations = extensions[extensionName]; const activeItemName = formData?.[extensionType]; @@ -38,6 +40,45 @@ export const enhanceSchema = ({ extensionName, messages }) => ({ return addTypeSelect({ schema, intl, extensionName, messages }); }; +export const addStylingSchema = ({ + formData, + schema, + blockType = 'listing', + extensionName = 'itemTemplates', + intl, +}) => { + const extensionType = '@type'; // the attribute name that's stored in the block data + const activeItemName = formData?.[extensionType]; + const blockConfig = config.blocks.blocksConfig[blockType]; + const activeVariation = + formData['variation'] || + blockConfig.variations?.find(({ isDefault }) => isDefault) || + {}; + const extensions = blockConfig.extensions; + const variations = extensions[extensionName]; + let activeItem = variations?.find((item) => item.id === activeItemName); + + const variationStyleSchema = activeVariation.stylesSchema; + schema = variationStyleSchema + ? variationStyleSchema({ schema: cloneDeep(schema), formData, intl }) + : schema; + + const stylingSchema = activeItem?.['stylesSchema']; + schema = stylingSchema + ? stylingSchema({ schema: cloneDeep(schema), formData, intl }) + : schema; + + console.log('activeItem', { + activeItem, + activeVariation, + variationStyleSchema, + stylingSchema, + schema, + }); + + return schema; +}; + export const getVoltoStyles = (props) => { const styles = props ? props : {}; const output = {}; From f0825350da16338026c26622ad30911d5439d649 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 12:42:06 +0300 Subject: [PATCH 02/14] linting fixes --- src/components/UniversalItem/schema.js | 2 -- src/less/listing-cards.less | 24 ++++++++++++++---------- src/schema-utils.js | 8 -------- 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/src/components/UniversalItem/schema.js b/src/components/UniversalItem/schema.js index 92e698b9..e2a99f0d 100644 --- a/src/components/UniversalItem/schema.js +++ b/src/components/UniversalItem/schema.js @@ -104,8 +104,6 @@ export default function universalItemSchemaEnhancer(props) { }, }; - console.log('1schema', baseSchema); - const styledSchema = addStylingSchema({ ...props, schema: baseSchema, diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index 6c778bf5..a13b4903 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -70,7 +70,6 @@ each(range(5), { } } - .listing-item { padding-bottom: 16px; border-bottom: 1px solid #bcbec0; @@ -86,6 +85,7 @@ each(range(5), { .listing-header { margin-bottom: 8px; } + .meta .date { margin-left: auto; } @@ -103,35 +103,39 @@ each(range(5), { // listing theme styling alongside inverse options .has--theme--primary { - --text-color: var(--text-color--primary, #FFF); + --text-color: var(--text-color--primary, #fff); background-color: var(--background-color, @primaryColor); - color: var(--text-color, #FFF); + color: var(--text-color, #fff); } + .has--theme--secondary { - --text-color: var(--text-color--secondary, #FFF); + --text-color: var(--text-color--secondary, #fff); background-color: var(--background-color, @secondaryColor); - color: var(--text-color--secondary, #FFF); + color: var(--text-color--secondary, #fff); } + .has--theme--tertiary { - --text-color: var(--text-color--tertiary, #FFF); + --text-color: var(--text-color--tertiary, #fff); background-color: var(--background-color, @tertiaryColor); color: var(--text-color); } + .has--inverted--:not(.has--theme--) { - --text-color: #FFF; + --text-color: #fff; --theme-padding: 32px 1.5rem; } + .has--inverted--true { --text-color--primary: @primaryColor; --text-color--secondary: @secondaryColor; --text-color--tertiary: @tertiaryColor; --theme-padding: 32px 0; - --background-color: #FFF; + --background-color: #fff; } .u-item.listing-item { - padding: var(--theme-padding, 32px 1rem); - margin: 0; + padding: var(--theme-padding, 32px 1rem); + margin: 0; } .ui.card.u-card { diff --git a/src/schema-utils.js b/src/schema-utils.js index 5704f326..7ede36bb 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -68,14 +68,6 @@ export const addStylingSchema = ({ ? stylingSchema({ schema: cloneDeep(schema), formData, intl }) : schema; - console.log('activeItem', { - activeItem, - activeVariation, - variationStyleSchema, - stylingSchema, - schema, - }); - return schema; }; From a5a1324b1b80fca264342ff24f050b212a2505b3 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 16:16:15 +0300 Subject: [PATCH 03/14] fix cypress by defining color also in volto-listing-block --- src/less/listing-cards.variables | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/less/listing-cards.variables b/src/less/listing-cards.variables index 6090d550..3aa2e397 100644 --- a/src/less/listing-cards.variables +++ b/src/less/listing-cards.variables @@ -1 +1,5 @@ -@categoryFontSize: 12px; \ No newline at end of file +@categoryFontSize: 12px; + +@primaryColor : #004B7F; +@secondaryColor : #007B6C; +@tertiaryColor : #3D5265; From a4c7ae5f11443833f936fa182ecbbf8b4a2db46f Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Mon, 26 Sep 2022 18:24:25 +0300 Subject: [PATCH 04/14] WIP --- src/blocks/Listing/index.js | 33 +++++---- src/blocks/Listing/schema.js | 87 ++++++++++-------------- src/blocks/Listing/templates/Summary.jsx | 5 ++ src/components/UniversalCard/schema.js | 7 +- src/components/UniversalItem/schema.js | 15 ++-- src/schema-utils.js | 69 ++++++++++++++++--- 6 files changed, 138 insertions(+), 78 deletions(-) diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index 30263b56..9adf16dc 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -1,17 +1,21 @@ import CardsCarousel from './templates/CardsCarousel'; -import CustomCardsGalleryTemplate from './templates/CardsGallery'; -import CustomNewsListTemplate from './templates/NewsList'; -import CustomSummaryListingBlockTemplate from './templates/Summary'; +import CardsGallery from './templates/CardsGallery'; +import NewsList from './templates/NewsList'; +import Summary from './templates/Summary'; + import { DefaultCardLayout, ImageCardLayout, LeftImageCardLayout, RightImageCardLayout, } from './CardTemplates'; + import { DefaultItemLayout } from './ItemTemplates'; import { SearchItemLayout } from './SearchItemTemplate'; -import { ListingStylingSchemaEnhancer } from './schema'; +import { BasicListingBlockStylesSchema } from './schema'; + +// import { ListingStylingSchemaEnhancer } from './schema'; const applyConfig = (config) => { // moment date locale. See https://momentjs.com/ - Multiple Locale Support @@ -22,9 +26,12 @@ const applyConfig = (config) => { const { schemaEnhancer } = listing; + // listing.stylesSchema = BasicListingBlockStylesSchema; + listing.schemaEnhancer = (props) => { + // NOTE: this is a schema finalizer const schema = schemaEnhancer ? schemaEnhancer(props) : props.schema; - // + // move querystring to its own fieldset; schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter( (f) => f !== 'querystring', @@ -44,8 +51,9 @@ const applyConfig = (config) => { id: 'summary', isDefault: false, title: 'Item listing', - template: CustomSummaryListingBlockTemplate, - schemaEnhancer: CustomSummaryListingBlockTemplate.schemaEnhancer, + template: Summary, + schemaEnhancer: Summary.schemaEnhancer, + stylesSchema: Summary.styleSchemaEnhancer, }, { id: 'cardsCarousel', @@ -53,20 +61,21 @@ const applyConfig = (config) => { title: 'Cards carousel', template: CardsCarousel, schemaEnhancer: CardsCarousel.schemaEnhancer, + stylesSchema: CardsCarousel.styleSchemaEnhancer, }, { id: 'customCardsGalleryVariationId', isDefault: false, title: 'Cards gallery', - template: CustomCardsGalleryTemplate, - schemaEnhancer: CustomCardsGalleryTemplate.schemaEnhancer, + template: CardsGallery, + schemaEnhancer: CardsGallery.schemaEnhancer, }, { id: 'customNewsListVariationId', isDefault: false, title: 'News List', - template: CustomNewsListTemplate, - schemaEnhancer: CustomNewsListTemplate.schemaEnhancer, + template: NewsList, + schemaEnhancer: NewsList.schemaEnhancer, }, ]; @@ -84,7 +93,7 @@ const applyConfig = (config) => { isDefault: false, title: 'Search Item', view: SearchItemLayout, - stylesSchema: ListingStylingSchemaEnhancer, + // stylesSchema: ListingStylingSchemaEnhancer, }, ], cardTemplates: [ diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index 0fd46842..d92b7bcf 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -62,59 +62,46 @@ const messages = defineMessages({ }, }); -export const ListingStylingSchemaEnhancer = ({ schema, intl }) => { - // console.log('schema', schema); +export const ListingStylingSchemaEnhancer = ({ schema }) => { + return schema; +}; - schema.fieldsets.push({ - id: 'styling', - title: intl.formatMessage(messages.styling), - fields: ['styles'], - }); +export const BasicListingBlockStylesSchema = ({ schema, intl }) => { + // return schema; + schema.fieldsets[0].fields.push( + 'theme', + 'text_align', + // 'rounded', + // 'inverted', + ); - const stylesSchema = { - title: intl.formatMessage(messages.Type), - block: 'listing', - fieldsets: [ - { - id: 'default', - title: 'Default', - fields: ['theme', 'text_align', 'rounded', 'inverted'], - }, - ], - properties: { - theme: { - title: intl.formatMessage(messages.Theme), - description: intl.formatMessage(messages.ThemeHelp), - choices: [ - ['', intl.formatMessage(messages.ThemeDefault)], - ['primary', intl.formatMessage(messages.ThemePrimary)], - ['secondary', intl.formatMessage(messages.ThemeSecondary)], - ['tertiary', intl.formatMessage(messages.ThemeTertiary)], - ], - }, - text_align: { - title: 'Text align', - widget: 'style_text_align', - actions: ALIGN_VALUE_MAP, - }, - inverted: { - title: intl.formatMessage(messages.Inverted), - description: intl.formatMessage(messages.InvertedHelp), - type: 'boolean', - }, - rounded: { - title: intl.formatMessage(messages.Rounded), - description: intl.formatMessage(messages.RoundedHelp), - type: 'boolean', - }, + schema.properties = { + ...schema.properties, + theme: { + title: intl.formatMessage(messages.Theme), + description: intl.formatMessage(messages.ThemeHelp), + choices: [ + ['', intl.formatMessage(messages.ThemeDefault)], + ['primary', intl.formatMessage(messages.ThemePrimary)], + ['secondary', intl.formatMessage(messages.ThemeSecondary)], + ['tertiary', intl.formatMessage(messages.ThemeTertiary)], + ], }, - required: [], - }; - - schema.properties.styles = { - widget: 'object', - title: intl.formatMessage(messages.styling), - schema: stylesSchema, + text_align: { + title: 'Text align', + widget: 'style_text_align', + actions: ALIGN_VALUE_MAP, + }, + // inverted: { + // title: intl.formatMessage(messages.Inverted), + // description: intl.formatMessage(messages.InvertedHelp), + // type: 'boolean', + // }, + // rounded: { + // title: intl.formatMessage(messages.Rounded), + // description: intl.formatMessage(messages.RoundedHelp), + // type: 'boolean', + // }, }; return schema; diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx index 0e9df3a6..4428d99d 100644 --- a/src/blocks/Listing/templates/Summary.jsx +++ b/src/blocks/Listing/templates/Summary.jsx @@ -46,6 +46,11 @@ SummaryListing.schemaEnhancer = (args) => { return schema; }; +SummaryListing.styleSchemaEnhancer = ({ schema }) => { + // console.log('style', schema); + return schema; +}; + SummaryListing.propTypes = { items: PropTypes.arrayOf(PropTypes.any).isRequired, linkMore: PropTypes.any, diff --git a/src/components/UniversalCard/schema.js b/src/components/UniversalCard/schema.js index ca3d3482..72c25b26 100644 --- a/src/components/UniversalCard/schema.js +++ b/src/components/UniversalCard/schema.js @@ -1,5 +1,5 @@ import { defineMessages } from 'react-intl'; -import { enhanceSchema } from '@eeacms/volto-listing-block/schema-utils'; +import { schemaEnhancerFactory } from '@eeacms/volto-listing-block/schema-utils'; const messages = defineMessages({ title: { @@ -110,7 +110,10 @@ const CardSchema = ({ formData }) => { export default function universalCardSchemaEnhancer(props) { const { schema } = props; - const enhancer = enhanceSchema({ extensionName: 'cardTemplates', messages }); + const enhancer = schemaEnhancerFactory({ + extensionName: 'cardTemplates', + messages, + }); return { ...schema, fieldsets: [ diff --git a/src/components/UniversalItem/schema.js b/src/components/UniversalItem/schema.js index e2a99f0d..fe657b90 100644 --- a/src/components/UniversalItem/schema.js +++ b/src/components/UniversalItem/schema.js @@ -1,6 +1,6 @@ import { - enhanceSchema, - addStylingSchema, + schemaEnhancerFactory, + enhanceStylingSchema, } from '@eeacms/volto-listing-block/schema-utils'; import { defineMessages } from 'react-intl'; @@ -77,10 +77,14 @@ const ItemSchema = ({ formData }) => { export default function universalItemSchemaEnhancer(props) { const { schema } = props; - const enhanceItemModel = enhanceSchema({ + + const enhanceItemModel = schemaEnhancerFactory({ extensionName: 'itemTemplates', messages, + blockType: 'listing', + extensionField: '@type', }); + const baseSchema = { ...schema, fieldsets: [ @@ -104,10 +108,11 @@ export default function universalItemSchemaEnhancer(props) { }, }; - const styledSchema = addStylingSchema({ + const styledSchema = enhanceStylingSchema({ ...props, schema: baseSchema, - formData: props.formData?.itemModel || {}, + // schema: baseSchema.properties.styles.schema, + formData: props.formData, }); return styledSchema; diff --git a/src/schema-utils.js b/src/schema-utils.js index 7ede36bb..9a513845 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -1,6 +1,9 @@ import { cloneDeep } from 'lodash'; import config from '@plone/volto/registry'; +import { defineMessages } from 'react-intl'; +import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema'; + const addTypeSelect = ({ intl, schema, extensionName, messages }) => { const field = '@type'; const extensions = config.blocks.blocksConfig.listing.extensions; @@ -15,21 +18,25 @@ const addTypeSelect = ({ intl, schema, extensionName, messages }) => { return schema; }; -export const enhanceSchema = ({ +// Creates a factory that can trigger schemaEnhancer for a given extension +export const schemaEnhancerFactory = ({ extensionName, messages, blockType = 'listing', + extensionField = '@type', }) => ({ schema: originalSchema, formData, intl }) => { - const extensionType = '@type'; // the attribute name that's stored in the block data + // + // the attribute name that's stored in the block data // it identifies the type of extension that's // applied. Similar in scope, for example, with the block @type + const blockConfig = config.blocks.blocksConfig[blockType]; const extensions = blockConfig.extensions; - const variations = extensions[extensionName]; + const templates = extensions[extensionName]; - const activeItemName = formData?.[extensionType]; - let activeItem = variations?.find((item) => item.id === activeItemName); - if (!activeItem) activeItem = variations?.find((item) => item.isDefault); + const activeItemName = formData?.[extensionField]; + let activeItem = templates?.find((item) => item.id === activeItemName); + if (!activeItem) activeItem = templates?.find((item) => item.isDefault); const schemaEnhancer = activeItem?.['schemaEnhancer']; @@ -40,13 +47,55 @@ export const enhanceSchema = ({ return addTypeSelect({ schema, intl, extensionName, messages }); }; -export const addStylingSchema = ({ +const messages = defineMessages({ + variation: { + id: 'Variation', + defaultMessage: 'Variation', + }, + styling: { + id: 'Styling', + defaultMessage: 'Styling', + }, +}); + +const addStylesField = ({ schema, intl, formData }) => { + // Add the default style schema as the first step in the "ladder". + // The order is as follows: + // + // - default volto style schema + // - listing block -> default style schema enhancer + // - listing block variation -> style schema enhancer + // - listing block card/item extension -> style schema enhancer + // + // We omit the first step in ladder because of bugs in Volto < 16.0.0-alpha.36 + // In later versions we won't have to redefine the styles field + + if (schema.properties.styles) return schema; + + schema.fieldsets.push({ + id: 'styling', + title: intl.formatMessage(messages.styling), + fields: ['styles'], + }); + + schema.properties.styles = { + widget: 'object', + title: intl.formatMessage(messages.styling), + schema: defaultStyleSchema({ formData, intl }), + }; + + return schema; +}; +export const enhanceStylingSchema = ({ formData, schema, blockType = 'listing', - extensionName = 'itemTemplates', + extensionName = 'itemModel', intl, }) => { + // Adds (to the limited styles schema) the new styling schema enhancements + schema = addStylesField({ formData, schema, intl }); + const extensionType = '@type'; // the attribute name that's stored in the block data const activeItemName = formData?.[extensionType]; const blockConfig = config.blocks.blocksConfig[blockType]; @@ -58,10 +107,12 @@ export const addStylingSchema = ({ const variations = extensions[extensionName]; let activeItem = variations?.find((item) => item.id === activeItemName); - const variationStyleSchema = activeVariation.stylesSchema; + // TODO: not needed after bug fix in Volto + const variationStyleSchema = activeVariation?.stylesSchema; schema = variationStyleSchema ? variationStyleSchema({ schema: cloneDeep(schema), formData, intl }) : schema; + // end TODO const stylingSchema = activeItem?.['stylesSchema']; schema = stylingSchema From b1507ecf3775851836d0d928f9021d7141ddd3cb Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 20:24:13 +0300 Subject: [PATCH 05/14] change(item): listing images now provide left and right classes to style accordingly - style left and right image to provide margin where needed --- src/blocks/Listing/ItemTemplates.jsx | 4 ++-- src/less/listing-cards.less | 23 ++++++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/blocks/Listing/ItemTemplates.jsx b/src/blocks/Listing/ItemTemplates.jsx index ef572a89..f03cdbf9 100644 --- a/src/blocks/Listing/ItemTemplates.jsx +++ b/src/blocks/Listing/ItemTemplates.jsx @@ -47,11 +47,11 @@ const BasicItem = (props) => { hasDescription={hasDescription} hasDate={hasDate} /> - + ) : ( <> - + Date: Mon, 26 Sep 2022 21:01:09 +0300 Subject: [PATCH 06/14] WIP --- .../Listing/templates/CardsCarousel.jsx | 2 +- src/blocks/Listing/templates/CardsGallery.jsx | 2 +- src/blocks/Listing/templates/Summary.jsx | 9 +++------ src/blocks/Teaser/Card.jsx | 2 +- src/blocks/Teaser/index.js | 2 +- .../UniversalCard/UniversalCard.jsx | 4 ++-- .../UniversalItem/UniversalItem.jsx | 4 ++-- src/schema-utils.js | 20 ++++++++++++------- 8 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/blocks/Listing/templates/CardsCarousel.jsx b/src/blocks/Listing/templates/CardsCarousel.jsx index 4e7ef0f0..f5dee25a 100644 --- a/src/blocks/Listing/templates/CardsCarousel.jsx +++ b/src/blocks/Listing/templates/CardsCarousel.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Icon } from 'semantic-ui-react'; import loadable from '@loadable/component'; -import { UniversalCard } from '@eeacms/volto-listing-block'; +import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer'; const Slider = loadable(() => import('react-slick')); diff --git a/src/blocks/Listing/templates/CardsGallery.jsx b/src/blocks/Listing/templates/CardsGallery.jsx index 5c811b9b..65641087 100644 --- a/src/blocks/Listing/templates/CardsGallery.jsx +++ b/src/blocks/Listing/templates/CardsGallery.jsx @@ -1,7 +1,7 @@ import moment from 'moment'; import PropTypes from 'prop-types'; import React from 'react'; -import { UniversalCard } from '@eeacms/volto-listing-block'; +import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; import config from '@plone/volto/registry'; const CardsGallery = ({ diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx index 4428d99d..d1250c35 100644 --- a/src/blocks/Listing/templates/Summary.jsx +++ b/src/blocks/Listing/templates/Summary.jsx @@ -1,5 +1,5 @@ import { ConditionalLink } from '@plone/volto/components'; -import { UniversalItem } from '@eeacms/volto-listing-block'; +import UniversalItem from '@eeacms/volto-listing-block/components/UniversalItem/UniversalItem'; import { flattenToAppURL } from '@plone/volto/helpers'; import { isInternalURL } from '@plone/volto/helpers/Url/Url'; import config from '@plone/volto/registry'; @@ -41,13 +41,10 @@ const SummaryListing = (props) => { ); }; -SummaryListing.schemaEnhancer = (args) => { - const schema = UniversalItem.schemaEnhancer(args); - return schema; -}; +SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer; SummaryListing.styleSchemaEnhancer = ({ schema }) => { - // console.log('style', schema); + console.log('style', schema); return schema; }; diff --git a/src/blocks/Teaser/Card.jsx b/src/blocks/Teaser/Card.jsx index 5f24b283..ab030054 100644 --- a/src/blocks/Teaser/Card.jsx +++ b/src/blocks/Teaser/Card.jsx @@ -4,7 +4,7 @@ import { omit } from 'lodash'; import { Message } from 'semantic-ui-react'; import { defineMessages, useIntl } from 'react-intl'; -import { UniversalCard } from '@eeacms/volto-listing-block'; +import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg'; diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js index 14808e2a..44e472a5 100644 --- a/src/blocks/Teaser/index.js +++ b/src/blocks/Teaser/index.js @@ -2,7 +2,7 @@ import { compose } from 'redux'; import TeaserCardTemplate from './Card'; import { ListingStylingSchemaEnhancer } from '../Listing/schema'; import { adjustTeaserSchema } from './schema'; -import { UniversalCard } from '@eeacms/volto-listing-block'; +import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; export default (config) => { // Teaser diff --git a/src/components/UniversalCard/UniversalCard.jsx b/src/components/UniversalCard/UniversalCard.jsx index 33c9b967..f4f12df3 100644 --- a/src/components/UniversalCard/UniversalCard.jsx +++ b/src/components/UniversalCard/UniversalCard.jsx @@ -7,7 +7,7 @@ import { Item } from './model'; import { getVoltoStyles } from '@eeacms/volto-listing-block/schema-utils'; import schemaEnhancer from './schema'; -const UniversalCard = (props) => { +function UniversalCard(props) { const { itemModel = {}, styles, item, ...rest } = props; const extension = resolveExtension( '@type', @@ -27,7 +27,7 @@ const UniversalCard = (props) => { {...rest} /> ); -}; +} UniversalCard.schemaEnhancer = schemaEnhancer; diff --git a/src/components/UniversalItem/UniversalItem.jsx b/src/components/UniversalItem/UniversalItem.jsx index 8e3ffc4c..067047f8 100644 --- a/src/components/UniversalItem/UniversalItem.jsx +++ b/src/components/UniversalItem/UniversalItem.jsx @@ -4,7 +4,7 @@ import { Item } from './model'; import universalItemSchemaEnhancer from './schema'; -const UniversalItem = (props) => { +function UniversalItem(props) { const { itemModel = {}, item, ...rest } = props; const extension = resolveExtension( '@type', @@ -14,7 +14,7 @@ const UniversalItem = (props) => { const ItemTemplate = extension.view; return ; -}; +} UniversalItem.schemaEnhancer = universalItemSchemaEnhancer; diff --git a/src/schema-utils.js b/src/schema-utils.js index 9a513845..610c06e6 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -90,30 +90,36 @@ export const enhanceStylingSchema = ({ formData, schema, blockType = 'listing', - extensionName = 'itemModel', + extensionName = 'itemTemplates', intl, }) => { // Adds (to the limited styles schema) the new styling schema enhancements schema = addStylesField({ formData, schema, intl }); - const extensionType = '@type'; // the attribute name that's stored in the block data - const activeItemName = formData?.[extensionType]; + // first, enhance styling schema based on the variation + // then, enhance it based on the `${extensionName}` + // TODO: use resolveExtensions() from Volto + const blockConfig = config.blocks.blocksConfig[blockType]; const activeVariation = formData['variation'] || blockConfig.variations?.find(({ isDefault }) => isDefault) || {}; - const extensions = blockConfig.extensions; - const variations = extensions[extensionName]; - let activeItem = variations?.find((item) => item.id === activeItemName); - // TODO: not needed after bug fix in Volto + // TODO: not needed when we will use latest Volto const variationStyleSchema = activeVariation?.stylesSchema; schema = variationStyleSchema ? variationStyleSchema({ schema: cloneDeep(schema), formData, intl }) : schema; // end TODO + const extensionType = '@type'; // the attribute name that's stored in the block data + const extensionTemplates = blockConfig.extensions?.[extensionName]; + const activeItemName = formData?.itemModel?.[extensionType]; + let activeItem = extensionTemplates?.find( + (item) => item.id === activeItemName, + ); + const stylingSchema = activeItem?.['stylesSchema']; schema = stylingSchema ? stylingSchema({ schema: cloneDeep(schema), formData, intl }) From d46f7ba7bc525e177df3eceda5a6a26e1a5cf2d9 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 21:09:54 +0300 Subject: [PATCH 07/14] change(styles): set more variables on has classes instead of using them as override styles --- src/less/listing-cards.less | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index d668e996..cfb3d680 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -97,15 +97,20 @@ each(range(5), { } // listing theme styling alongside inverse options -.has--rounded-- .listing-item .image { - width: auto !important; - max-width: 350px !important; +.listing .listing-item .ui.image { + width: var(--image-width, auto); + height: var(--image-height, auto); + border-radius: var(--border-radius, 0); } -.has--rounded--true img { - width: 176px !important; - height: 176px !important; - border-radius: 50%; +.listing-item .image { + --image-max-width: 350px; +} + +.has--rounded--true { + --image-width: 176px !important; + --image-height: 176px !important; + --border-radius: 50%; } .has--theme--primary { --text-color: var(--text-color--primary, #fff); @@ -144,6 +149,7 @@ each(range(5), { .image.right { margin-left: 24px; + margin-right: 0; } .u-item.listing-item { From b4f3880be732e1e92c44a07cbcd8ea06c7c52557 Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Mon, 26 Sep 2022 21:20:52 +0300 Subject: [PATCH 08/14] WIP --- src/blocks/Listing/SearchItemTemplate.jsx | 14 +++++ src/blocks/Listing/index.js | 4 +- src/blocks/Listing/schema.js | 72 +++-------------------- src/blocks/Listing/templates/Summary.jsx | 22 +++++-- src/schema-utils.js | 15 +++-- 5 files changed, 50 insertions(+), 77 deletions(-) diff --git a/src/blocks/Listing/SearchItemTemplate.jsx b/src/blocks/Listing/SearchItemTemplate.jsx index f451208e..66cc0703 100644 --- a/src/blocks/Listing/SearchItemTemplate.jsx +++ b/src/blocks/Listing/SearchItemTemplate.jsx @@ -1,4 +1,5 @@ import cx from 'classnames'; +import messages from '@eeacms/volto-listing-block/messages'; import PreviewImage from '@eeacms/volto-listing-block/PreviewImage'; const BodyText = ({ item, hasDescription }) => { @@ -59,3 +60,16 @@ const BasicItem = (props) => { export const SearchItemLayout = (props) => { return ; }; +SearchItemLayout.styleSchemaEnhancer = ({ schema, intl }) => { + const styleSchema = schema.properties.styles.schema; + styleSchema.fieldsets[0].fields.push('rounded'); + styleSchema.properties = { + ...styleSchema.properties, + rounded: { + title: intl.formatMessage(messages.Rounded), + description: intl.formatMessage(messages.RoundedHelp), + type: 'boolean', + }, + }; + return schema; +}; diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index 9adf16dc..ccc71b60 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -26,7 +26,7 @@ const applyConfig = (config) => { const { schemaEnhancer } = listing; - // listing.stylesSchema = BasicListingBlockStylesSchema; + listing.stylesSchema = BasicListingBlockStylesSchema; listing.schemaEnhancer = (props) => { // NOTE: this is a schema finalizer @@ -93,7 +93,7 @@ const applyConfig = (config) => { isDefault: false, title: 'Search Item', view: SearchItemLayout, - // stylesSchema: ListingStylingSchemaEnhancer, + stylesSchema: SearchItemLayout.styleSchemaEnhancer, }, ], cardTemplates: [ diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index d92b7bcf..bfe57256 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -1,4 +1,5 @@ -import { defineMessages } from 'react-intl'; +import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema'; +import messages from '@eeacms/volto-listing-block/messages'; import alignLeftSVG from '@plone/volto/icons/align-left.svg'; import alignCenterSVG from '@plone/volto/icons/align-center.svg'; @@ -10,73 +11,21 @@ const ALIGN_VALUE_MAP = [ ['', clearSVG], ]; -const messages = defineMessages({ - styling: { - id: 'Styling', - defaultMessage: 'Styling', - }, - - Type: { - id: 'Listing', - defaultMessage: 'Listing', - }, - Theme: { - id: 'Theme', - defaultMessage: 'Theme', - }, - ThemeHelp: { - id: 'Theme', - defaultMessage: 'Theme', - }, - ThemeDefault: { - id: 'Default', - defaultMessage: 'Default', - }, - ThemePrimary: { - id: 'Primary', - defaultMessage: 'Primary', - }, - ThemeSecondary: { - id: 'Secondary', - defaultMessage: 'Secondary', - }, - ThemeTertiary: { - id: 'Tertiary', - defaultMessage: 'Tertiary', - }, - Rounded: { - id: 'Rounded', - defaultMessage: 'Rounded', - }, - RoundedHelp: { - id: 'Rounded Image', - defaultMessage: 'Rounded Image', - }, - Inverted: { - id: 'Inverted', - defaultMessage: 'Inverted', - }, - InvertedHelp: { - id: 'InvertedHelp', - defaultMessage: 'Inverted theme', - }, -}); - export const ListingStylingSchemaEnhancer = ({ schema }) => { return schema; }; -export const BasicListingBlockStylesSchema = ({ schema, intl }) => { - // return schema; - schema.fieldsets[0].fields.push( +export const BasicListingBlockStylesSchema = ({ intl, formData }) => { + const styleSchema = defaultStyleSchema({ intl, formData }); + styleSchema.fieldsets[0].fields.push( 'theme', 'text_align', // 'rounded', // 'inverted', ); - schema.properties = { - ...schema.properties, + styleSchema.properties = { + ...styleSchema.properties, theme: { title: intl.formatMessage(messages.Theme), description: intl.formatMessage(messages.ThemeHelp), @@ -92,11 +41,6 @@ export const BasicListingBlockStylesSchema = ({ schema, intl }) => { widget: 'style_text_align', actions: ALIGN_VALUE_MAP, }, - // inverted: { - // title: intl.formatMessage(messages.Inverted), - // description: intl.formatMessage(messages.InvertedHelp), - // type: 'boolean', - // }, // rounded: { // title: intl.formatMessage(messages.Rounded), // description: intl.formatMessage(messages.RoundedHelp), @@ -104,5 +48,5 @@ export const BasicListingBlockStylesSchema = ({ schema, intl }) => { // }, }; - return schema; + return styleSchema; }; diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx index d1250c35..f95db8d7 100644 --- a/src/blocks/Listing/templates/Summary.jsx +++ b/src/blocks/Listing/templates/Summary.jsx @@ -1,11 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import moment from 'moment'; // TODO: this needs to be lazyloaded!!! + import { ConditionalLink } from '@plone/volto/components'; import UniversalItem from '@eeacms/volto-listing-block/components/UniversalItem/UniversalItem'; import { flattenToAppURL } from '@plone/volto/helpers'; import { isInternalURL } from '@plone/volto/helpers/Url/Url'; import config from '@plone/volto/registry'; -import moment from 'moment'; -import PropTypes from 'prop-types'; -import React from 'react'; +import messages from '@eeacms/volto-listing-block/messages'; const SummaryListing = (props) => { const { block, items, linkTitle, linkHref, isEditMode } = props; @@ -43,8 +45,18 @@ const SummaryListing = (props) => { SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer; -SummaryListing.styleSchemaEnhancer = ({ schema }) => { - console.log('style', schema); +SummaryListing.styleSchemaEnhancer = ({ schema, intl }) => { + const styleSchema = schema.properties.styles.schema; + styleSchema.fieldsets[0].fields.push('inverted'); + styleSchema.properties = { + ...styleSchema.properties, + inverted: { + title: intl.formatMessage(messages.Inverted), + description: intl.formatMessage(messages.InvertedHelp), + type: 'boolean', + }, + }; + return schema; }; diff --git a/src/schema-utils.js b/src/schema-utils.js index 610c06e6..2c407c6f 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -2,7 +2,6 @@ import { cloneDeep } from 'lodash'; import config from '@plone/volto/registry'; import { defineMessages } from 'react-intl'; -import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema'; const addTypeSelect = ({ intl, schema, extensionName, messages }) => { const field = '@type'; @@ -70,6 +69,8 @@ const addStylesField = ({ schema, intl, formData }) => { // We omit the first step in ladder because of bugs in Volto < 16.0.0-alpha.36 // In later versions we won't have to redefine the styles field + const defaultStyleSchema = config.blocks.blocksConfig.listing.stylesSchema; + if (schema.properties.styles) return schema; schema.fieldsets.push({ @@ -81,7 +82,7 @@ const addStylesField = ({ schema, intl, formData }) => { schema.properties.styles = { widget: 'object', title: intl.formatMessage(messages.styling), - schema: defaultStyleSchema({ formData, intl }), + schema: defaultStyleSchema({ formData, intl, schema }), }; return schema; @@ -98,13 +99,15 @@ export const enhanceStylingSchema = ({ // first, enhance styling schema based on the variation // then, enhance it based on the `${extensionName}` - // TODO: use resolveExtensions() from Volto const blockConfig = config.blocks.blocksConfig[blockType]; - const activeVariation = + const activeVariationId = formData['variation'] || - blockConfig.variations?.find(({ isDefault }) => isDefault) || - {}; + blockConfig.variations?.find(({ isDefault }) => isDefault)?.id; + // TODO: use resolveExtensions() from Volto + const activeVariation = activeVariationId + ? blockConfig.variations.find(({ id }) => id === activeVariationId) + : {}; // TODO: not needed when we will use latest Volto const variationStyleSchema = activeVariation?.stylesSchema; From 3dd7bbee2a70eeb71f9618b7a43618bd237bd17a Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Mon, 26 Sep 2022 21:22:20 +0300 Subject: [PATCH 09/14] Add missing file --- src/blocks/Listing/schema.js | 12 +------- src/messages.js | 54 ++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 src/messages.js diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index bfe57256..094138b3 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -17,12 +17,7 @@ export const ListingStylingSchemaEnhancer = ({ schema }) => { export const BasicListingBlockStylesSchema = ({ intl, formData }) => { const styleSchema = defaultStyleSchema({ intl, formData }); - styleSchema.fieldsets[0].fields.push( - 'theme', - 'text_align', - // 'rounded', - // 'inverted', - ); + styleSchema.fieldsets[0].fields.push('theme', 'text_align'); styleSchema.properties = { ...styleSchema.properties, @@ -41,11 +36,6 @@ export const BasicListingBlockStylesSchema = ({ intl, formData }) => { widget: 'style_text_align', actions: ALIGN_VALUE_MAP, }, - // rounded: { - // title: intl.formatMessage(messages.Rounded), - // description: intl.formatMessage(messages.RoundedHelp), - // type: 'boolean', - // }, }; return styleSchema; diff --git a/src/messages.js b/src/messages.js new file mode 100644 index 00000000..6119d914 --- /dev/null +++ b/src/messages.js @@ -0,0 +1,54 @@ +import { defineMessages } from 'react-intl'; + +const messages = defineMessages({ + styling: { + id: 'Styling', + defaultMessage: 'Styling', + }, + Type: { + id: 'Listing', + defaultMessage: 'Listing', + }, + Theme: { + id: 'Theme', + defaultMessage: 'Theme', + }, + ThemeHelp: { + id: 'Theme', + defaultMessage: 'Theme', + }, + ThemeDefault: { + id: 'Default', + defaultMessage: 'Default', + }, + ThemePrimary: { + id: 'Primary', + defaultMessage: 'Primary', + }, + ThemeSecondary: { + id: 'Secondary', + defaultMessage: 'Secondary', + }, + ThemeTertiary: { + id: 'Tertiary', + defaultMessage: 'Tertiary', + }, + Rounded: { + id: 'Rounded', + defaultMessage: 'Rounded', + }, + RoundedHelp: { + id: 'Rounded Image', + defaultMessage: 'Rounded Image', + }, + Inverted: { + id: 'Inverted', + defaultMessage: 'Inverted', + }, + InvertedHelp: { + id: 'InvertedHelp', + defaultMessage: 'Inverted theme', + }, +}); + +export default messages; From d6a226fa2b68e141e3a67c65c1fa54ba8939384c Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Mon, 26 Sep 2022 21:29:30 +0300 Subject: [PATCH 10/14] Plug into cards --- src/blocks/Listing/templates/CardsCarousel.jsx | 14 ++++++++++++++ src/components/UniversalCard/schema.js | 18 ++++++++++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/src/blocks/Listing/templates/CardsCarousel.jsx b/src/blocks/Listing/templates/CardsCarousel.jsx index f5dee25a..cc388f80 100644 --- a/src/blocks/Listing/templates/CardsCarousel.jsx +++ b/src/blocks/Listing/templates/CardsCarousel.jsx @@ -145,4 +145,18 @@ CardsCarousel.schemaEnhancer = (args) => { }; }; +CardsCarousel.styleSchemaEnhancer = ({ schema, intl }) => { + const styleSchema = schema.properties.styles.schema; + styleSchema.fieldsets[0].fields.push('oblique'); + styleSchema.properties = { + ...styleSchema.properties, + oblique: { + title: 'Oblique', + type: 'boolean', + }, + }; + + return schema; +}; + export default CardsCarousel; diff --git a/src/components/UniversalCard/schema.js b/src/components/UniversalCard/schema.js index 72c25b26..4835fd12 100644 --- a/src/components/UniversalCard/schema.js +++ b/src/components/UniversalCard/schema.js @@ -1,5 +1,8 @@ import { defineMessages } from 'react-intl'; -import { schemaEnhancerFactory } from '@eeacms/volto-listing-block/schema-utils'; +import { + schemaEnhancerFactory, + enhanceStylingSchema, +} from '@eeacms/volto-listing-block/schema-utils'; const messages = defineMessages({ title: { @@ -113,8 +116,10 @@ export default function universalCardSchemaEnhancer(props) { const enhancer = schemaEnhancerFactory({ extensionName: 'cardTemplates', messages, + blockType: 'listing', + extensionField: '@type', }); - return { + const baseSchema = { ...schema, fieldsets: [ ...schema.fieldsets, @@ -136,4 +141,13 @@ export default function universalCardSchemaEnhancer(props) { }, }, }; + + const styledSchema = enhanceStylingSchema({ + ...props, + schema: baseSchema, + // schema: baseSchema.properties.styles.schema, + formData: props.formData, + }); + + return styledSchema; } From eb6da1b542ceeb864389872938e1aab62fedd8e3 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 22:00:09 +0300 Subject: [PATCH 11/14] change(styles): filter align widget from volto styling within basic listing block schema --- src/blocks/Listing/schema.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index 094138b3..d2b10155 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -19,6 +19,10 @@ export const BasicListingBlockStylesSchema = ({ intl, formData }) => { const styleSchema = defaultStyleSchema({ intl, formData }); styleSchema.fieldsets[0].fields.push('theme', 'text_align'); + styleSchema.fieldsets[0].fields = styleSchema.fieldsets[0].fields.filter( + (val) => val !== 'align', + ); + styleSchema.properties = { ...styleSchema.properties, theme: { From b1c78d0566763c55ebcf99ea295cabbf083b37f8 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 22:28:02 +0300 Subject: [PATCH 12/14] fix(styles): has classes should only set variables not css properties --- src/less/listing-cards.less | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index cfb3d680..b2c6ed7f 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -97,6 +97,7 @@ each(range(5), { } // listing theme styling alongside inverse options + .listing .listing-item .ui.image { width: var(--image-width, auto); height: var(--image-height, auto); @@ -112,22 +113,20 @@ each(range(5), { --image-height: 176px !important; --border-radius: 50%; } + .has--theme--primary { --text-color: var(--text-color--primary, #fff); - background-color: var(--background-color, @primaryColor); - color: var(--text-color, #fff); + --bg-color: var(--background-color, @primaryColor); } .has--theme--secondary { --text-color: var(--text-color--secondary, #fff); - background-color: var(--background-color, @secondaryColor); - color: var(--text-color--secondary, #fff); + --bg-color: var(--background-color, @secondaryColor); } .has--theme--tertiary { --text-color: var(--text-color--tertiary, #fff); - background-color: var(--background-color, @tertiaryColor); - color: var(--text-color); + --bg-color: var(--background-color, @tertiaryColor); } .has--inverted--:not(.has--theme--) { @@ -143,6 +142,10 @@ each(range(5), { --background-color: #fff; } +.listing { + color: var(--text-color, @tertiaryColor); + background-color: var(--bg-color, #FFF); +} .image.left { margin-right: 24px; } From c7202f4abe497f62ab357d988770f5125e53f866 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 22:29:34 +0300 Subject: [PATCH 13/14] lint fixes --- src/less/listing-cards.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index b2c6ed7f..9dae9ca0 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -75,7 +75,6 @@ each(range(5), { border-bottom: 1px solid #bcbec0; margin-bottom: 32px; - .slot-head, .listing-header { margin-bottom: 8px; @@ -143,16 +142,17 @@ each(range(5), { } .listing { + background-color: var(--bg-color, #fff); color: var(--text-color, @tertiaryColor); - background-color: var(--bg-color, #FFF); } + .image.left { margin-right: 24px; } .image.right { - margin-left: 24px; margin-right: 0; + margin-left: 24px; } .u-item.listing-item { From ef39bc128e0673478674c3fe7c8e3436bc199722 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 26 Sep 2022 22:38:28 +0300 Subject: [PATCH 14/14] update package to a newer version of volto --- Jenkinsfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jenkinsfile b/Jenkinsfile index b7572df4..cfd047dc 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -6,7 +6,7 @@ pipeline { NAMESPACE = "@eeacms" SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu" DEPENDENCIES = "" - VOLTO = "16.0.0-alpha.14" + VOLTO = "16.0.0-alpha.36" } stages {