@eeacms/volto-cca-policy 0.1.71 → 0.1.73

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

@@ -0,0 +1,234 @@
+.countryMapProfile {
+  &.sized-wrapper {
+    width: 100%;
+    height: 80vh;
+  }
+
+  #country_map {
+    position: relative;
+    margin: 50px;
+    fill: #fff;
+  }
+
+  .tooltip {
+    position: absolute;
+    z-index: 10;
+    display: none;
+    padding: 3px;
+    background-color: #2a2a2a;
+    border-radius: 3px;
+    color: white;
+    font-size: 10px;
+  }
+
+  .graticule {
+    fill: none;
+    stroke: black;
+    stroke-dasharray: 10, 10;
+    stroke-width: 1;
+  }
+
+  .semi-graticule {
+    fill: none;
+    stroke: gray;
+    stroke-dasharray: 1, 1;
+    stroke-width: 0.6;
+  }
+
+  .country-outline path {
+    fill: #e9e9e9;
+  }
+
+  .country-outline path {
+    fill: #f5f5f5;
+    stroke: #d1d1d1;
+    stroke-width: 1;
+  }
+
+  .country-available path {
+    fill: #0170b7;
+  }
+
+  .legend {
+    .legend-text {
+      width: 16em;
+    }
+
+    .legend-el {
+      display: flex;
+      flex-direction: row;
+      padding: 0.8em 0;
+    }
+
+    .legend-box {
+      width: 31px;
+      height: 19px;
+      margin-right: 0.5em;
+    }
+
+    .content-available {
+      background-color: #0170b7;
+    }
+
+    .no-content {
+      background-color: #72dffe;
+    }
+
+    .no-focus {
+      background-color: #efe7d4;
+    }
+
+    .country-notreported {
+      background-color: #fed7da;
+    }
+
+    .country-none {
+      background-color: #c0c0c0;
+    }
+
+    .country-outside {
+      background-color: #e0e0e0;
+    }
+  }
+
+  .legend.nasnap-legend {
+    display: block;
+
+    .country-nasnap {
+      background-color: #0071b3;
+    }
+
+    .country-nas {
+      background-color: #78d9fc;
+    }
+
+    .country-nap {
+      background-color: #11cbff;
+    }
+
+    .country-sap {
+      background-image: url("data:image/svg+xml,<svg id='sappatternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='sappattern' patternUnits='userSpaceOnUse' width='8' height='5' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><line x1='0' y='0' x2='0' y2='11.5' stroke='black' stroke-width='1'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23sappattern)'/></svg>");
+    }
+
+    .country-nodata {
+      background-color: #efe7d4;
+    }
+  }
+
+  .legend.portals-legend {
+    .country-hazards {
+      background-color: #acedff;
+    }
+
+    .country-adaptation {
+      background-color: #11cbff;
+    }
+
+    .country-both {
+      background-color: #0170b7;
+    }
+
+    .country-not-specified {
+      background-color: #fff3ac;
+    }
+
+    .country-none {
+      background-color: #efe7d4;
+    }
+
+    .country-outside {
+      background-color: #e0e0e0;
+    }
+
+    .country-noportal {
+      background-color: #c0c0c0;
+    }
+  }
+
+  .country-blue path {
+    cursor: pointer;
+    // fill: @secondary-blue;
+  }
+
+  .country-notreported path {
+    cursor: pointer;
+    fill: #fed7da;
+  }
+
+  .country-noportal path {
+    cursor: pointer;
+    fill: #e0e0e0;
+  }
+
+  .country-nasnapsap path {
+    cursor: pointer;
+    fill: url(#nasnapsap);
+  }
+
+  .country-nassap path {
+    cursor: pointer;
+    fill: url(#nassap);
+  }
+
+  .country-napsap path {
+    cursor: pointer;
+    fill: url(#napsap);
+  }
+
+  .country-nasnapsap path {
+    cursor: pointer;
+    fill: url(#nasnapsap);
+  }
+
+  .country-nasnap path {
+    cursor: pointer;
+    fill: #007db6;
+  }
+
+  .country-nas path {
+    cursor: pointer;
+    fill: #78d9fc;
+  }
+
+  .country-nap path {
+    cursor: pointer;
+    fill: #11cbff;
+  }
+
+  .country-none path {
+    cursor: pointer;
+    fill: #e0e0e0;
+  }
+
+  .country-nodata path {
+    cursor: pointer;
+    fill: #f5f5f5;
+  }
+
+  .country-outline.ue path:hover {
+    fill: #8a9c3a;
+  }
+
+  #map-tooltip {
+    position: absolute;
+    width: 400px;
+    padding: 1em;
+    border: 1px solid #c7c7c7;
+    background-color: #f7f7f7;
+  }
+
+  #country-name a {
+    text-decoration: none;
+  }
+
+  #country-name .tooltip-country-flag {
+    position: absolute;
+    top: 10px;
+    right: 1em;
+  }
+
+  #tooltip-content {
+    padding-top: 1em;
+    border-top: 2px solid #005c96;
+  }
+}

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

@@ -3,32 +3,34 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
-a rect.circle:hover {
-  fill: #183 !important;
-}
+.rast-block {
+  a rect.circle:hover {
+    fill: #183 !important;
+  }
 
-a rect.circle {
-  pointer-events: all !important;
-}
+  a rect.circle {
+    pointer-events: all !important;
+  }
 
-svg,
-svg * {
-  pointer-events: none;
-}
+  svg,
+  svg * {
+    pointer-events: none;
+  }
+
+  .link-active {
+    .circle,
+    .circle:hover {
+      fill: @green-1;
+    }
+  }
 
-.link-active {
-  .circle,
   .circle:hover {
     fill: @green-1;
   }
-}
 
-.circle:hover {
-  fill: @green-1;
-}
-
-.rast-block .item.active a {
-  font-weight: bold;
+  .item.active a {
+    font-weight: bold;
+  }
 }
 
 .rast-map-block {

package/src/components/manage/Blocks/withResponsiveContainer.js

@@ -1,11 +1,12 @@
 import React from 'react';
 
-const withResponsiveContainer = (WrappedComponent) => {
+const withResponsiveContainer = (className) => (WrappedComponent) => {
   return (props) => {
     const [size, setSize] = React.useState();
+    const klass = className ? `${className} sized-wrapper` : 'sized-wrapper';
     return (
       <div
-        className="sized-wrapper"
+        className={klass}
         ref={(node) => {
           // console.log(node, node.clientHeight);
           if (node && !size)

package/src/index.js

@@ -27,13 +27,14 @@ import installStore from './store';
 
 import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
 import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
+import MigrationButtons from './components/MigrationButtons';
+
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 const getEnv = () => (typeof window !== 'undefined' ? window.env : process.env);
 
 const pathToNegRegex = (p) => `(?!(${p}))`;
 
-const restrictedBlocks = ['countryFlag'];
-
 const applyConfig = (config) => {
   const env = getEnv();
 
@@ -189,12 +190,15 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.video.restricted = false;
   }
 
-  // Disable blocks
-  restrictedBlocks.forEach((block) => {
-    if (config.blocks.blocksConfig[block]) {
-      config.blocks.blocksConfig[block].restricted = true;
-    }
-  });
+  // Disable blocks on Mission
+  if (config.blocks.blocksConfig.countryFlag) {
+    config.blocks.blocksConfig.countryFlag = {
+      ...config.blocks.blocksConfig.countryFlag,
+      restricted: ({ properties, block }) => {
+        return blockAvailableInMission(properties, block);
+      },
+    };
+  }
 
   // Move blocks to Site group
   const move_to_site = [
@@ -448,6 +452,14 @@ const applyConfig = (config) => {
     ...(config.addonRoutes || []),
   ];
 
+  config.settings.appExtras = [
+    ...(config.settings.appExtras || []),
+    {
+      match: '',
+      component: MigrationButtons,
+    },
+  ];
+
   return compose(installBlocks, installSearchEngine, installStore)(config);
 };
 

package/theme/globals/site.overrides

@@ -148,82 +148,6 @@ div.content-metadata {
   }
 }
 
-body.view-viewview .full {
-  position: relative !important;
-  right: 50%;
-  left: 50%;
-  width: 100vw !important;
-  max-width: initial !important;
-  margin-right: -50vw !important;
-  margin-left: -50vw !important;
-
-  > div {
-    display: block;
-    width: 100% !important;
-    margin-right: auto !important;
-    margin-left: auto !important;
-  }
-}
-
-body.view-viewview.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed) {
-  .full > div {
-    width: calc(100% - @toolbarWidth) !important;
-  }
-}
-
-@media screen and (min-width: @largestMobileScreen) {
-  body.view-viewview.has-toolbar.has-sidebar {
-    .full > div {
-      width: calc(100% - (@toolbarWidth + @sidebarWidth)) !important;
-    }
-  }
-
-  body.view-viewview.has-toolbar.has-sidebar-collapsed {
-    .full > div {
-      width: calc(100% - (@toolbarWidth + @collapsedToolbarWidth)) !important;
-    }
-  }
-
-  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
-    .full > div {
-      width: calc(100% - @collapsedToolbarWidth) !important;
-    }
-  }
-
-  body.view-viewview.has-toolbar-collapsed.has-sidebar {
-    .full > div {
-      .full-width-block {
-        width: calc(100% - (@collapsedToolbarWidth + @sidebarWidth)) !important;
-      }
-    }
-  }
-
-  body.view-viewview.has-toolbar-collapsed.has-sidebar-collapsed {
-    .full > div {
-      width: calc(
-        100% - (@collapsedToolbarWidth + @collapsedToolbarWidth)
-      ) !important;
-    }
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  body.view-viewview.has-toolbar-collapsed.has-sidebar-collapsed
-    .full.full-width-block,
-  body.view-viewview.has-toolbar.has-sidebar-collapsed .full.full-width-block {
-    width: 100% !important;
-  }
-}
-
-@media screen and (max-width: @largestMobileScreen) {
-  body.view-viewview.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed),
-  body.view-viewview.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
-    .full > div {
-      width: 100% !important;
-    }
-  }
-}
-
 .listing-body-dates:empty {
   margin-bottom: 0;
 }

package/src/components/manage/Blocks/CountryMapHeatIndex/styles.css

@@ -1,131 +0,0 @@
-.sized-wrapper {
-  width: 100%;
-  height: 80vh;
-}
-
-#country_map {
-  position: relative;
-  margin: 50px;
-  fill: #fff;
-}
-
-.tooltip {
-  position: absolute;
-  z-index: 10;
-  display: none;
-  padding: 3px;
-  background-color: #2a2a2a;
-  border-radius: 3px;
-  color: white;
-  font-size: 10px;
-}
-
-.graticule {
-  fill: none;
-  stroke: black;
-  stroke-dasharray: 10, 10;
-  stroke-width: 1;
-}
-
-.semi-graticule {
-  fill: none;
-  stroke: gray;
-  stroke-dasharray: 1, 1;
-  stroke-width: 0.6;
-}
-
-.country-outline path {
-  fill: #e9e9e9;
-}
-
-.country-outline path {
-  fill: #f5f5f5;
-  stroke: #d1d1d1;
-  stroke-width: 1;
-}
-
-.country-available path {
-  fill: #0170b7;
-}
-
-.legend {
-  .legend-text {
-    width: 16em;
-  }
-
-  .legend-el {
-    display: flex;
-    flex-direction: row;
-    padding: 0.8em 0;
-  }
-
-  .legend-box {
-    width: 31px;
-    height: 19px;
-    margin-right: 0.5em;
-  }
-}
-
-span.country-national-hhap {
-  background: #0170b7;
-}
-
-span.country-subnational-hhap {
-  background: #8baece;
-}
-
-span.country-no-hhap {
-  background: #868686;
-}
-
-span.country-none {
-  background-color: #bfbfbf !important;
-}
-
-.country-nationalhhap path {
-  cursor: pointer;
-  fill: #0170b7 !important;
-}
-
-.country-no-hhap path {
-  cursor: pointer;
-  fill: #868686 !important;
-}
-
-.country-subnationalhhap path {
-  cursor: pointer;
-  fill: #8baece !important;
-}
-
-.country-none path {
-  cursor: pointer;
-  fill: #bfbfbf !important;
-}
-
-.country-nodata path {
-  cursor: pointer;
-  fill: #efe7d4 !important;
-}
-
-#map-tooltip {
-  position: absolute;
-  width: 400px;
-  padding: 1em;
-  border: 1px solid #c7c7c7;
-  background-color: #f7f7f7;
-}
-
-#country-name a {
-  text-decoration: none;
-}
-
-#country-name .tooltip-country-flag {
-  position: absolute;
-  top: 10px;
-  right: 1em;
-}
-
-#tooltip-content {
-  padding-top: 1em;
-  border-top: 2px solid #005c96;
-}

package/src/components/manage/Blocks/CountryMapObservatory/CountryMapObservatoryView.js

@@ -1,93 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import './styles.css';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { compose } from 'redux';
-import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
-import withResponsiveContainer from './../withResponsiveContainer.js';
-import { renderCountriesBox } from './map-utils.js';
-import {
-  getFocusCountriesFeature,
-  getFocusCountryNames,
-  withCountriesData,
-} from '@eeacms/volto-cca-policy/helpers/country_map/countryMap.js';
-
-const CountryMapObservatoryView = (props) => {
-  const svgRef = useRef(null);
-  const { d3, d3Geo, size, cpath } = props;
-  const { height, width } = size;
-
-  useEffect(() => {
-    // D3 Code
-
-    // Dimensions
-    //const parentDiv = document.getElementById('page-document');
-    let dimensions = {
-      //width: parentDiv.offsetWidth,
-      width,
-      height,
-      margins: 50,
-    };
-
-    dimensions.containerWidth = dimensions.width - dimensions.margins * 2;
-    dimensions.containerHeight = dimensions.height - dimensions.margins * 2;
-
-    //const d3 = loadable.lib(() => import('d3'));
-    // SELECTIONS
-    const svg = d3
-      .select(svgRef.current)
-      .attr('id', 'country_map')
-      //.classed("line-chart", true)
-      .attr('width', dimensions.width)
-      .attr('height', dimensions.height);
-    //console.log('SVG x-y', svg.getBBox());
-    /*
-    const container = svg
-      .append('g')
-      .classed('container', true)
-      .attr(
-        'transform',
-        `translate(${dimensions.margins}, ${dimensions.margins})`,
-      );
-      */
-
-    //console.log('cpath', cpath);
-    //console.log(fpath);
-    //console.log('Flags',flags);
-    //console.log('filtered', getFocusCountriesFeature(cpath));
-
-    window.countrySettings = cpath.features;
-
-    var opts = {
-      world: cpath.features,
-      svg: svg,
-      coordinates: {
-        x: 0,
-        y: 0,
-        width: dimensions.containerWidth,
-        height: dimensions.containerHeight,
-      },
-      focusCountries: {
-        names: getFocusCountryNames(),
-        feature: getFocusCountriesFeature(cpath),
-      },
-      zoom: 0.95,
-    };
-    renderCountriesBox(opts, d3, d3Geo);
-    // Draw Circle
-    //container.append("circle").attr("r", 25).style("color","blue");
-  }, [props.Data, d3, width, height, cpath, d3Geo]); // redraw chart if data changes
-
-  return <svg ref={svgRef} />;
-};
-
-export default compose(
-  clientOnly,
-  injectLazyLibs(['d3', 'd3Geo']),
-  withResponsiveContainer,
-  withCountriesData,
-)(CountryMapObservatoryView);
-
-// import loadable from '@loadable/component';
-//import * as d3 from 'd3';
-// import cpath from './euro-countries-simplified';
-//