design-comuni-plone-theme 11.1.0 → 11.1.3

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 
 
+## [11.1.3](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.1.1...v11.1.3) (2023-12-27)
+
+
+### Bug Fixes
+
+* listing options order ([#449](https://github.com/redturtle/design-comuni-plone-theme/issues/449)) ([226c67e](https://github.com/redturtle/design-comuni-plone-theme/commit/226c67ee53d2d982b33ad214458b82ec892ddd2b))
+* restored old mixin to avoid compulsory update of all subsites ([#450](https://github.com/redturtle/design-comuni-plone-theme/issues/450)) ([99fe070](https://github.com/redturtle/design-comuni-plone-theme/commit/99fe070a381e7c459e1a53e84b25cb8792219c56))
+
+
+### Documentation
+
+* updated publiccode ([0abde1f](https://github.com/redturtle/design-comuni-plone-theme/commit/0abde1f6cb9182e8595000eee193e4fa05ddf1e6))
+
+
+### Maintenance
+
+* release 11.1.2 ([08b3f2e](https://github.com/redturtle/design-comuni-plone-theme/commit/08b3f2e03aba8a76d8e5b7db68fa3575492548c2))
+
+## [11.1.1](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.1.0...v11.1.1) (2023-12-22)
+
+
+### Bug Fixes
+
+* image sizes too small ([b83e3da](https://github.com/redturtle/design-comuni-plone-theme/commit/b83e3da3dffdac76ec8b67f9b9333d840e380762))
+* recurrence widget ([#445](https://github.com/redturtle/design-comuni-plone-theme/issues/445)) ([201a3ac](https://github.com/redturtle/design-comuni-plone-theme/commit/201a3acf5934ff727bcef9053e46c478e339b8f1))
+
+
+### Maintenance
+
+* update customizations ([bf8c37f](https://github.com/redturtle/design-comuni-plone-theme/commit/bf8c37fec68811eab25c7777f04320be1bee046a))
+
+
+### Documentation
+
+* updated publiccode ([5f7a4eb](https://github.com/redturtle/design-comuni-plone-theme/commit/5f7a4eb48a26f96a6653f7cd755ac486782277f8))
+
 ## [11.1.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.0.2...v11.1.0) (2023-12-20)
 
 

package/RELEASE.md

@@ -41,6 +41,12 @@
 - ...
 -->
 
+## Versione 11.1.1 (22/12/2023)
+
+### Fix
+
+- Risolto un problema con la dimensione delle immagini, che risultava in alcuni casi troppo piccola causando immagini sgranate
+
 ## Versione 11.0.1 (19/12/2023)
 
 ### Fix

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.1.0",
+  "version": "11.1.3",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2023-12-20'
+releaseDate: '2023-12-27'
 softwareType: standalone/web
-softwareVersion: 11.1.0
+softwareVersion: 11.1.2
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -8,25 +8,27 @@ const ListingImage = ({
   showDefault = false,
   className = 'listing-image',
   responsive = true,
-  sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:768px) 400px, 300px',
+  sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
   ...imageProps
 }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
   // photogallery needs to check for null image
   // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-  const image = Image({ 
-    item, 
-    'aria-hidden': true, 
-    alt: '', 
-    role: 'presentation', 
-    className, 
-    loading, 
-    title: item.title, 
-    responsive, 
-    sizes, 
-    ...imageProps });
+  const image = Image({
+    item,
+    'aria-hidden': true,
+    alt: '',
+    role: 'presentation',
+    className,
+    loading,
+    title: item.title,
+    responsive,
+    sizes,
+    ...imageProps,
+  });
 
-  if (image === null) return showDefault ? <img src={DefaultImageSVG} alt="" /> : null;
+  if (image === null)
+    return showDefault ? <img src={DefaultImageSVG} alt="" /> : null;
 
   return image;
 };

package/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx

@@ -65,7 +65,12 @@ const ContentInEvidenceTemplate = (props) => {
           const date = getCalendarDate(item, rrule.rrulestr);
           const eventRecurrenceMore = getEventRecurrenceMore(item, isEditMode);
           const listingText = <ListingText item={item} />;
-          const image = ListingImage({ item, className: 'item-image' });
+          const image = ListingImage({
+            item,
+            className: 'item-image',
+            loading: 'eager',
+            sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
+          });
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({
             name: 'BlockExtraTags',

package/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx

@@ -165,7 +165,18 @@ const PhotogalleryTemplate = ({
           <div className="it-carousel-all it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
-                const image = ListingImage({ item });
+                const image = ListingImage({
+                  item,
+                  sizes: `(max-width:600px) 450px, (max-width:1024px) ${
+                    items.length < 2 ? '1000' : '500'
+                  }px, ${
+                    items.length === 1
+                      ? '1300'
+                      : items.length === 2
+                        ? '650'
+                        : '450'
+                  }px`,
+                });
                 return (
                   <div
                     className={cx('it-single-slide-wrapper', {

package/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx

@@ -353,7 +353,7 @@ const SliderTemplate = ({
                 const image = ListingImage({
                   item,
                   loading: index === 0 ? 'eager' : 'lazy',
-                  sizes: `max-width(980px) 600px, ${1200 / nSlidesToShow}px`,
+                  sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
                   critical: true,
                 });
                 return (

package/src/components/ItaliaTheme/Blocks/Listing/SmallBlockLinksTemplate.jsx

@@ -38,7 +38,11 @@ const SmallBlockLinksTemplate = ({
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({ item, sizes: '200px', style: {} });
+            const image = ListingImage({
+              item,
+              sizes: '(max-width:575px) 520px, 200px',
+              style: {},
+            });
 
             return (
               <Col

package/src/components/ItaliaTheme/Cards/CardPersona.jsx

@@ -22,8 +22,7 @@ export const CardPersona = ({
 }) => {
   const image = ListingImage({
     item,
-    maxSize: 300,
-    useOriginal: false,
+    sizes: '130px',
   });
 
   const hasImage = image !== null && showImage;

package/src/config/Blocks/ListingOptions/bandiInEvidenceTemplate.js

@@ -17,7 +17,7 @@ export const addBandiInEvidenceTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/cardWithImageTemplate.js

@@ -30,7 +30,7 @@ export const addCardWithImageTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/cardWithSlideUpTextTemplate.js

@@ -9,7 +9,7 @@ export const addCardWithSlideUpTextTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/completeBlockLinksTemplate.js

@@ -9,7 +9,7 @@ export const addCompleteBlockLinksTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/defaultOptions.js

@@ -31,7 +31,7 @@ const messages = defineMessages({
 
 /** DEFAULT **/
 
-const addDefaultOptions = (schema, formData = {}, intl, position = 0) => {
+const addDefaultOptions = (schema, formData = {}, intl, position = 1) => {
   let listing_items_colors =
     config.blocks.blocksConfig.listing?.listing_items_colors || [];
   let listing_bg_colors =

package/src/config/Blocks/ListingOptions/inEvidenceTemplate.js

@@ -18,7 +18,7 @@ export const addInEvidenceTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/mapTemplate.js

@@ -25,7 +25,7 @@ const messages = defineMessages({
   },
 });
 
-export const addMapTemplateOptions = (schema, formData, intl, position = 0) => {
+export const addMapTemplateOptions = (schema, formData, intl, position = 1) => {
   let pos = position;
 
   addSchemaField(

package/src/config/Blocks/ListingOptions/photogalleryTemplate.js

@@ -12,7 +12,7 @@ export const addPhotogalleryTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/ribbonCardTemplate.js

@@ -18,7 +18,7 @@ export const addRibbonCardTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/simpleCardTemplate.js

@@ -36,7 +36,7 @@ export const addSimpleCardTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
   pos = addLighthouseField(schema, intl, pos);

package/src/config/Blocks/ListingOptions/simpleListTemplate.js

@@ -13,7 +13,7 @@ export const addSimpleListTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/sliderTemplate.js

@@ -37,7 +37,7 @@ export const addSliderTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/smallBlockLinksTemplate.js

@@ -14,7 +14,7 @@ export const addSmallBlockLinksTemplateOptions = (
   schema,
   formData,
   intl,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 

package/src/config/Blocks/ListingOptions/utils.js

@@ -67,7 +67,7 @@ export const addSchemaField = (
   title,
   description,
   properties = {},
-  position = 0,
+  position = 1,
   fieldset = 'default',
 ) => {
   let fieldsetIndex = schema.fieldsets.findIndex((x) => x.id === fieldset);
@@ -86,7 +86,7 @@ export const templatesOptions = (
   intl,
   fields,
   fieldsConfig,
-  position = 0,
+  position = 1,
 ) => {
   let pos = position;
 
@@ -151,7 +151,7 @@ export const templatesOptions = (
   return pos;
 };
 
-export const addLighthouseField = (schema, intl, position = 0) => {
+export const addLighthouseField = (schema, intl, position = 1) => {
   let pos = position;
   const fieldset =
     schema.id === 'search' ? 'listingTemplateOptions' : undefined;

package/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/EndField.jsx

@@ -0,0 +1,133 @@
+/**
+ * EndField component.
+ * @module components/manage/Widgets/RecurrenceWidget/EndField
+ *
+ *
+ *  * CUSTOMIZATIONS:
+ * - added customization to have this changes https://github.com/plone/volto/pull/5555/files
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Form, Grid, Input, Radio } from 'semantic-ui-react';
+import DatetimeWidget from '../DatetimeWidget';
+
+const messages = defineMessages({
+  recurrenceEnds: { id: 'Recurrence ends', defaultMessage: 'Ends' },
+  recurrenceEndsCount: { id: 'Recurrence ends after', defaultMessage: 'after' },
+  recurrenceEndsUntil: { id: 'Recurrence ends on', defaultMessage: 'on' },
+  occurrences: { id: 'Occurences', defaultMessage: 'occurrence(s)' },
+});
+/**
+ * EndField component class.
+ * @function EndField
+ * @returns {string} Markup of the component.
+ */
+const EndField = ({ value, count, until, onChange, intl }) => {
+  return (
+    <Form.Field inline className="text">
+      <Grid>
+        <Grid.Row stretched>
+          <Grid.Column width="4">
+            <div className="wrapper">
+              <label htmlFor="recurrenceEnds">
+                {intl.formatMessage(messages.recurrenceEnds)}
+              </label>
+            </div>
+          </Grid.Column>
+          <Grid.Column width="8">
+            <Form.Group inline>
+              <Form.Field>
+                <Radio
+                  label=""
+                  name="recurrenceEnds"
+                  id="recurrenceEndsCount"
+                  value="count"
+                  checked={value === 'count'}
+                  onChange={(e, { value }) => onChange('recurrenceEnds', value)}
+                />
+              </Form.Field>
+              <Form.Field disabled={value !== 'count'}>
+                {intl.formatMessage(messages.recurrenceEndsCount)}
+              </Form.Field>
+              <Form.Field disabled={value !== 'count'}>
+                <Input
+                  id="count"
+                  name="count"
+                  value={count || ''}
+                  onChange={({ target }) => {
+                    onChange(
+                      target.id,
+                      target.value === '' ? undefined : target.value,
+                    );
+                  }}
+                />
+              </Form.Field>
+              <Form.Field disabled={value !== 'count'}>
+                {intl.formatMessage(messages.occurrences)}
+              </Form.Field>
+            </Form.Group>
+            <Form.Group inline>
+              <Form.Field>
+                <Radio
+                  id="recurrenceEndsUntil"
+                  label=""
+                  name="recurrenceEnds"
+                  value="until"
+                  checked={value === 'until'}
+                  onChange={(e, { value }) => onChange('recurrenceEnds', value)}
+                />
+              </Form.Field>
+
+              <Form.Field disabled={value !== 'until'}>
+                <DatetimeWidget
+                  id="until"
+                  title={intl.formatMessage(messages.recurrenceEndsUntil)}
+                  dateOnly={true}
+                  value={
+                    until
+                      ? typeof until === 'string'
+                        ? until
+                        : until?.toISOString()
+                      : ''
+                  }
+                  resettable={false}
+                  onChange={(id, value) => {
+                    onChange(id, value === '' ? undefined : value);
+                  }}
+                />
+              </Form.Field>
+            </Form.Group>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Form.Field>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+EndField.propTypes = {
+  value: PropTypes.string,
+  count: PropTypes.any,
+  until: PropTypes.any,
+  onChange: PropTypes.func,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+EndField.defaultProps = {
+  value: null,
+  count: null,
+  until: null,
+  onChange: null,
+};
+
+export default injectIntl(EndField);

package/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -4,6 +4,7 @@
  * CUSTOMIZATIONS:
  * - add date field open calendar on top
  * - fix all imports and rrulei18n use
+ * - added customization to have this changes https://github.com/plone/volto/pull/5555/files
  */
 
 import React, { Component } from 'react';
@@ -216,26 +217,41 @@ class RecurrenceWidget extends Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.value) {
-      if (prevProps.formData?.start !== this.props.formData?.start) {
-        let start = this.getUTCDate(this.props.formData?.start)
-          .startOf('day')
-          .toDate();
-
-        this.setState((prevState) => {
-          let rruleSet = prevState.rruleSet;
-
-          rruleSet = this.updateRruleSet(
-            rruleSet,
-            prevState.formValues,
-            'dtstart',
-            start,
-          );
-
-          return {
-            ...prevState,
-            rruleSet,
-          };
-        });
+      const changedStart =
+        prevProps.formData?.start !== this.props.formData?.start;
+      const changedEnd = prevProps.formData?.end !== this.props.formData?.end;
+
+      if (changedStart || changedEnd) {
+        let start = this.getUTCDate(this.props.formData?.start).toDate();
+        // let end = this.getUTCDate(this.props.formData?.end).toDate();
+
+        let changeFormValues = {};
+        if (changedEnd) {
+          changeFormValues.until = this.getUTCDate(
+            this.props.formData?.end,
+          ).toDate();
+        }
+        this.setState(
+          (prevState) => {
+            let rruleSet = prevState.rruleSet;
+
+            rruleSet = this.updateRruleSet(
+              rruleSet,
+              { ...prevState.formValues, ...changeFormValues },
+              'dtstart',
+              start,
+            );
+
+            return {
+              ...prevState,
+              rruleSet,
+            };
+          },
+          () => {
+            //then, after set state, set recurrence rrule value
+            this.saveRrule();
+          },
+        );
       }
     }
   }
@@ -247,7 +263,7 @@ class RecurrenceWidget extends Component {
   setRecurrenceStartEnd = () => {
     const start = this.props.formData?.start;
 
-    let _start = this.getUTCDate(start).startOf('day').toDate();
+    const _start = new Date(start); //The date is already in utc from plone, so this is not necessary: this.getUTCDate(start).startOf('day').toDate();
 
     this.setState((prevState) => {
       let rruleSet = prevState.rruleSet;
@@ -336,7 +352,7 @@ class RecurrenceWidget extends Component {
           case 'until':
             if (value != null) {
               formValues['recurrenceEnds'] = option;
-              formValues[option] = toISOString(value);
+              formValues[option] = value;
             }
             break;
           case 'byweekday':
@@ -419,7 +435,24 @@ class RecurrenceWidget extends Component {
           }
           break;
         case 'until':
-          value = value ? moment(new Date(value)).utc().toDate() : null;
+          let mDate = null;
+          if (value) {
+            mDate = this.moment(new Date(value));
+            if (typeof value === 'string') {
+              mDate = this.moment(new Date(value));
+            } else {
+              //object-->Date()
+              mDate = this.moment(value);
+            }
+
+            if (this.props.formData.end) {
+              //set time from formData.end
+              const mEnd = this.moment(new Date(this.props.formData.end));
+              mDate.set('hour', mEnd.get('hour'));
+              mDate.set('minute', mEnd.get('minute'));
+            }
+          }
+          value = value ? mDate.toDate() : null;
           break;
         default:
           break;
@@ -443,8 +476,8 @@ class RecurrenceWidget extends Component {
       field === 'dtstart'
         ? value
         : rruleSet.dtstart()
-          ? rruleSet.dtstart()
-          : moment().utc().toDate();
+        ? rruleSet.dtstart()
+        : new Date();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -465,12 +498,12 @@ class RecurrenceWidget extends Component {
 
   getDefaultUntil = (freq) => {
     var end = this.props.formData?.end
-      ? toISOString(this.getUTCDate(this.props.formData.end).toDate())
+      ? moment(new Date(this.props.formData.end))
       : null;
-    var tomorrow = toISOString(moment().add(1, 'days').utc().toDate());
-    var nextWeek = toISOString(moment().add(7, 'days').utc().toDate());
-    var nextMonth = toISOString(moment().add(1, 'months').utc().toDate());
-    var nextYear = toISOString(moment().add(1, 'years').utc().toDate());
+    var tomorrow = moment().add(1, 'days');
+    var nextWeek = moment().add(7, 'days');
+    var nextMonth = moment().add(1, 'months');
+    var nextYear = moment().add(1, 'years');
 
     var until = end;
     switch (freq) {
@@ -495,6 +528,19 @@ class RecurrenceWidget extends Component {
       default:
         break;
     }
+    if (this.props.formData.end) {
+      //set default end time
+      until.set('hour', end.get('hour'));
+      until.set('minute', end.get('minute'));
+    }
+
+    until = new Date(
+      until.get('year'),
+      until.get('month'),
+      until.get('date'),
+      until.get('hour'),
+      until.get('minute'),
+    );
 
     return until;
   };
@@ -708,9 +754,13 @@ class RecurrenceWidget extends Component {
     }
   };
 
-  save = () => {
+  saveRrule = () => {
     var value = this.state.rruleSet.toString();
     this.props.onChange(this.props.id, value);
+  };
+
+  save = () => {
+    this.saveRrule();
     this.close();
   };