@eeacms/volto-clms-theme 1.1.18 → 1.1.20

package/CHANGELOG.md

@@ -4,12 +4,24 @@ 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.1.20](https://github.com/eea/volto-clms-theme/compare/1.1.19...1.1.20) - 5 July 2023
+
+#### :rocket: New Features
+
+- feat: CLMS-2030 new accordions in dataset page [Mikel Larreategi - [`e8c7d05`](https://github.com/eea/volto-clms-theme/commit/e8c7d05a80e9f107786c531ce651eccf9ec10793)]
+
+#### :hammer_and_wrench: Others
+
+- open technical library edition link in another tab [ionlizarazu - [`b3ed346`](https://github.com/eea/volto-clms-theme/commit/b3ed346e3302d0f61b65db64a520f02ba7bdd95a)]
+- refactor less files and unify color use [ionlizarazu - [`e344f8d`](https://github.com/eea/volto-clms-theme/commit/e344f8d1c99d459f35eec292bcce4caec483c45f)]
+- from hash to search at CclVerticalTabsView [ionlizarazu - [`7b463ca`](https://github.com/eea/volto-clms-theme/commit/7b463caae5b1325a04457bd8ac497ff44d966580)]
+### [1.1.19](https://github.com/eea/volto-clms-theme/compare/1.1.18...1.1.19) - 3 July 2023
+
 ### [1.1.18](https://github.com/eea/volto-clms-theme/compare/1.1.17...1.1.18) - 3 July 2023
 
 #### :hammer_and_wrench: Others
 
 - lint [Mikel Larreategi - [`f828104`](https://github.com/eea/volto-clms-theme/commit/f82810407be009f416090d005a84175bc87c21fe)]
-- clms-2329 remove periodicity from calendar picker [Mikel Larreategi - [`9272a58`](https://github.com/eea/volto-clms-theme/commit/9272a580cdb11051a33832e2d1e4c738ca1a47e6)]
 ### [1.1.17](https://github.com/eea/volto-clms-theme/compare/1.1.16...1.1.17) - 30 June 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeFacet.jsx

@@ -1,5 +1,4 @@
 import 'react-input-range/lib/css/index.css';
-import './range.css';
 
 import React, { useState } from 'react';
 import { Checkbox, List } from 'semantic-ui-react';

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeParentFacet.jsx

@@ -1,5 +1,4 @@
 import 'react-input-range/lib/css/index.css';
-import './range.css';
 
 import React, { useState } from 'react';
 import { Checkbox, List } from 'semantic-ui-react';

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -1,5 +1,4 @@
 import 'react-input-range/lib/css/index.css';
-import './range.css';
 
 import React from 'react';
 

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeSpatialFacet.jsx

@@ -1,5 +1,4 @@
 import 'react-input-range/lib/css/index.css';
-import './range.css';
 
 import React from 'react';
 

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -60,7 +60,7 @@ const TabsComponent = (props) => {
                 <span>{title || defaultTitle}</span>
               ) : (
                 <NavLink
-                  to={'#' + tabHash}
+                  to={'?' + tabHash}
                   className="collapsed"
                   onClick={(e) => {
                     handleClick(

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/RoutingHOC.jsx

@@ -24,12 +24,12 @@ const RoutingHOC = (TabView) =>
         return { title: t[1].title, id: t[0] };
       });
       if (
-        window.location.hash.match(/.*([&|#]tab=.*)/) &&
-        window.location.hash.match(/.*([&|#]tab=.*)/).length > 1
+        window.location.search.match(/.*([&|?|#]tab=.*)/) &&
+        window.location.search.match(/.*([&|?|#]tab=.*)/).length > 1
       ) {
-        const hashMatch = window.location.hash
-          .match(/.*([&|#]tab=.*)/)[1]
-          .replace(/[&|#]tab=/, '');
+        const hashMatch = window.location.search
+          .match(/.*([&|?|#]tab=.*)/)[1]
+          .replace(/[&|?|#]tab=/, '');
         const result = tabsDict.filter((t) => slugify(t.title) === hashMatch);
         if (result.length > 0) {
           return result[0].id;

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -233,6 +233,119 @@ const DataSetInfoContent = (props) => {
                   </AnimateHeight>
                 </Accordion.Content>
               </Accordion>
+
+              {props.jrc_algorithm?.data &&
+                props.jrc_algorithm?.data !== '<p><br/><p>' &&
+                props.jrc_algorithm?.data !== '<p></p>' && (
+                  <Accordion fluid styled>
+                    <Accordion.Title
+                      as={'h2'}
+                      onClick={() => handleClick({ index: 98 })}
+                      active={activeIndex === 98}
+                      index={98}
+                      className={'accordion-title align-arrow-right'}
+                    >
+                      {activeIndex.includes(98) ? (
+                        <Icon
+                          name={iconName(data, titleIcons.opened)}
+                          size="24px"
+                        />
+                      ) : (
+                        <Icon
+                          name={iconName(data, titleIcons.closed)}
+                          size="24px"
+                        />
+                      )}
+                      <span>Algorithm</span>
+                    </Accordion.Title>
+                    <Accordion.Content active={activeIndex.includes(98)}>
+                      <AnimateHeight
+                        animateOpacity
+                        duration={500}
+                        height={'auto'}
+                      >
+                        <StringToHTML
+                          string={props.jrc_algorithm?.data || ''}
+                        />
+                      </AnimateHeight>
+                    </Accordion.Content>
+                  </Accordion>
+                )}
+
+              {props.jrc_quality?.data &&
+                props.jrc_quality?.data !== '<p><br/><p>' &&
+                props.jrc_quality?.data !== '<p></p>' && (
+                  <Accordion fluid styled>
+                    <Accordion.Title
+                      as={'h2'}
+                      onClick={() => handleClick({ index: 97 })}
+                      active={activeIndex === 97}
+                      index={97}
+                      className={'accordion-title align-arrow-right'}
+                    >
+                      {activeIndex.includes(97) ? (
+                        <Icon
+                          name={iconName(data, titleIcons.opened)}
+                          size="24px"
+                        />
+                      ) : (
+                        <Icon
+                          name={iconName(data, titleIcons.closed)}
+                          size="24px"
+                        />
+                      )}
+                      <span>Quality</span>
+                    </Accordion.Title>
+                    <Accordion.Content active={activeIndex.includes(97)}>
+                      <AnimateHeight
+                        animateOpacity
+                        duration={500}
+                        height={'auto'}
+                      >
+                        <StringToHTML string={props.jrc_quality?.data || ''} />
+                      </AnimateHeight>
+                    </Accordion.Content>
+                  </Accordion>
+                )}
+
+              {props.jrc_datalayers?.data &&
+                props.jrc_datalayers?.data !== '<p><br/><p>' &&
+                props.jrc_datalayers?.data !== '<p></p>' && (
+                  <Accordion fluid styled>
+                    <Accordion.Title
+                      as={'h2'}
+                      onClick={() => handleClick({ index: 96 })}
+                      active={activeIndex === 96}
+                      index={96}
+                      className={'accordion-title align-arrow-right'}
+                    >
+                      {activeIndex.includes(96) ? (
+                        <Icon
+                          name={iconName(data, titleIcons.opened)}
+                          size="24px"
+                        />
+                      ) : (
+                        <Icon
+                          name={iconName(data, titleIcons.closed)}
+                          size="24px"
+                        />
+                      )}
+                      <span>Datalayers</span>
+                    </Accordion.Title>
+                    <Accordion.Content active={activeIndex.includes(96)}>
+                      <AnimateHeight
+                        animateOpacity
+                        duration={500}
+                        height={'auto'}
+                      >
+                        <StringToHTML
+                          string={props.jrc_datalayers?.data || ''}
+                        />
+                      </AnimateHeight>
+                    </Accordion.Content>
+                  </Accordion>
+                )}
+
               {librariesPending && <Loader active inline="centered" />}
               {libraries?.length > 0 && (
                 <Accordion fluid styled>
@@ -280,6 +393,55 @@ const DataSetInfoContent = (props) => {
                   </Accordion.Content>
                 </Accordion>
               )}
+
+              {props.jrc_show_related_datasets && (
+                <Accordion fluid styled>
+                  <Accordion.Title
+                    as={'h2'}
+                    onClick={() => handleClick({ index: 95 })}
+                    active={activeIndex === 95}
+                    index={95}
+                    className={'accordion-title align-arrow-right'}
+                  >
+                    {activeIndex.includes(95) ? (
+                      <Icon
+                        name={iconName(data, titleIcons.opened)}
+                        size="24px"
+                      />
+                    ) : (
+                      <Icon
+                        name={iconName(data, titleIcons.closed)}
+                        size="24px"
+                      />
+                    )}
+                    <span>Related datasets</span>
+                  </Accordion.Title>
+                  <Accordion.Content active={activeIndex.includes(95)}>
+                    <AnimateHeight
+                      animateOpacity
+                      duration={500}
+                      height={'auto'}
+                    >
+                      <CclRelatedListingView
+                        id={'dataset-info-datasets'}
+                        properties={{ ...props }}
+                        data={{
+                          variation: 'CclCardsdoc',
+                          content_type: 'DataSet',
+                        }}
+                        associated_elements="dataset"
+                        searchParamsExecution={() => {
+                          const newIndex =
+                            activeIndex.indexOf(1) === -1
+                              ? [...activeIndex, 1]
+                              : activeIndex.filter((item) => item !== 1);
+                          setActiveIndex(newIndex);
+                        }}
+                      />
+                    </AnimateHeight>
+                  </Accordion.Content>
+                </Accordion>
+              )}
             </Segment>
           )}
         </div>

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -82,7 +82,7 @@ const FileCard = (props) => {
                   <Icon
                     name={pauseSVG}
                     size={50}
-                    color="#a0b128"
+                    color="olive"
                     title={'Queued'}
                   />
                 }
@@ -103,7 +103,7 @@ const FileCard = (props) => {
                   <Icon
                     name={packSVG}
                     size={50}
-                    color="#a0b128"
+                    color="olive"
                     title={'Finished correctly'}
                   />
                 }
@@ -117,7 +117,7 @@ const FileCard = (props) => {
                   <Icon
                     name={blockSVG}
                     size={50}
-                    color="#a0b128"
+                    color="olive"
                     title={'Cancelled'}
                   />
                 }

package/src/components/CLMSLoginView/CLMSLogin.jsx

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
 import { toPublicURL } from '@plone/volto/helpers/Url/Url';
-import './CLMSLogin.css';
 import { toBase64 } from '../CclUtils';
 
 /**

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -24,7 +24,6 @@ import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { postMeetingRegister } from '../../actions';
 import { CLMSRelatedItems } from '../CLMSRelatedItems';
 import { LightGalleryListing } from './CclLightGallery';
-import './meetingstyles.less';
 import { RegisterButtonReasons } from './utils';
 
 import jwtDecode from 'jwt-decode';

package/src/components/CLMSUseCasesView/usecases.less

@@ -1,7 +1,13 @@
 div.ui.celled.list.usecase-topic-values-list {
+  display: flex;
+  flex-wrap: wrap;
   padding-bottom: 1.8rem;
 }
 
+div.ui.celled.list.usecase-topic-values-list .item {
+  line-height: 1.6rem;
+}
+
 div.ui.celled.list.usecase-topic-values-list .item:first-child,
 div.ui.celled.list.usecase-other-values-list .item:first-child {
   border-left: none;

package/src/components/CclCard/CclCard.jsx

@@ -13,7 +13,6 @@ import { When } from '@eeacms/volto-clms-theme/components/CclWhen/CclWhen';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock';
-import './cards.less';
 
 import PropTypes from 'prop-types';
 
@@ -61,7 +60,12 @@ const DocCard = ({ card, url, showEditor, children }) => {
             <Link to={url}>{card?.title}</Link>
           )}
           {card?.['@type'] === 'TechnicalLibrary' && showEditor && (
-            <Link to={`${url}/edit`} className="technical-library-edit-link">
+            <Link
+              to={`${url}/edit`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="technical-library-edit-link"
+            >
               <VoltoIcon
                 name={penSVG}
                 size="12px"

package/src/components/CclDownloadTable/CclDownloadTable.jsx

@@ -20,7 +20,6 @@ import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 
-import './download-table.less';
 import { useSchema } from '../Widgets/SchemaCreatorWidget';
 
 import PropTypes from 'prop-types';

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -7,7 +7,6 @@ import config from '@plone/volto/registry';
 import { getRegistry } from '@eeacms/volto-clms-theme/actions';
 import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
 import { toBase64 } from '../CclUtils';
-import './ccl-login-modal.css';
 
 /**
  * Login Modal component doc.

package/src/components/CclModal/CclModal.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Segment, Modal } from 'semantic-ui-react';
-import './modal.less';
 import Draggable from 'react-draggable';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGripHorizontal } from '@fortawesome/free-solid-svg-icons';

package/src/components/CclTab/CclTabs.jsx

@@ -1,5 +1,3 @@
-import './CclTabs.less';
-
 import React, { useState } from 'react';
 
 import CclTab from './CclTab';

package/src/components/Widgets/DownloadableFilesTableWidget.jsx

@@ -4,7 +4,6 @@ import { useSchema } from './SchemaCreatorWidget';
 import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder/dist/index';
 import CclButton from '../CclButton/CclButton';
 import { Segment, Loader, Header, Divider } from 'semantic-ui-react';
-import './DownloadableFilesTableWidget.less';
 
 const orderKeysBy = (array, data) => {
   if (data) {

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -3,8 +3,6 @@
  * @module components/theme/Footer/Footer
  */
 
-import '@eeacms/volto-clms-theme/../theme/clms/css/footer.css';
-
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -5,8 +5,6 @@
  * @module components/theme/Header/Header
  */
 
-import '@eeacms/volto-clms-theme/../theme/clms/css/header.css';
-
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Logo, Navigation, SearchWidget } from '@plone/volto/components';
 import React, { Component, useEffect } from 'react';

package/theme/{clms/css → site/extras}/block-form.less

@@ -11,35 +11,35 @@ div.form.block {
   .ui.form input[type='text']:focus,
   .ui.form input[type='file']:focus,
   .ui.form input[type='url']:focus {
-    border-color: #a0b128;
-    color: #a0b128;
+    border-color: @clmsGreen;
+    color: @clmsGreen;
   }
 
   .ui.form textarea:focus {
-    border-color: #a0b128;
+    border-color: @clmsGreen;
   }
 
   .label-file-widget-input {
     display: inline-block;
     padding: 0.6rem 3rem;
     border: 1px solid transparent;
-    border-color: #a0b128;
+    border-color: @clmsGreen;
     margin-top: 20px;
     border-radius: 0px;
-    color: #a0b128;
+    color: @clmsGreen;
     cursor: pointer;
     opacity: 1;
   }
 
   .label-file-widget-input:hover {
-    background-color: #a0b128;
+    background-color: @clmsGreen;
     color: white;
   }
 
   .ui.primary.button {
     padding: 0.6rem 3rem;
     border: 1px solid transparent;
-    background-color: #a0b128;
+    background-color: @clmsGreen;
     border-radius: 0px;
     color: white;
     font-size: 1rem;
@@ -51,9 +51,9 @@ div.form.block {
   }
 
   .ui.primary.button:hover {
-    border-color: #a0b128;
+    border-color: @clmsGreen;
     background-color: white;
-    color: #a0b128;
+    color: @clmsGreen;
   }
 
   .dropzone-text {

package/{src/components/CclCard → theme/site/extras}/cards.less

@@ -7,7 +7,7 @@
 }
 
 .card-line:not(:last-of-type) {
-  border-bottom: solid 1px #a0b12833;
+  border-bottom: solid 1px fade(@clmsGreen, 20%);
 }
 
 .card-line.hide-line {
@@ -17,7 +17,7 @@
 .card-line .card-image {
   width: 10rem;
   height: 8rem;
-  border: solid 1px #a0b12833;
+  border: solid 1px fade(@clmsGreen, 20%);
   margin-right: 1rem;
 }
 
@@ -37,7 +37,7 @@
 
 .card-title {
   margin-bottom: 1rem;
-  color: #a0b128;
+  color: @clmsGreen;
   font-size: 1.125rem;
   font-weight: bold;
   text-decoration: none;
@@ -61,7 +61,7 @@
   width: 100%;
   padding: 0;
   margin-bottom: 1rem;
-  background-color: #a0b1280f;
+  background-color: fade(@clmsGreen, 5%);
 }
 
 .card-file {
@@ -70,13 +70,13 @@
   width: 100%;
   padding: 1.5rem;
   margin-bottom: 1rem;
-  background-color: #a0b1280f;
+  background-color: fade(@clmsGreen, 5%);
 }
 
 .card-file .card-icon i {
   width: auto;
   margin-right: 1rem;
-  color: #a0b128;
+  color: @clmsGreen;
   font-size: 3rem;
   line-height: 1;
   vertical-align: middle;
@@ -102,7 +102,7 @@
 .card-line-color .card-image {
   width: 12rem;
   height: 12rem;
-  border: solid 1px #a0b12833;
+  border: solid 1px fade(@clmsGreen, 20%);
   margin: 0;
 }
 
@@ -140,12 +140,12 @@
   flex-direction: column;
   flex-wrap: nowrap;
   margin-bottom: 1rem;
-  background-color: #a0b1280f;
+  background-color: fade(@clmsGreen, 5%);
 }
 
 .card-block .card-block-image {
   height: 12rem;
-  border: solid 1px #a0b12833;
+  border: solid 1px fade(@clmsGreen, 20%);
 }
 
 .card-block img {
@@ -184,12 +184,12 @@
   flex-direction: column;
   flex-wrap: nowrap;
   margin-bottom: 1rem;
-  background-color: #a0b1280f;
+  background-color: fade(@clmsGreen, 5%);
 }
 
 .card-threeColumns .card-threeColumns-image {
   height: 12rem;
-  border: solid 1px #a0b12833;
+  border: solid 1px fade(@clmsGreen, 20%);
 }
 
 .card-threeColumns img {
@@ -234,7 +234,7 @@
 
 .card-news:not(:last-of-type) {
   padding-bottom: 1rem;
-  border-bottom: solid 1px #a0b12833;
+  border-bottom: solid 1px fade(@clmsGreen, 20%);
   margin-bottom: 1rem;
 }
 
@@ -242,7 +242,7 @@
   width: 10rem;
   height: 10rem;
   flex-shrink: 0;
-  border: solid 1px #a0b12833;
+  border: solid 1px fade(@clmsGreen, 20%);
   margin-right: 1.5rem;
 }
 
@@ -300,7 +300,7 @@
 
 .card-event:not(:last-of-type) {
   padding-bottom: 1rem;
-  border-bottom: solid 1px #a0b12833;
+  border-bottom: solid 1px fade(@clmsGreen, 20%);
   margin-bottom: 1rem;
 }
 
@@ -308,7 +308,7 @@
   width: 10rem;
   height: 10rem;
   flex-shrink: 0;
-  border: solid 1px #a0b12833;
+  border: solid 1px fade(@clmsGreen, 20%);
   margin-right: 1.5rem;
 }
 
@@ -374,7 +374,7 @@
 .card-event-when-title,
 .card-event-where-title {
   margin-bottom: 0.5em;
-  color: #a0b128;
+  color: @clmsGreen;
   font-weight: bold;
 }
 
@@ -394,7 +394,7 @@
 }
 
 .card-doc:not(:last-of-type) {
-  border-bottom: solid 1px #a0b12833;
+  border-bottom: solid 1px fade(@clmsGreen, 20%);
 }
 
 .card-doc-header {
@@ -404,7 +404,7 @@
 
 .card-doc-title {
   margin-bottom: 1rem;
-  color: #a0b128;
+  color: @clmsGreen;
   font-size: 1.125rem;
   font-weight: bold;
 }
@@ -419,7 +419,7 @@
 /* Work opportunities */
 .card-work {
   padding: 2rem;
-  background: #a0b1280f;
+  background: fade(@clmsGreen, 5%);
 }
 
 .card-work:not(:last-of-type) {