Argomenti in Evidenza - Gestione sfondo, testo e sidebar

RELEASE.md

@@ -45,19 +45,23 @@
 
 ### Migliorie
 
+- Nel blocco Argomenti in Evidenza, è stata rimossa l'obbligatorietà di aggiungere una card argomento, ora si possono inserire anche solo le etichette.
 - Aggiunta la possibilità di inserire testo nel filtro luogo nel blocco Ricerca Eventi.
 - Le opzioni del menu a tendina per il filtro luogo nel blocco Ricerca Eventi sono ordinate alfabeticamente.
 - Il focus quando un elemento (link o pulsante) è cliccato con il mouse non ha più il bordo giallo/arancione.
 - Migliorati gli stili per la stampa del CT pagina.
 
 ### Novità
 
-- ...
+- Nel blocco Argomenti in Evidenza sono state aggiunte due nuove proprietà, una permette di allineare gli "Altri argomenti" al centro e la seconda serve a nascondere o meno il bottone "Vedi tutti" che punta alla pagina argomenti.
 
 ### Fix
 
+- Nel blocco Argomenti in Evidenza se non ci sono card ma etichette argomento, il blocco non renderizza più lo sfondo per un maggiore contrasto con le etichette, di conseguenza il titolo del blocco rimane nero e non bianco.
 - Aggiunto il titolo per la sezione "Organizzatore esterno" quando il campo è compilato nel tipo di contenuto Evento.
 
+
+
 ## Versione 11.9.1 (03/04/2024)
 
 ### Fix

locales/de/LC_MESSAGES/volto.po

@@ -1132,6 +1132,11 @@ msgstr ""
 msgid "canale_digitale_widget_title"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1168,6 +1173,11 @@ msgstr ""
 msgid "category_icon"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2220,6 +2230,11 @@ msgstr ""
 msgid "grid-gallery-max-items-exceeded"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr ""
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"

locales/en/LC_MESSAGES/volto.po

@@ -1117,6 +1117,11 @@ msgstr ""
 msgid "canale_digitale_widget_title"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr "Add a argument to display on the card."
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1153,6 +1158,11 @@ msgstr "Special cases"
 msgid "category_icon"
 msgstr "Category icon"
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr "Align topics in the center"
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2205,6 +2215,11 @@ msgstr "View previous image"
 msgid "grid-gallery-max-items-exceeded"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr "Hide "See all" button"
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"
@@ -3401,7 +3416,7 @@ msgstr "Headquarters of"
 #: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
 # defaultMessage: Seleziona gli altri argomenti
 msgid "selectOtherArguments"
-msgstr ""
+msgstr "Select other topics"
 
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Seleziona gli argomenti che vuoi cercare

locales/es/LC_MESSAGES/volto.po

@@ -1126,6 +1126,11 @@ msgstr "Precedente"
 msgid "canale_digitale_widget_title"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1162,6 +1167,11 @@ msgstr "Casos especiales"
 msgid "category_icon"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr "Alinear temas en el centro"
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2214,6 +2224,11 @@ msgstr "Ver imagen anterior"
 msgid "grid-gallery-max-items-exceeded"
 msgstr "Para esta plantilla el número de resultados por página debe ser 7. Compruebe la configuración."
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr "Ocultar el botón "Ver todo""
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"

locales/fr/LC_MESSAGES/volto.po

@@ -1134,6 +1134,11 @@ msgstr ""
 msgid "canale_digitale_widget_title"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1170,6 +1175,11 @@ msgstr "Cas spéciaux"
 msgid "category_icon"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr "Aligner les sujets au centre"
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2222,6 +2232,11 @@ msgstr "Voir l'image précédente"
 msgid "grid-gallery-max-items-exceeded"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr "Masquer le bouton "Tout voir""
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"
@@ -3418,7 +3433,7 @@ msgstr "Siège de"
 #: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
 # defaultMessage: Seleziona gli altri argomenti
 msgid "selectOtherArguments"
-msgstr ""
+msgstr "Sélectionnez d'autres sujets"
 
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Seleziona gli argomenti che vuoi cercare

locales/it/LC_MESSAGES/volto.po

@@ -1117,6 +1117,11 @@ msgstr "Eventi precedenti"
 msgid "canale_digitale_widget_title"
 msgstr "Accedere al servizio"
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1153,6 +1158,11 @@ msgstr "Casi particolari"
 msgid "category_icon"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr "Allinea gli argomenti al centro"
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2205,6 +2215,11 @@ msgstr "Immagine precedente"
 msgid "grid-gallery-max-items-exceeded"
 msgstr "Per questo template il numero di risultati per pagina deve essere 7. Controlla le impostazioni."
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr "Nascondi pulsante "Vedi tutti""
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"

locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-04-03T13:54:10.953Z\n"
+"POT-Creation-Date: 2024-04-08T09:52:56.295Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -1119,6 +1119,11 @@ msgstr ""
 msgid "canale_digitale_widget_title"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Aggiungi un argomento da visualizzare sulla card.
+msgid "cardDescription"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 # defaultMessage: Seleziona l'immagine da mostrare
 msgid "cardImage"
@@ -1155,6 +1160,11 @@ msgstr ""
 msgid "category_icon"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Allinea gli argomenti al centro
+msgid "centerAlignment"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Link al canale
 msgid "channel_link"
@@ -2207,6 +2217,11 @@ msgstr ""
 msgid "grid-gallery-max-items-exceeded"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar
+# defaultMessage: Nascondi pulsante "Vedi tutti"
+msgid "hideButtonShowAll"
+msgstr ""
+
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Nascondi le date
 msgid "hide_dates"

src/components/ItaliaTheme/AppExtras/TrackFocus.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 const DATA_FOCUS_MOUSE = 'data-focus-mouse';
 const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse';

src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BodyWrapper.jsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
 
-const BodyWrapper = ({ data, inEditMode, children, id }) => {
+const BodyWrapper = ({ data, inEditMode, children, id, hasArguments }) => {
   return (
-    <div className={cx('container pt-5', { 'p-5': inEditMode })}>
+    <div
+      className={cx('container argumentsCardsWrapper', {
+        'pt-5': hasArguments,
+        'p-5': inEditMode,
+      })}
+    >
       <h2 id={id + 'title'}>{data.text}</h2>
-      <div className="grid mt-5">{children}</div>
+      {children?.length > 0 && <div className="grid mt-5">{children}</div>}
     </div>
   );
 };

src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages } from 'react-intl';
 import { UniversalLink, ConditionalLink } from '@plone/volto/components';
 import { Chip, ChipLabel, Button, Container } from 'design-react-kit';
+import cx from 'classnames';
 
 const messages = defineMessages({
   view_all: {
@@ -14,16 +15,22 @@ const messages = defineMessages({
   },
 });
 
-const BottomBody = ({ data, intl }) => {
+const BottomBody = ({ data, intl, hasArguments }) => {
   return data?.arguments?.length > 0 ? (
-    <Container className="text-center">
-      <div className="row d-lg-inline-flex align-items-center pt-5">
-        <div className="col-lg-auto">
+    <Container className="text-center argumentsChipsWrapper pb-3">
+      <div
+        className={cx('row d-lg-inline-flex align-items-center', {
+          'pt-5': hasArguments,
+        })}
+      >
+        <div
+          className={data?.centerAlignment ? 'col-lg-12 mb-3' : 'col-lg-auto'}
+        >
           <h6 className="text-uppercase text-center mt-1">
             {intl?.formatMessage(messages.otherArguments)}
           </h6>
         </div>
-        <div className="col-lg-auto">
+        <div className={data?.centerAlignment ? 'col-lg-12' : 'col-lg-auto'}>
           {data?.arguments?.map((argument, index) => (
             <Chip
               color="primary"
@@ -43,17 +50,19 @@ const BottomBody = ({ data, intl }) => {
         </div>
       </div>
 
-      <div className="link-button mt-5">
-        <Button
-          color="primary"
-          icon={false}
-          tag={UniversalLink}
-          href="/argomenti"
-          className="view-all text-decoration-none"
-        >
-          {intl?.formatMessage(messages.view_all)}
-        </Button>
-      </div>
+      {!data?.hideButtonShowAll && (
+        <div className="link-button mt-3">
+          <Button
+            color="primary"
+            icon={false}
+            tag={UniversalLink}
+            href="/argomenti"
+            className="view-all text-decoration-none"
+          >
+            {intl?.formatMessage(messages.view_all)}
+          </Button>
+        </div>
+      )}
     </Container>
   ) : null;
 };

src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Edit.jsx

@@ -14,9 +14,13 @@ import { ArgumentsInEvidenceBackground } from 'design-comuni-plone-theme/compone
 
 class Edit extends SubblocksEdit {
   render() {
+    const hasArguments = this.props.data.subblocks?.some((subblock) => {
+      return subblock.argument?.length > 0;
+    });
+
     return (
       <div className="argumentInEvidence public-ui">
-        <ArgumentsInEvidenceBackground inEditMode={true} />
+        {hasArguments && <ArgumentsInEvidenceBackground inEditMode={true} />}
         <SubblocksWrapper node={this.node}>
           <BodyWrapper data={this.props.data} inEditMode={false}>
             {this.state.subblocks.map((subblock, subindex) => (
@@ -48,7 +52,11 @@ class Edit extends SubblocksEdit {
           />
         </SidebarPortal>
 
-        <BottomBody data={this.props.data} intl={this.props.intl} />
+        <BottomBody
+          hasArguments={true}
+          data={this.props.data}
+          intl={this.props.intl}
+        />
       </div>
     );
   }