design-comuni-plone-theme 8.7.11 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 
 
+## [8.8.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v8.7.12...v8.8.0) (2023-10-31)
+
+
+### Features
+
+* added id and title_it adttrs and handled h2 title_type in  Gallery component ([4d5949e](https://github.com/redturtle/design-comuni-plone-theme/commit/4d5949eb2393f442e6541637e89123153606279e))
+
+
+### Bug Fixes
+
+* fixed image url in Photogallery listing popup ([#383](https://github.com/redturtle/design-comuni-plone-theme/issues/383)) ([b8d2e20](https://github.com/redturtle/design-comuni-plone-theme/commit/b8d2e207cdefd018824229975ac0f5ac0bdb8d0c))
+
+
+### Maintenance
+
+* preparing release ([2e6d0a5](https://github.com/redturtle/design-comuni-plone-theme/commit/2e6d0a56ddd96ecbf48e68e03fcc3caf061ceb55))
+
+## [8.7.12](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.7.11...v8.7.12) (2023-10-27)
+
+
+### Bug Fixes
+
+* backport white header preset from child themes and fix header mobile ([#380](https://github.com/RedTurtle/design-comuni-plone-theme/issues/380)) ([60276ec](https://github.com/RedTurtle/design-comuni-plone-theme/commit/60276ecc3aa0dc51016f0bc8d1fad2e4a09ccd4e))
+* fixed conditions for rendering + fix title tag ([#371](https://github.com/RedTurtle/design-comuni-plone-theme/issues/371)) ([522774b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/522774bee6dafd21dc09beef2fbc5b70936b7944))
+* icon component for TextSizeButton in RichTextEditor ([#379](https://github.com/RedTurtle/design-comuni-plone-theme/issues/379)) ([d2160ce](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d2160ce95eb8c98f1221c690f019ec42c20c8fcd))
+* overlapping block chooser in small pages/screens ([#372](https://github.com/RedTurtle/design-comuni-plone-theme/issues/372)) ([3035ea2](https://github.com/RedTurtle/design-comuni-plone-theme/commit/3035ea2b2c1e7ddfa3968d3d685614cb3dda097d))
+* release-log class added ([#376](https://github.com/RedTurtle/design-comuni-plone-theme/issues/376)) ([92e5a68](https://github.com/RedTurtle/design-comuni-plone-theme/commit/92e5a680afd15bc25a8b8eb97ab96845f77e8294))
+* release-log text ([#377](https://github.com/RedTurtle/design-comuni-plone-theme/issues/377)) ([46a4d5f](https://github.com/RedTurtle/design-comuni-plone-theme/commit/46a4d5f174d9dedd6cf190466a88ade0d6746d68))
+
+
+### Documentation
+
+* updated publiccode and release log ([b1e9e81](https://github.com/RedTurtle/design-comuni-plone-theme/commit/b1e9e81c3506851e41b5f35d866353b579358edd))
+* updated publiccode and release log ([276ca06](https://github.com/RedTurtle/design-comuni-plone-theme/commit/276ca0605b13923f2941a9ec843ca7e04dce20a1))
+
 ## [8.7.11](https://github.com/redturtle/design-comuni-plone-theme/compare/v8.7.10...v8.7.11) (2023-10-23)
 
 

package/RELEASE.md

@@ -41,6 +41,15 @@
 - ...
 -->
 
+## Versione 8.7.12 (27/10/2023)
+
+### Fix
+
+- Migliorato il dimensionamento dell'icona del menù su dispositivi mobile
+- Sistemata dimensione logo e bottone di ricerca su dispositivi mobile
+- Migliorato il comportamento del menu laterale dei contenuti quando si aggiungono file nelle cartelle al loro interno
+- Sistemata sovrapposizione della finestra di selezione blocchi con l'header del sito per alcune dimensioni dello schermo
+
 ## Versione 8.7.10 (19/10/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": "8.7.11",
+  "version": "8.8.0",
   "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-10-23'
+releaseDate: '2023-10-31'
 softwareType: standalone/web
-softwareVersion: 8.7.11
+softwareVersion: 8.8.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

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

@@ -10,8 +10,6 @@ import {
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-
-import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import PropTypes from 'prop-types';
@@ -139,12 +137,14 @@ const PhotogalleryTemplate = ({
 
   const getCaption = (item) => item.description ?? item.rights ?? null;
 
-  const figure = (image, item) => (
-    <figure className="img-wrapper">
-      {image ? <>{image}</> : <img src={DefaultImageSVG} alt="" />}
-      {getCaption(item) && <figcaption>{getCaption(item)}</figcaption>}
-    </figure>
-  );
+  const figure = (image, item) => {
+    return (
+      <figure className="img-wrapper">
+        {image}
+        {getCaption(item) && <figcaption>{getCaption(item)}</figcaption>}
+      </figure>
+    );
+  };
 
   return (
     <div className="photogallery">

package/src/components/ItaliaTheme/GalleryPreview/GalleryPreview.jsx

@@ -3,7 +3,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 import PropTypes from 'prop-types';
-
 import { Modal, ModalBody, Button, ModalHeader } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
@@ -34,6 +33,10 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
   const intl = useIntl();
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
+  const checkUrlImage =
+    items[viewIndex]?.image?.scales?.larger?.download ||
+    items[viewIndex]?.image_scales?.image[0]?.scales?.larger?.download;
+
   const closeModal = () => {
     setViewIndex(null);
   };
@@ -92,11 +95,9 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
                 </Button>
               )}
               <div className="image">
-                {items[viewIndex].image ? (
+                {checkUrlImage ? (
                   <img
-                    src={flattenToAppURL(
-                      items[viewIndex].image.scales.larger.download,
-                    )}
+                    src={flattenToAppURL(checkUrlImage)}
                     loading="lazy"
                     alt={items[viewIndex].title}
                   />

package/src/components/ItaliaTheme/View/Commons/Attachments.jsx

@@ -104,17 +104,13 @@ const Attachments = ({
     <RichTextSection
       tag_id={article_id}
       className="it-page-section mb-5"
-      title={
-        title ? (
-          <h2 id={`header-${article_id}`}>{title}</h2>
-        ) : (
-          <h2 id={`header-${article_id}`}>
-            {intl.formatMessage(messages.attachments)}
-          </h2>
-        )
-      }
+      title={title ? title : intl.formatMessage(messages.attachments)}
     >
       {attachments.length > 0 && attachments_view}
+      {/** aggiunte conditions per attendere il render del componente mentre
+       * i risultati della query stanno ancora caricando
+       */}
+      {searchResults?.[key]?.loading && !searchResults?.[key]?.loaded && <></>}
     </RichTextSection>
   ) : (
     <div className="mb-5 mt-3">

package/src/components/ItaliaTheme/View/Commons/Gallery.jsx

@@ -36,8 +36,10 @@ const messages = defineMessages({
 const Gallery = ({
   content,
   folder_name,
+  id = '',
   title,
   title_type = 'h4',
+  title_id = 'galleria',
   title_video,
   className = '',
   reactSlick,
@@ -121,12 +123,23 @@ const Gallery = ({
       {images?.length > 0 ? (
         <div
           className={`it-carousel-wrapper it-carousel-landscape-abstract-three-cols ${className}`}
+          id={id}
         >
           <div className="slider-container">
             <div className="it-header-block">
               <div className="it-header-block-title">
-                {title_type === 'h4' && <h4 id="galleria">{gallery_title}</h4>}
-                {title_type === 'h5' && <h5 id="galleria">{gallery_title}</h5>}
+                {title_type === 'h2' && (
+                  <h2 id={title_id} className="mb-3 h4">
+                    {gallery_title}
+                  </h2>
+                )}
+                {title_type === 'h3' && (
+                  <h3 id={title_id} className="h5">
+                    {gallery_title}
+                  </h3>
+                )}
+                {title_type === 'h4' && <h4 id={title_id}>{gallery_title}</h4>}
+                {title_type === 'h5' && <h5 id={title_id}>{gallery_title}</h5>}
               </div>
             </div>
             <div className="it-carousel-all it-card-bg">

package/src/components/ReleaseLog/ReleaseLog.css

@@ -1,4 +1,4 @@
-h2 {
+.release-log h2 {
   border-top: 1px solid grey;
   font-weight: 600 !important;
 }

package/src/components/ReleaseLog/ReleaseLog.jsx

@@ -100,7 +100,7 @@ const ReleaseLog = () => {
       <Helmet>
         <meta name="robots" content="noindex" />
       </Helmet>
-      <Container className="px-4 my-4">
+      <Container className="px-4 my-4 release-log">
         <h1>Lista degli aggiornamenti</h1>
         <Nav tabs className="mb-3">
           {LOGS_TO_VIEW.filter((log) => log.file != null).map((log) => (
@@ -126,11 +126,11 @@ const ReleaseLog = () => {
               <div
                 dangerouslySetInnerHTML={{
                   __html:
-                    log.name === 'io-comune' ? (
+                    log.name === 'io-Comune' ? (
                       logDCPT
-                    ) : log.name == 'io-cittadino' ? (
+                    ) : log.name == 'io-Cittadino' ? (
                       logIoCittadino
-                    ) : log.name == 'io-prenoto' ? (
+                    ) : log.name == 'io-Prenoto' ? (
                       logIoPrenoto
                     ) : (
                       <div></div>

package/src/config/RichTextEditor/ToolbarButtons/TextSizeButton.jsx

@@ -59,7 +59,7 @@ const TextSizeButton = (props) => {
   const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
   return createInlineStyleButton({
     style: 'TEXT_LARGER',
-    children: ButtonIcon,
+    children: <ButtonIcon />,
   });
 };
 export default TextSizeButton;

package/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx

@@ -0,0 +1,157 @@
+/* CUSTOMIZATIONS
+- zindex for handling overlapping in small pages
+*/
+
+import React from 'react';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import addSVG from '@plone/volto/icons/circle-plus.svg';
+import { blockHasValue } from '@plone/volto/helpers';
+import { Icon, BlockChooser } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import { Button, Ref } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { usePopper } from 'react-popper';
+import { Portal } from 'react-portal';
+
+const messages = defineMessages({
+  addBlock: {
+    id: 'Add block',
+    defaultMessage: 'Add block',
+  },
+});
+
+export const ButtonComponent = (props) => {
+  const intl = useIntl();
+  const {
+    className = `block-add-button${
+      config.experimental.addBlockButton.enabled ? ' new-add-block' : ''
+    }`,
+    size = '19px',
+    onShowBlockChooser,
+  } = props;
+
+  return (
+    <Button
+      icon
+      basic
+      title={intl.formatMessage(messages.addBlock)}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onShowBlockChooser();
+      }}
+      className={className}
+    >
+      <Icon name={addSVG} className={className} size={size} />
+    </Button>
+  );
+};
+
+const BlockChooserButton = (props) => {
+  const {
+    block,
+    allowedBlocks,
+    showRestricted,
+    data,
+    onMutateBlock,
+    onInsertBlock,
+    blocksConfig,
+    buttonComponent,
+    properties,
+  } = props;
+  const { disableNewBlocks } = data;
+  const [addNewBlockOpened, setAddNewBlockOpened] = React.useState(false);
+
+  const blockChooserRef = React.useRef();
+
+  const handleClickOutside = React.useCallback((e) => {
+    if (
+      blockChooserRef.current &&
+      doesNodeContainClick(blockChooserRef.current, e)
+    )
+      return;
+    setAddNewBlockOpened(false);
+  }, []);
+
+  const Component = buttonComponent || ButtonComponent;
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside, false);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  }, [handleClickOutside]);
+
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: config.experimental.addBlockButton.enabled
+      ? 'bottom'
+      : 'right-start',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 5],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['right-end', 'top-start'],
+        },
+      },
+    ],
+  });
+
+  return (
+    <>
+      {!disableNewBlocks &&
+        (config.experimental.addBlockButton.enabled ||
+          !blockHasValue(data)) && (
+          <Ref innerRef={setReferenceElement}>
+            <Component
+              {...props}
+              onShowBlockChooser={() => setAddNewBlockOpened(true)}
+            />
+          </Ref>
+        )}
+      {addNewBlockOpened && (
+        <Portal node={document.getElementById('body')}>
+          <div
+            ref={setPopperElement}
+            style={{ ...styles.popper, zIndex: 1000 }}
+            {...attributes.popper}
+          >
+            <BlockChooser
+              onMutateBlock={
+                onMutateBlock
+                  ? (id, value) => {
+                      setAddNewBlockOpened(false);
+                      onMutateBlock(id, value);
+                    }
+                  : null
+              }
+              onInsertBlock={
+                onInsertBlock
+                  ? (id, value) => {
+                      setAddNewBlockOpened(false);
+                      onInsertBlock(id, value);
+                    }
+                  : null
+              }
+              currentBlock={block}
+              allowedBlocks={allowedBlocks}
+              blocksConfig={blocksConfig}
+              properties={properties}
+              showRestricted={showRestricted}
+              ref={blockChooserRef}
+            />
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default BlockChooserButton;

package/src/theme/ItaliaTheme/Views/_common.scss

@@ -294,6 +294,11 @@ div.sticky-wrapper {
   }
 }
 
+#view .it-carousel-wrapper .it-header-block .it-header-block-title h2.h4 {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
 form.ui.form.vertical-form fieldset.invisible {
   min-width: 0;
 }

package/src/theme/ItaliaTheme/_main.scss

@@ -55,10 +55,6 @@ a {
   color: $secondary-text !important;
 }
 
-button.custom-navbar-toggler svg.icon {
-  fill: $secondary-text;
-}
-
 ::selection {
   background-color: default;
 }

package/src/theme/ItaliaTheme/_white-header.scss

@@ -0,0 +1,62 @@
+@if ($enable-header-white-background) {
+  .it-header-wrapper {
+    .it-header-center-wrapper {
+      .it-header-center-content-wrapper {
+        .it-brand-wrapper {
+          .it-brand-text,
+          .it-brand-text h2,
+          .it-brand-text h3 {
+            color: $text-color;
+            font-weight: 700;
+          }
+        }
+
+        .it-right-zone {
+          color: $text-color;
+
+          .it-socials {
+            ul {
+              .icon {
+                color: $primary;
+                fill: $primary;
+              }
+
+              a:hover svg {
+                fill: darken($primary, 10%);
+              }
+            }
+          }
+
+          .it-search-wrapper a.rounded-icon {
+            background-color: $primary;
+            color: white;
+
+            &:hover {
+              background-color: darken($primary, 10%);
+            }
+          }
+        }
+      }
+    }
+
+    .it-header-navbar-wrapper {
+      background-color: $primary;
+    }
+
+    .navbar .navbar-collapsable {
+      .menu-wrapper .it-brand-wrapper {
+        .it-brand-text,
+        .it-brand-text h2,
+        .it-brand-text h3 {
+          color: $text-color;
+          font-weight: 700;
+        }
+      }
+    }
+    @media (max-width: map-get($map: $grid-breakpoints, $key: 'lg') - 1px) {
+      button.custom-navbar-toggler svg.icon {
+        fill: $primary;
+      }
+    }
+  }
+}

package/src/theme/_site-variables.scss

@@ -19,6 +19,12 @@ $tertiary-text: #fff !default;
 $highlight-search: #ff0 !default;
 $font-family-monospace-light: Roboto Mono Light !default;
 
+// Per abilitare l'header bianco impostare a true
+// e impostare "$header-center-bg-color: white" come qui sotto
+$enable-header-white-background: false;
+// $header-center-bg-color: white;
+// $header-slim-bg-color: #3f3f3f;
+
 // GDPR-BANNER RELATED
 $gdpr-accept-all: #005700 !default;
 $gdpr-toggle-checked: #005700 !default;

package/src/theme/bootstrap-override/_bootstrap-italia-site.scss

@@ -188,6 +188,7 @@
   @import 'bootstrap-italia/src/scss/custom/headernavbar';
   @import 'bootstrap-italia/src/scss/custom/headernavbartheme';
   @import 'bootstrap-italia/src/scss/custom/header';
+  @import './bootstrap-italia/header';
 
   // footer
   @import 'bootstrap-italia/src/scss/custom/footer';

package/src/theme/bootstrap-override/bootstrap-italia/_header.scss

@@ -0,0 +1,19 @@
+.it-header-wrapper {
+  @media (max-width: map-get($map: $grid-breakpoints, $key: 'lg') - 1px) {
+    .it-header-navbar-wrapper {
+      background-color: transparent;
+
+      > .container {
+        padding: 0;
+      }
+    }
+
+    .it-nav-wrapper .it-header-navbar-wrapper nav {
+      padding-right: 0;
+    }
+
+    .it-nav-wrapper .it-header-navbar-wrapper {
+      margin-top: -20px;
+    }
+  }
+}

package/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss

@@ -24,4 +24,23 @@
       }
     }
   }
+
+  @media (max-width: map-get($map: $grid-breakpoints, $key: 'lg') - 1px) {
+    .it-header-center-content-wrapper {
+      .it-brand-wrapper {
+        .header-logo {
+          img {
+            width: 30px;
+            height: 30px;
+          }
+        }
+      }
+
+      .it-right-zone .it-search-wrapper a.rounded-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+      }
+    }
+  }
 }

package/src/theme/site.scss

@@ -21,6 +21,7 @@
 @import 'ItaliaTheme/css_variables';
 @import 'ItaliaTheme/common';
 @import 'ItaliaTheme/main';
+@import 'ItaliaTheme/white-header';
 @import 'ItaliaTheme/ar';
 @import 'ItaliaTheme/home';
 @import 'ItaliaTheme/sitemap';