@eeacms/volto-cca-policy 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -4,6 +4,52 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.2.8](https://github.com/eea/volto-cca-policy/compare/0.2.7...0.2.8) - 23 April 2024
+
+#### :bug: Bug Fixes
+
+- fix(tabs): disable hover on Spotlight view [kreafox - [`4ec2545`](https://github.com/eea/volto-cca-policy/commit/4ec25452bcf4702e779d6af7165b99054b4dd012)]
+- fix(block): change icon type and fix icon size in Case Study Explorer block [kreafox - [`a65e4bc`](https://github.com/eea/volto-cca-policy/commit/a65e4bc6d3dee7dc39a05e008e7ee4fc5db53939)]
+
+#### :nail_care: Enhancements
+
+- change: improve Spotlight tab variation [kreafox - [`a7d2eb9`](https://github.com/eea/volto-cca-policy/commit/a7d2eb9e6c49eef986f53f2daa08114f27de3313)]
+- change(block): improve accordion icon [kreafox - [`79d4a7e`](https://github.com/eea/volto-cca-policy/commit/79d4a7e2cad1cbf50cc77e550a4c9494670dd9e8)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`74ecf1e`](https://github.com/eea/volto-cca-policy/commit/74ecf1eb58c613913f0deb6d218ff4c156477e27)]
+
+### [0.2.7](https://github.com/eea/volto-cca-policy/compare/0.2.6...0.2.7) - 19 April 2024
+
+#### :rocket: New Features
+
+- feat(view): add RASTWidgetView [kreafox - [`2a80745`](https://github.com/eea/volto-cca-policy/commit/2a80745b6f97d03ca33bda8cd3b40e3fd030c521)]
+
+#### :nail_care: Enhancements
+
+- change: remove MissionFundingView, use dexterity layout - Refs #267791 [kreafox - [`f27de36`](https://github.com/eea/volto-cca-policy/commit/f27de36778d57f5b11b3d9d2abf26bd5bde134f4)]
+- change(view): remove MissionToolView, use dexterity layout - Refs #268126 [kreafox - [`1d11d7d`](https://github.com/eea/volto-cca-policy/commit/1d11d7d6f3429af7a2ea5fd94060893066b68c33)]
+
+#### :house: Internal changes
+
+- chore: update components export [kreafox - [`5c81f64`](https://github.com/eea/volto-cca-policy/commit/5c81f641275a4ab6087b09c21e333f5a01009c7f)]
+- chore: cleanup code -  remove unused widget [kreafox - [`6c6297d`](https://github.com/eea/volto-cca-policy/commit/6c6297df2dbd13010807e409634dfe7a90031407)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #260715 - remove icons [Tripon Eugen - [`cacff37`](https://github.com/eea/volto-cca-policy/commit/cacff37322171b8faaf6fc1a1e4cd2335376bc41)]
+- Refs #260715 - remove icons [Tripon Eugen - [`7fd9186`](https://github.com/eea/volto-cca-policy/commit/7fd91866c88a9bec53422412c967219242aad5f6)]
+- test: fix SyntaxError [kreafox - [`e942845`](https://github.com/eea/volto-cca-policy/commit/e942845ce658b084715c39eea9f90adbb7bc60fe)]
+- Styleling [Tiberiu Ichim - [`39a22cb`](https://github.com/eea/volto-cca-policy/commit/39a22cbc76a245286d9daa6da84ee5bf539f3dc4)]
+- Remove logging [Tiberiu Ichim - [`ace005c`](https://github.com/eea/volto-cca-policy/commit/ace005c3e7a9d0ab708d48a16cb286253bb44ab9)]
+- Better buffer [Tiberiu Ichim - [`8a7d99f`](https://github.com/eea/volto-cca-policy/commit/8a7d99f901752a2d2eb8db799e415a2aab88a1f6)]
+- Better height [Tiberiu Ichim - [`4928376`](https://github.com/eea/volto-cca-policy/commit/492837652238098e2ce8b5e7bc593db3b8c0ba04)]
+- Hardcode buffer value [Tiberiu Ichim - [`95ed23d`](https://github.com/eea/volto-cca-policy/commit/95ed23dd4dfc53c5ed82108b97023600cc455bcb)]
+- Zoom to point [Tiberiu Ichim - [`2043cb9`](https://github.com/eea/volto-cca-policy/commit/2043cb98ce1db30b6dc80b890e4dee9183ccb092)]
+- Code cleanup [Tiberiu Ichim - [`43fdf78`](https://github.com/eea/volto-cca-policy/commit/43fdf78af12cb6ee2b588ec7641f22052c6bf6fa)]
+- Tweak layer [Tiberiu Ichim - [`f33d894`](https://github.com/eea/volto-cca-policy/commit/f33d894730f9459d7f8638fa680b7ad9572e685f)]
+- Improvements to casestudy explorer map [Tiberiu Ichim - [`b5cf129`](https://github.com/eea/volto-cca-policy/commit/b5cf129ad6106125fb367a25f6bc218a349c1982)]
 ### [0.2.6](https://github.com/eea/volto-cca-policy/compare/0.2.5...0.2.6) - 17 April 2024
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/index.js

@@ -1,9 +1,9 @@
-export ImageGallery from './theme/ImageGallery/ImageGallery';
-export BannerTitle from './theme/BannerTitle/BannerTitle';
-export PortalMessage from './theme/PortalMessage/PortalMessage';
-export TranslationDisclaimer from './theme/TranslationDisclaimer/TranslationDisclaimer';
-export ShareInfoButton from './theme/ShareInfoButton/ShareInfoButton';
-export ASTNavigation from './theme/ASTNavigation/ASTNavigation';
+export { default as ImageGallery } from './theme/ImageGallery/ImageGallery';
+export { default as BannerTitle } from './theme/BannerTitle/BannerTitle';
+export { default as PortalMessage } from './theme/PortalMessage/PortalMessage';
+export { default as TranslationDisclaimer } from './theme/TranslationDisclaimer/TranslationDisclaimer';
+export { default as ShareInfoButton } from './theme/ShareInfoButton/ShareInfoButton';
+export { default as ASTNavigation } from './theme/ASTNavigation/ASTNavigation';
 
-export { default as MissionToolView } from './theme/Views/MissionToolView';
-export { default as MissionDisclaimer } from './theme/MissionDisclaimer/MissionDisclaimer';
+// Widgets
+export { default as RASTWidgetView } from './theme/Widgets/RASTWidgetView';

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.js

@@ -62,7 +62,7 @@ export default function CaseStudyExplorerView(props) {
   if (__SERVER__) return '';
 
   return (
-    <div>
+    <div className="casestudy-explorer-map">
       <Grid columns="12">
         <Grid.Column mobile={9} tablet={9} computer={9} className="col-left">
           {cases.length ? (

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.jsx

@@ -1,7 +1,16 @@
-import React, { FormEvent } from 'react';
+import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Accordion, Icon, Checkbox } from 'semantic-ui-react';
 
+const AccordionIcon = ({ active }) => {
+  return (
+    <Icon
+      size="small"
+      className={active ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}
+    />
+  );
+};
+
 export default function CaseStudyFilters(props) {
   const { filters, activeFilters, setActiveFilters } = props;
 
@@ -32,7 +41,7 @@ export default function CaseStudyFilters(props) {
     setActiveIndex(index);
   }
 
-  const checkboxChangeHandler = (_event: FormEvent<HTMLInputElement>, data) => {
+  const checkboxChangeHandler = (_event, data) => {
     const temp = JSON.parse(JSON.stringify(activeFilters));
 
     if (data.checked) {
@@ -48,14 +57,14 @@ export default function CaseStudyFilters(props) {
 
   const intl = useIntl();
   return (
-    <>
+    <div className="casestudy-filters">
       <Accordion exclusive={false} className="secondary">
         <Accordion.Title
           active={activeIndex.includes(0)}
           index={0}
           onClick={handleClick}
         >
-          <Icon name="dropdown" />
+          <AccordionIcon active={activeIndex.includes(0)} />
           <FormattedMessage
             id="Adaptation sectors"
             defaultMessage="Adaptation sectors"
@@ -80,7 +89,7 @@ export default function CaseStudyFilters(props) {
           index={1}
           onClick={handleClick}
         >
-          <Icon name="dropdown" />
+          <AccordionIcon active={activeIndex.includes(1)} />
           <FormattedMessage
             id="Climate impacts"
             defaultMessage="Climate impacts"
@@ -89,7 +98,6 @@ export default function CaseStudyFilters(props) {
         <Accordion.Content active={activeIndex.includes(1)}>
           {Object.entries(filters?.impacts || {}).map(
             ([value, label], index) => (
-              // <p key={index}>
               <Checkbox
                 label={intl.formatMessage({ id: label })}
                 checked={activeFilters.impacts.includes(value)}
@@ -98,7 +106,6 @@ export default function CaseStudyFilters(props) {
                 onChange={checkboxChangeHandler}
                 key={'impact' + index}
               />
-              // </p>
             ),
           )}
         </Accordion.Content>
@@ -107,7 +114,7 @@ export default function CaseStudyFilters(props) {
           index={2}
           onClick={handleClick}
         >
-          <Icon name="dropdown" />
+          <AccordionIcon active={activeIndex.includes(2)} />
           <FormattedMessage
             id="Key type measures"
             defaultMessage="Key type measures"
@@ -120,7 +127,7 @@ export default function CaseStudyFilters(props) {
                 <p>
                   <strong>{intl.formatMessage({ id: key })}</strong>
                 </p>
-                {Object.entries(values).map(([valKey, valData]) => (
+                {Object.entries(values).map(([_, valData]) => (
                   <Checkbox
                     label={intl.formatMessage({ id: valData.value })}
                     value={valData.key}
@@ -145,17 +152,20 @@ export default function CaseStudyFilters(props) {
       ) : null}
       <div className="case-study-legend">
         <p>
-          <strong>Climate-ADAPT case studies</strong>
-        </p>
-        <p>
-          <span></span>Climate-ADAPT case studies
+          <span></span>
+          <FormattedMessage
+            id="Climate-ADAPT case studies"
+            defaultMessage="Climate-ADAPT case studies"
+          />
         </p>
         <p>
           <span className="light-blue"></span>
-          Case studies collected at national level in Spain, provided by
-          AdapteCCA.es
+          <FormattedMessage
+            id="Case studies collected at national level in Spain, provided by AdapteCCA.es"
+            defaultMessage="Case studies collected at national level in Spain, provided by AdapteCCA.es"
+          />
         </p>
       </div>
-    </>
+    </div>
   );
 }

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx

@@ -15,11 +15,11 @@ export default function CaseStudyMap(props) {
   const features = getFeatures(items);
 
   const [tileWMSSources] = React.useState([
-    // , setTileWMSSources
     new ol.source.TileWMS({
+      // see https://gisco-services.ec.europa.eu/maps/demo/ for more layers
       url: 'https://gisco-services.ec.europa.eu/maps/service',
       params: {
-        LAYERS: 'OSMBlossomComposite',
+        LAYERS: 'OSMCartoComposite',
         TILED: true,
       },
       serverType: 'geoserver',

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureInteraction.jsx

@@ -59,7 +59,12 @@ export default function FeatureInteraction({ onFeatureSelect }) {
         const subfeatures = feature.values_.features;
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
+          const extent = selectedFeature.geometry.extent_;
+
           onFeatureSelect(selectedFeature);
+          const paddedExtent = ol.extent.buffer(extent, 50000);
+
+          map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
         } else {
           // zoom to extent of cluster points
           const extent = getExtentOfFeatures(subfeatures);
@@ -68,8 +73,6 @@ export default function FeatureInteraction({ onFeatureSelect }) {
             (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
           extentBuffer = extentBuffer < 500 ? 500 : extentBuffer;
           const paddedExtent = ol.extent.buffer(extent, extentBuffer);
-
-          // const paddedExtent = ol.extent.buffer(extent, 50000);
           map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
         }
       });

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx

@@ -20,6 +20,9 @@ export default function InfoOverlay({
 
   const prevLayerId = usePrevious(layerId);
 
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
+
   React.useEffect(() => {
     if (prevLayerId && layerId !== prevLayerId) {
       setShowTooltip(false);
@@ -32,7 +35,7 @@ export default function InfoOverlay({
     const overlay = new ol.Overlay({
       element: document.getElementById('popup-overlay'),
       positioning: 'bottom-center',
-      offset: [0, -10],
+      offset: [10, -10],
       stopEvent: false,
     });
     map.addOverlay(overlay);
@@ -61,9 +64,6 @@ export default function InfoOverlay({
     };
   }, [map, tooltip, onFeatureSelect, hasCusters]);
 
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => setIsClient(true), []);
-
   return isClient ? (
     <div
       id="popup-overlay"

package/src/components/manage/Blocks/CaseStudyExplorer/styles.less

@@ -5,7 +5,10 @@
 }
 
 #csepopup {
+  width: 300px;
+  padding: 10px 0;
   border-bottom: 6px solid #005c96;
+  background-color: white;
 
   p {
     padding: 0 10px 0 10px;
@@ -35,84 +38,110 @@
   }
 }
 
-#cse-filter {
-  h4 {
-    position: relative;
-    padding: 10px;
-    border-bottom: 1px solid #d8d8d8;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    background-color: #fff;
-    clear: both;
-    color: #005c96;
-    cursor: pointer;
-    font-size: 14px;
+.section-case-study-explorer #popup-overlay {
+  width: 340px;
+  // max-height: 300px;
+  padding: 0;
+  background-color: #fff;
+}
+
+@mapHeight: 70vh;
+
+.casestudy-explorer-map {
+  // height: @mapHeight;
+  min-height: @mapHeight;
+
+  .ol-map {
+    // height: @mapHeight;
+    min-height: @mapHeight;
   }
 
-  p {
-    // padding: 2px;
-    padding-bottom: 10px;
-    clear: both;
-    line-height: 20px;
-
-    span {
-      float: left;
-      font-family: OpenSansM, sans-serif;
-      font-size: 12px;
+  .casestudy-filters {
+    display: flex;
+    min-height: @mapHeight;
+    flex-direction: column;
+  }
+
+  #cse-filter {
+    h4 {
+      position: relative;
+      padding: 10px;
+      border-bottom: 1px solid #d8d8d8;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      background-color: #fff;
+      clear: both;
+      color: #005c96;
+      cursor: pointer;
+      font-size: 14px;
     }
 
-    input {
-      float: right;
+    p {
+      // padding: 2px;
+      padding-bottom: 10px;
+      clear: both;
+      line-height: 20px;
+
+      span {
+        float: left;
+        font-family: OpenSansM, sans-serif;
+        font-size: 12px;
+      }
+
+      input {
+        float: right;
+      }
     }
-  }
 
-  div.title {
-    width: 100%;
-  }
+    div.title {
+      width: 100%;
+    }
 
-  .ui.accordion > .title > .icon {
-    line-height: 1rem;
-  }
+    .ui.accordion {
+      & > .title > .icon {
+        line-height: 1rem;
+      }
 
-  .ui.accordion p {
-    margin: 0;
-  }
+      p {
+        margin: 0;
+      }
 
-  .ui.accordion .subcategory {
-    margin-bottom: 30px;
-  }
+      .content {
+        overflow: auto;
+        max-height: 400px;
 
-  button.reset {
-    margin-top: 20px;
-  }
+        .subcategory {
+          margin-bottom: 30px;
+        }
+      }
+    }
 
-  .ui.checkbox {
-    width: 100%;
-  }
+    button.reset {
+      margin-top: 20px;
+    }
 
-  .case-study-legend {
-    padding-top: 20px;
-
-    span {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      margin-top: 3px;
-      margin-right: 5px;
-      background-color: #005c96 !important;
-      background-color: #bbb;
-      border-radius: 50%;
+    .ui.checkbox {
+      width: 100%;
     }
 
-    span.light-blue {
-      background-color: #00ffff !important;
+    .case-study-legend {
+      padding-top: 20px;
+      margin-top: auto;
+
+      span {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-top: 3px;
+        margin-right: 5px;
+        background-color: #005c96 !important;
+        background-color: #bbb;
+        border-radius: 50%;
+      }
+
+      span.light-blue {
+        background-color: #00ffff !important;
+      }
     }
   }
 }
-
-.section-case-study-explorer #popup-overlay {
-  width: 340px;
-  // max-height: 300px;
-  padding: 0;
-  background-color: #fff;
-}

package/src/components/manage/Blocks/CountryMapProfile/Interactions.jsx

@@ -40,21 +40,19 @@ export const Interactions = ({
       ) {
         // if (countries_metadata.length>0) {
         let countryName = feature.get('na');
-        let noDataReportedMsg =
-          'No data reported through the reporting mechanism of the Governance Regulation. Last information is available <a href="' +
-          baseUrl +
-          '/' +
-          countryName.toLowerCase() +
-          '">here</a>';
+        let noDataReportedMsg = `
+No data reported through the reporting mechanism of the Governance Regulation.
+Last information is available
+<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
+
         if (countryName === 'Türkiye') {
           countryName = 'Turkiye';
-          noDataReportedMsg =
-            'Data reported in 2021 through the reporting mechanism of the Governance Regulation. Information is available <a href="' +
-            baseUrl +
-            '/' +
-            countryName.toLowerCase() +
-            '">here</a>';
+          noDataReportedMsg = `
+Data reported in 2021 through the reporting mechanism of the Governance Regulation.
+Information is available
+<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
         }
+
         if (!Object.hasOwn(countries_metadata[0], countryName)) {
           return;
         }
@@ -65,7 +63,7 @@ export const Interactions = ({
         let tooltipContent = '';
         if (thematicMapMode === 'National adaption policy') {
           if (metadata[0]?.notreported) {
-            tooltipContent = '<span>' + noDataReportedMsg + '</span>';
+            tooltipContent = `<span>${noDataReportedMsg}</span>`;
           } else {
             tooltipContent =
               metadata[0]?.mixed || '<span>NAS and NAP not reported</span>';
@@ -79,28 +77,19 @@ export const Interactions = ({
         // overlaySource.addFeature(feature);
         map.getTargetElement().style.cursor = 'pointer';
         const node = tooltipRef.current;
-        let tooltipContentDiv =
-          `<div id="country-name">
-            <a href="https://climate-adapt.eea.europa.eu/en/countries-regions/countries/` +
-          countryName.toLowerCase() +
-          `">
-              <h3>` +
-          countryName +
-          `</h3>
-            </a>
-            <img class="tooltip-country-flag" src="` +
-          feature.get('flag').src +
-          // feature.getflag +
-          `" height="33" width="54">
-          </div><div class="tooltip-content">` +
-          tooltipContent +
-          `</div>`;
-        setTooltipVisibility(
-          node,
-          '<div class="country-tooltip">' + tooltipContentDiv + '</div>',
-          domEvt,
-          true,
-        );
+        const flag = feature.get('flag').src;
+        const cn = countryName.toLowerCase();
+        let tooltipContentDiv = `
+<div class="country-tooltip">
+  <div id="country-name">
+    <a href="/en/countries-regions/countries/${cn}"><h3>${countryName}</h3></a>
+    <img class="tooltip-country-flag" src="${flag}" height="33" width="54">
+  </div>
+  <div class="tooltip-content">${tooltipContent}</div>
+</div>
+`;
+
+        setTooltipVisibility(node, tooltipContentDiv, domEvt, true);
       }
 
       // if (feature) {

package/src/components/manage/Blocks/RASTBlock/RASTAccordion.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Accordion, Icon } from 'semantic-ui-react';
+import { Accordion } from 'semantic-ui-react';
 import RASTAccordionContent from './RASTAccordionContent';
 import { useHistory } from 'react-router-dom';
 
@@ -36,13 +36,6 @@ const RASTAccordion = (props) => {
               }}
             >
               <span className="item-title">{item.title}</span>
-              {show_subfolders ? (
-                active ? (
-                  <Icon className="ri-arrow-up-s-line" />
-                ) : (
-                  <Icon className="ri-arrow-down-s-line" />
-                )
-              ) : null}
             </Accordion.Title>
             {show_subfolders ? (
               <Accordion.Content active={active}>

package/src/components/manage/Blocks/TabsBlock/Spotlight.jsx

@@ -52,8 +52,7 @@ export const AssetTab = ({ props, tabIndex, tabTitle }) => {
           src={
             isInternalURL(imageObject['@id'])
               ? `${flattenToAppURL(imageObject['@id'])}/${
-                  imageObject?.image_scales?.image?.[0].scales?.[imageSize]
-                    ?.download || imageObject?.image_scales?.image?.[0].download
+                  imageObject?.image_scales?.image?.[0].download
                 }`
               : imageObject['@id']
           }
@@ -123,7 +122,7 @@ const MenuItem = (props) => {
         aria-selected={tab === activeTab}
         tabIndex={0}
         role={'tab'}
-        onMouseOver={focusTab}
+        // onMouseOver={focusTab}
         onFocus={focusTab}
         onClick={focusTab}
         onKeyDown={(e) => {

package/src/components/manage/Blocks/TabsBlock/spotlight.less

@@ -6,14 +6,35 @@
   // this is the menu
   flex-wrap: wrap;
   border: none;
+  margin: 1em 0 !important;
   box-shadow: none;
-  // background: #cc000033;
+
+  .ui.image.thumb {
+    width: 190px;
+    height: auto;
+  }
 
   .item {
-    flex-grow: 2;
+    padding: 0.5em;
+    border: 1px solid transparent !important;
+    margin: 10px 0;
+
+    &:not(:last-child) {
+      margin-right: 15px !important;
+    }
+
+    &:hover {
+      border: 1px solid #ddd !important;
+      border-radius: 4px;
+    }
+
+    &.active,
+    &.active:hover {
+      border: 1px solid #ddd !important;
+      border-radius: 5px;
+    }
 
     &:before {
-      // border: 0px !important;
       background: none;
     }
   }

package/src/components/theme/Widgets/RASTWidgetView.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List } from 'semantic-ui-react';
+import cx from 'classnames';
+
+const RASTWidgetView = ({ value, className }) => {
+  return value && value.length > 0 ? (
+    <span className={cx(className, 'widget')}>
+      <List>
+        {value.map((step, index) => (
+          <List.Item key={index}>{step.title}</List.Item>
+        ))}
+      </List>
+    </span>
+  ) : (
+    ''
+  );
+};
+export default RASTWidgetView;