Merge pull request #127 from eea/develop

Release
eea · May 29, 2024 · 082cb44 · 082cb44
2 parents 6d3e680 + c80330c
commit 082cb44
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 225 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,16 @@ 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).
 
+### [8.1.0](https://github.com/eea/volto-block-data-figure/compare/8.0.3...8.1.0) - 29 May 2024
+
+#### :rocket: New Features
+
+- feat: Change download design to be the same as other blocks - refs 270423 [dobri1408 - [`c52dab9`](https://github.com/eea/volto-block-data-figure/commit/c52dab978ae24cee3a95374a0067bee49b9cc99e)]
+
+#### :house: Internal changes
+
+- chore: Release 8.1.0 [alin - [`42d4f3d`](https://github.com/eea/volto-block-data-figure/commit/42d4f3dcac34511b016334238881c18c75d25b8a)]
+
 ### [8.0.3](https://github.com/eea/volto-block-data-figure/compare/8.0.2...8.0.3) - 22 May 2024
 
 #### :house: Internal changes
@@ -79,19 +89,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`1ae6ddf`](https://github.com/eea/volto-block-data-figure/commit/1ae6ddf355e28e6cdf00fc59ab46ca92f0914c55)]
 
 #### :hammer_and_wrench: Others
 
 - fix bug when adding a new indicator ref.current is null [Dobricean Ioan Dorian - [`2a91c98`](https://github.com/eea/volto-block-data-figure/commit/2a91c9827a5f8880c9c23d1b7a11367f522f2643)]
 - fix tests [Miu Razvan - [`57f4139`](https://github.com/eea/volto-block-data-figure/commit/57f41394f21768909ece4ddf4f0b0fcca0eb109d)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`3b98958`](https://github.com/eea/volto-block-data-figure/commit/3b98958593c4d947a49bdd5813572bd35803ff78)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`3beff7f`](https://github.com/eea/volto-block-data-figure/commit/3beff7fc78ef45364cf8edb6417de5c047e08661)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`661cc8e`](https://github.com/eea/volto-block-data-figure/commit/661cc8e5913342e4eb70e96cda30b9b229d37875)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`3133f3c`](https://github.com/eea/volto-block-data-figure/commit/3133f3c8eeab7bb0a107ab5674969449d6c41a42)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`215606d`](https://github.com/eea/volto-block-data-figure/commit/215606dc39fd60de3f94f1618f1272cdc0989e03)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`5895f67`](https://github.com/eea/volto-block-data-figure/commit/5895f671b1cbf4d3921d7a7a1e17cd8e4f92f95b)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`77748f3`](https://github.com/eea/volto-block-data-figure/commit/77748f335825361e2c5ee7fa20d74dd6b470b2d9)]
 ### [6.0.5](https://github.com/eea/volto-block-data-figure/compare/6.0.4...6.0.5) - 26 October 2023
 
 #### :bug: Bug Fixes
@@ -123,7 +125,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] update to volto 16 [valentinab25 - [`c97758e`](https://github.com/eea/volto-block-data-figure/commit/c97758ec58953f7246f735012452fbbe77a5b58a)]
 ### [6.0.2](https://github.com/eea/volto-block-data-figure/compare/6.0.1...6.0.2) - 29 September 2023
 
 #### :house: Internal changes
@@ -251,7 +252,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`de1cae6`](https://github.com/eea/volto-block-data-figure/commit/de1cae6f798bfad045ce3be72083b4960e74bf96)]
 ### [4.4.1](https://github.com/eea/volto-block-data-figure/compare/4.4.0...4.4.1) - 9 September 2021
 
 ### [4.4.0](https://github.com/eea/volto-block-data-figure/compare/4.3.0...4.4.0) - 3 September 2021
@@ -561,7 +561,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - allow editors to add multiple temporal coverage values [nileshgulia1 - [`1ca7874`](https://github.com/eea/volto-block-data-figure/commit/1ca787482452d5ad504332f9a8d248088a575309)]
 - fix tests: eslint [nileshgulia1 - [`17735fe`](https://github.com/eea/volto-block-data-figure/commit/17735fea410198a8d724a423d2ee290a40b4ea43)]
 - validate urls to not use cors-proxy when its not enabled [nileshgulia1 - [`887db32`](https://github.com/eea/volto-block-data-figure/commit/887db328787e45ac9041534e9bb591e3a721e684)]
-- yarn prettier [Alin Voinea - [`fa29138`](https://github.com/eea/volto-block-data-figure/commit/fa2913855fde22e6da0bdc19710e0e8ab7603def)]
 ### [0.1.7](https://github.com/eea/volto-block-data-figure/compare/0.1.6...0.1.7) - 9 November 2020
 
 #### :hammer_and_wrench: Others
@@ -661,5 +660,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - add Svg in edit to allow adding maps as svg [nileshgulia1 - [`e909057`](https://github.com/eea/volto-block-data-figure/commit/e909057edb545151e265d1a9bde02a8e74567d11)]
 - Cleanup uploaded SVG to make them responsive [Alin Voinea - [`7a210b7`](https://github.com/eea/volto-block-data-figure/commit/7a210b7229d5f8882f494d57b6a65cd79d90681a)]
 - DataFigure Block based on Volto Image [Alin Voinea - [`b598e21`](https://github.com/eea/volto-block-data-figure/commit/b598e211856f4d56f2627bd89e070c812ef4b855)]
-- yarn bootstrap [Alin Voinea - [`11f2dc5`](https://github.com/eea/volto-block-data-figure/commit/11f2dc5a5c8b698b62b7c55b77bd7a7d63cf61a8)]
 - Initial commit [Alin Voinea - [`4813ecb`](https://github.com/eea/volto-block-data-figure/commit/4813ecbf02d0d4ae5e4cf8de0006eeb997bd790a)]
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-data-figure",
-  "version": "8.0.3",
+  "version": "8.1.0",
   "description": "volto-block-data-figure: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/manage/Blocks/DataFigure/DownloadData.jsx b/src/components/manage/Blocks/DataFigure/DownloadData.jsx
@@ -1,87 +1,89 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getParentUrl } from '@plone/volto/helpers';
-import { Segment, Menu, Sidebar, Header, List } from 'semantic-ui-react';
+import { Popup } from 'semantic-ui-react';
+import cx from 'classnames';
+import { Header, List } from 'semantic-ui-react';
 import './less/public.less';
 
 const DownloadData = ({ data, visible, onHide }) => {
   const { downloadData } = data.metadata || {};
   const ref = React.useRef();
+  const [open, setOpen] = React.useState(false);
   return (
-    <Sidebar
-      as={Menu}
-      className="metadata-sidebar"
-      animation={'overlay'}
-      direction={'left'}
-      vertical
-      onHide={onHide}
-      visible={visible}
-      onShow={() => {
-        if (ref.current) ref.current.focus();
+    <Popup
+      popper={{ id: 'vis-toolbar-popup', className: 'download-popup' }}
+      position="bottom left"
+      on="click"
+      open={open}
+      onClose={() => {
+        setOpen(false);
       }}
-      width="very wide"
-    >
-      <Segment.Group>
-        <Segment attached>
-          <Header style={{ color: '#517776' }} as="h2">
-            Download
-          </Header>
-        </Segment>
-        {
-          //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          <div ref={ref} tabIndex={0}>
-            {downloadData && data.figureType === 'DavizVisualization' ? (
-              <Segment secondary attached>
-                <Header as="h5">Formats suitable for human consumption</Header>
-                <List horizontal className="download-data">
-                  <List.Item href={downloadData.html}>HTML</List.Item>
-                  <List.Item href={downloadData.csv}>CSV</List.Item>
-                  <List.Item href={downloadData.tsv}>TSV</List.Item>
-                </List>
-                <Header as="h5">
-                  Formats suitable for machine-to-machine communication
-                </Header>
-                <List horizontal className="download-data">
-                  <List.Item href={downloadData.json}>JSON</List.Item>
-                  <List.Item href={downloadData.exhibit}>
-                    Exhibit JSON
-                  </List.Item>
-                  <List.Item href={downloadData.xml}>XML</List.Item>
-                  <List.Item href={downloadData.xmlSchema}>
-                    XML with Schema
-                  </List.Item>
-                </List>
-              </Segment>
-            ) : data.figureType === 'EEAFigure' ? (
-              <Segment secondary attached>
-                <Header as="h5">Image formats</Header>
-                <List horizontal relaxed className="download-data">
-                  {downloadData.map((item) => {
-                    let title, url;
-                    if (item.includes('zoom')) {
-                      title = 'original';
-                      url = getParentUrl(item) + '/at_download/file';
-                    } else {
-                      title = item.split('.').pop().toUpperCase();
-                      url = item;
-                    }
-                    return (
-                      <List.Item key={url} href={url}>
-                        {title.toUpperCase()}
-                      </List.Item>
-                    );
-                  })}
-                </List>
-              </Segment>
-            ) : (
-              <Segment>
-                <Header as="h5">Data not available</Header>
-              </Segment>
-            )}
-          </div>
-        }
-      </Segment.Group>
-    </Sidebar>
+      onOpen={() => {
+        setOpen(true);
+      }}
+      trigger={
+        <div className="download">
+          <button className={cx('trigger-button', { open })}>
+            <i className="ri-download-fill" />
+            <span>Download</span>
+          </button>
+        </div>
+      }
+      content={
+        //eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        <div ref={ref} tabIndex={0}>
+          {downloadData && data.figureType === 'DavizVisualization' ? (
+            <div>
+              <Header as="h5">Formats suitable for human consumption</Header>
+              <List horizontal className="download-data">
+                <List.Item href={downloadData.html}>HTML</List.Item>
+                <List.Item href={downloadData.csv}>CSV</List.Item>
+                <List.Item href={downloadData.tsv}>TSV</List.Item>
+              </List>
+              <Header as="h5">
+                Formats suitable for machine-to-machine communication
+              </Header>
+              <List horizontal className="download-data">
+                <List.Item href={downloadData.json}>JSON</List.Item>
+                <List.Item href={downloadData.exhibit}>Exhibit JSON</List.Item>
+              </List>
+              <List horizontal className="download-data">
+                <List.Item href={downloadData.xml}>XML</List.Item>
+                <List.Item href={downloadData.xmlSchema}>
+                  XML with Schema
+                </List.Item>
+              </List>
+            </div>
+          ) : data.figureType === 'EEAFigure' ? (
+            <div>
+              <Header as="h5">Image formats</Header>
+              <List horizontal relaxed className="download-data">
+                {downloadData.map((item) => {
+                  let title, url;
+                  if (item.includes('zoom')) {
+                    title = 'original';
+                    url = getParentUrl(item) + '/at_download/file';
+                  } else {
+                    title = item.split('.').pop().toUpperCase();
+                    url = item;
+                  }
+                  return (
+                    <List.Item key={url} href={url}>
+                      {title.toUpperCase()}
+                    </List.Item>
+                  );
+                })}
+              </List>
+            </div>
+          ) : (
+            <div>
+              <Header as="h5">Data not available</Header>
+            </div>
+          )}
+        </div>
+      }
+    />
   );
 };