@eeacms/volto-eea-map 0.1.35 → 1.0.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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).
 
+### [1.0.0](https://github.com/eea/volto-eea-map/compare/0.1.35...1.0.0) - 15 June 2023
+
+#### :bug: Bug Fixes
+
+- fix: fix style #254131 [Andrei Grigore - [`e0d1bf6`](https://github.com/eea/volto-eea-map/commit/e0d1bf6092d07ac0d2f98ff6febc9c01d97ce654)]
+- fix: fix style #254131 [Andrei Grigore - [`2361110`](https://github.com/eea/volto-eea-map/commit/2361110243bc42d15ebcde736a811ad9260b92cb)]
+- fix: fix style #254131 [Andrei Grigore - [`c846eb9`](https://github.com/eea/volto-eea-map/commit/c846eb9cbe1376f3c8c11b77a70dc123230bb6ec)]
+- fix: fix style #254131 [Andrei Grigore - [`a6b962d`](https://github.com/eea/volto-eea-map/commit/a6b962d007d0d32c1ca8e7304ac75ce58e41c173)]
+
+#### :house: Internal changes
+
+- chore: increase version  #254131 [Andrei Grigore - [`ec022cc`](https://github.com/eea/volto-eea-map/commit/ec022cc3b3d0c5e4b9158e7f28cf35edc5654600)]
+
 ### [0.1.35](https://github.com/eea/volto-eea-map/compare/0.1.34...0.1.35) - 14 June 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.35",
+  "version": "1.0.0",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -9,7 +9,6 @@ import { getContent } from '@plone/volto/actions';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import Webmap from '@eeacms/volto-eea-map/components/Webmap';
 import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
-import '@eeacms/volto-eea-map/styles/map.css';
 
 import { Schema } from './Schema';
 import {

package/src/components/ExtraViews.jsx

@@ -1,47 +1,7 @@
 import React from 'react';
-import { UniversalLink, Icon } from '@plone/volto/components';
-
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-
-import rightKeySVG from '@plone/volto/icons/right-key.svg';
-import downKeySVG from '@plone/volto/icons/down-key.svg';
 import LegendView from '@eeacms/volto-eea-map/components/LegendView';
-
-const SourcesWidget = ({ data }) => {
-  const [expand, setExpand] = React.useState(true);
-
-  return (
-    <div>
-      <button className="legend-action" onClick={() => setExpand(!expand)}>
-        <h3>
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Sources:
-        </h3>
-      </button>
-      {expand && (
-        <ul>
-          {data.map((param, i) => (
-            <li key={i}>
-              <div className="map_source_param_container">
-                <UniversalLink className="map_source_title" href={param.link}>
-                  {param.title}
-                </UniversalLink>
-                ,
-                <span className="map_source_description">
-                  {param.organisation}
-                </span>
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
+import Sources from './Sources';
 
 const ExtraViews = ({ data }) => {
   const {
@@ -58,17 +18,7 @@ const ExtraViews = ({ data }) => {
       {show_legend && map_data && (
         <LegendView data={map_data} show_viewer={show_viewer} />
       )}
-      {show_sources && (
-        <>
-          {data_provenance &&
-          data_provenance.data &&
-          data_provenance.data.length > 0 ? (
-            <SourcesWidget data={data_provenance.data} />
-          ) : (
-            <p>Data provenance is not set for visualization used or page</p>
-          )}
-        </>
-      )}
+      {show_sources && <Sources sources={data_provenance?.data} />}
       {description && serializeNodes(description)}
     </div>
   );

package/src/components/LegendView.jsx

@@ -116,14 +116,14 @@ const LegendView = (props) => {
     <>
       <div className="legend-container">
         <button className="legend-action" onClick={() => setExpand(!expand)}>
-          <h3 role="presentation" className="legend-title">
-            <Icon
-              name={expand ? downKeySVG : rightKeySVG}
-              title={expand ? 'Collapse' : 'Expand'}
-              size="17px"
-            />
-            Legend:
-          </h3>
+          {/* <h3 role="presentation" className="legend-title"> */}
+          <Icon
+            name={expand ? downKeySVG : rightKeySVG}
+            title={expand ? 'Collapse' : 'Expand'}
+            size="17px"
+          />
+          Legend:
+          {/* </h3> */}
         </button>
         <Grid columns={legendColumns}>
           {(!map_layers || map_layers.length === 0) && (

package/src/components/Sources.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const Source = ({ source }) => {
+  if (source.chart_source_link && source.chart_source) {
+    return <Link href={source.chart_source_link}>{source.chart_source}</Link>;
+  }
+  if (source.chart_source) {
+    return <span>{source.chart_source}</span>;
+  }
+  return (
+    <>
+      <Link className="embed-sources-param-title" href={source.link}>
+        {source.title}
+      </Link>
+      ,<span style={{ marginLeft: '5px' }}>{source.organisation}</span>
+    </>
+  );
+};
+
+const SourcesWidget = ({ sources }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  return (
+    <div className="eea-map-sources-container">
+      <Popup
+        content={
+          sources?.length ? (
+            <ol className="eea-map-sources-list">
+              {sources?.map((source, index) => {
+                return (
+                  <li key={index}>
+                    <Source source={source} />
+                  </li>
+                );
+              })}
+            </ol>
+          ) : (
+            <p>Data provenance is not set for this visualization.</p>
+          )
+        }
+        position="bottom left"
+        popper={{ id: 'eea-map-sources-popup' }}
+        trigger={
+          <button className={cx('eea-map-sources-button', { expanded })}>
+            Sources
+          </button>
+        }
+        on="click"
+        onClose={() => {
+          setExpanded(false);
+        }}
+        onOpen={() => {
+          setExpanded(true);
+        }}
+      />
+    </div>
+  );
+};
+
+export default SourcesWidget;

package/src/index.js

@@ -14,6 +14,8 @@ import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidge
 import { data_visualizations } from './middlewares';
 import * as addonReducers from './reducers';
 
+import './less/global.less';
+
 export default (config) => {
   config.settings.allowed_cors_destinations = [
     ...(config.settings.allowed_cors_destinations || []),

package/src/{styles/map.css → less/global.less}

@@ -1,3 +1,21 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+/* Enables customization of addons */
+.loadAddonOverrides() {
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.overrides';
+}
+
+/* Helper to load variables */
+.loadAddonVariables() {
+  @import (optional) '@{addonelement}.variables';
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.variables';
+}
+
+@import './variables.less';
+
+// TODO: pull out colors and dimensions into variables
 .map-edit-container {
   display: flex;
 }
@@ -162,6 +180,8 @@
 }
 
 .legend-container {
+  display: flex;
+  flex-direction: column;
   margin: 15px 0;
 }
 
@@ -179,10 +199,20 @@
 }
 
 .legend-action {
-  padding: 10px 0;
+  z-index: 22;
+  display: inline-flex;
+  align-items: center;
+  padding-bottom: 3px;
   border: none;
   background: transparent;
+  background-color: transparent;
+  color: #3d5265;
   cursor: pointer;
+  font-weight: bold;
+
+  &:hover {
+    color: @secondaryColor;
+  }
 }
 
 .map-number-input {
@@ -195,6 +225,46 @@
   color: green;
 }
 
+/* sources */
+
+.eea-map-sources-list {
+  margin: 0;
+  list-style: decimal inside;
+  padding-inline-start: 0;
+}
+
+#eea-map-sources-popup .ui.popup {
+  min-width: 600px;
+  background-color: #f9f9f9;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+
+.eea-map-sources-button {
+  display: inline-flex;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 3px;
+  border: none;
+  background-color: transparent;
+  color: @textColor;
+  cursor: pointer;
+  font-weight: bold;
+
+  .icon {
+    margin-left: 0.5rem;
+  }
+
+  &:hover {
+    color: @secondaryColor;
+  }
+
+  &.expanded {
+    padding-bottom: 0;
+    border-bottom: 3px solid @secondaryColor;
+    color: @secondaryColor;
+  }
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;
@@ -212,4 +282,9 @@
     max-width: 0.2cm;
     height: 0.2cm;
   }
+
+  .eea-map-sources-container,
+  #eea-map-sources-popup {
+    display: none;
+  }
 }

package/src/less/variables.less

@@ -0,0 +1,5 @@
+@type: extra;
+
+@element: custom;
+
+@grey-1: #f9f9f9;