updated basic schema with extra fields and customized cards to use th…

…e cards enhancer
eea · Sep 27, 2022 · 373de14 · 373de14
1 parent 8f2feb7
commit 373de14
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 33 deletions.
diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js
@@ -15,7 +15,7 @@ import { SearchItemLayout } from './SearchItemTemplate';
 
 import { BasicListingBlockStylesSchema } from './schema';
 
-// import { ListingStylingSchemaEnhancer } from './schema';
+import { CardStylingSchemaEnhancer } from './schema';
 
 const applyConfig = (config) => {
   // moment date locale. See https://momentjs.com/ - Multiple Locale Support
@@ -69,6 +69,7 @@ const applyConfig = (config) => {
       title: 'Cards gallery',
       template: CardsGallery,
       schemaEnhancer: CardsGallery.schemaEnhancer,
+      stylesSchema: CardStylingSchemaEnhancer,
     },
     {
       id: 'customNewsListVariationId',
@@ -123,7 +124,7 @@ const applyConfig = (config) => {
 
   // Theming
   // This bug needs to be fixed first: https://github.com/plone/volto/issues/3675
-  // listing.enableStyling = true;
+  listing.enableStyling = true;
 
   return config;
 };

diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
@@ -5,23 +5,34 @@ import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
-const ALIGN_VALUE_MAP = [
+export const ALIGN_VALUE_MAP = [
   ['align_left', alignLeftSVG],
   ['align_center', alignCenterSVG],
   ['', clearSVG],
 ];
 
-export const ListingStylingSchemaEnhancer = ({ schema }) => {
+export const CardStylingSchemaEnhancer = ({ schema }) => {
+  const styleSchema = schema.properties.styles.schema;
+  styleSchema.fieldsets[0].fields.push('text_align');
+  styleSchema.properties = {
+    ...styleSchema.properties,
+    text_align: {
+      title: 'Text align',
+      widget: 'style_text_align',
+      actions: ALIGN_VALUE_MAP,
+    },
+  };
+
   return schema;
 };
 
 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.fieldsets[0].fields.push('theme', 'inverted', 'rounded');
 
   styleSchema.properties = {
     ...styleSchema.properties,
@@ -35,10 +46,15 @@ export const BasicListingBlockStylesSchema = ({ intl, formData }) => {
         ['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',
     },
   };
 

diff --git a/src/blocks/Listing/templates/CardsCarousel.jsx b/src/blocks/Listing/templates/CardsCarousel.jsx
@@ -4,6 +4,7 @@ import loadable from '@loadable/component';
 
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer';
+import { ALIGN_VALUE_MAP, CardStylingSchemaEnhancer } from '../schema';
 
 const Slider = loadable(() => import('react-slick'));
 
@@ -146,17 +147,8 @@ 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;
+  console.log('cards carousel schema', schema);
+  return CardStylingSchemaEnhancer({ schema });
 };
 
 export default CardsCarousel;
diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx
@@ -46,17 +46,6 @@ const SummaryListing = (props) => {
 SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer;
 
 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/blocks/Teaser/index.js b/src/blocks/Teaser/index.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import TeaserCardTemplate from './Card';
-import { ListingStylingSchemaEnhancer } from '../Listing/schema';
+import { CardStylingSchemaEnhancer } from '../Listing/schema';
 import { adjustTeaserSchema } from './schema';
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 
@@ -21,7 +21,7 @@ export default (config) => {
       },
     ];
     config.blocks.blocksConfig.teaser.enableStyling = true;
-    config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchemaEnhancer;
+    config.blocks.blocksConfig.teaser.stylesSchema = CardStylingSchemaEnhancer;
   }
 
   // Teaser Grid