@eeacms/volto-arcgis-block 0.1.83 → 0.1.85

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.1.85](https://github.com/eea/volto-arcgis-block/compare/0.1.84...0.1.85) - 10 January 2023
+
+### [0.1.84](https://github.com/eea/volto-arcgis-block/compare/0.1.83...0.1.84) - 28 December 2022
+
+#### :hammer_and_wrench: Others
+
+- Style lint applied [masanchez85 - [`5635db5`](https://github.com/eea/volto-arcgis-block/commit/5635db5b49669c47df08ce611f54753ab5494f4e)]
 ### [0.1.83](https://github.com/eea/volto-arcgis-block/compare/0.1.82...0.1.83) - 22 December 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/MenuWidget.jsx

@@ -34,6 +34,7 @@ export const AddCartItem = ({
   const [message, setMessage] = useState(0);
   const [showMessage] = useState(false);
   const [modal, setModal] = useState(false);
+  const [loginUrl] = React.useState('');
 
   const checkArea = (e) => {
     let check = document.querySelector('.area-panel input:checked').value;
@@ -183,7 +184,7 @@ export const AddCartItem = ({
     closeModal(e);
   };
 
-  const showLogin = (e) => {
+  /*const showLogin = (e) => {
     e.stopPropagation();
     document.querySelector('.login-panel').style.display = 'block';
     let left = e.currentTarget.offsetLeft + 48;
@@ -196,7 +197,7 @@ export const AddCartItem = ({
       e.currentTarget.closest('.ccl-expandable__button').offsetHeight / 2 -
       document.querySelector('.login-panel').offsetHeight / 2;
     document.querySelector('.login-panel').style.top = top + 'px';
-  };
+  };*/
 
   return (
     <>
@@ -231,7 +232,7 @@ export const AddCartItem = ({
             Cancel
           </button>
         </div>
-      ) : (
+      ) : isLoggedIn ? ( // If isLoggedIn == true and user clicks download
         <>
           <Modal
             size="tiny"
@@ -276,18 +277,6 @@ export const AddCartItem = ({
                         </p>
                       </li>
                       <br />
-                      <li>
-                        <p>
-                          If you would like to download data for your area of
-                          interest and for the selected time interval, please
-                          follow this{' '}
-                          <UniversalLink
-                            href={dataset.DatasetURL + '/download-by-area'}
-                          >
-                            link.
-                          </UniversalLink>
-                        </p>
-                      </li>
                     </>
                   ) : (
                     <li>
@@ -353,10 +342,110 @@ export const AddCartItem = ({
               <span
                 className={'map-menu-icon map-menu-icon-login'}
                 onClick={(e) => {
-                  isLoggedIn ? showModal(e) : showLogin(e);
+                  showModal(e);
                 }}
                 onKeyDown={(e) => {
-                  isLoggedIn ? showModal(e) : showLogin(e);
+                  showModal(e);
+                }}
+                tabIndex="0"
+                role="button"
+              >
+                <FontAwesomeIcon
+                  className={isLoggedIn ? '' : ' locked'}
+                  icon={['fas', 'download']}
+                />
+                {!isLoggedIn && <FontAwesomeIcon icon={['fas', 'lock']} />}
+              </span>
+            }
+            content="Download"
+            {...popupSettings}
+          />
+        </>
+      ) : (
+        // If isLoggedIn == false and user clicks download
+        <>
+          <Modal
+            size="tiny"
+            onClose={() => closeModal()}
+            onOpen={() => showModal()}
+            open={modal}
+            className="modal-clms-container"
+          >
+            <div className="modal-close modal-clms-close">
+              <span
+                className="ccl-icon-close"
+                aria-label="Close"
+                onClick={(e) => closeModal(e)}
+                onKeyDown={(e) => closeModal(e)}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <Modal.Content>
+              <div className="content">
+                <div className="modal-login-title">
+                  This website uses EU Login for user authentication.
+                </div>
+                <div className="modal-login-text">
+                  <p>
+                    {' '}
+                    EU Login, the European Commission Authentication Service,
+                    enables you to access various web applications centrally
+                    using the same e-mail and password. You can read more{' '}
+                    <UniversalLink
+                      openLinkInNewTab
+                      href="https://ecas.ec.europa.eu/cas/about.html"
+                    >
+                      here
+                    </UniversalLink>
+                    .
+                  </p>
+                  <p>
+                    {' '}
+                    If you have EU Login account, please click 'Login using EU
+                    Login'.
+                  </p>
+                  <p>
+                    If you don't have EU Login account, please follow this{' '}
+                    <UniversalLink
+                      openLinkInNewTab
+                      href="https://ecas.ec.europa.eu/cas/eim/external/register.cgi"
+                    >
+                      link
+                    </UniversalLink>{' '}
+                    to create it.
+                  </p>
+                  <p>
+                    If you have other questions, please contact our
+                    <UniversalLink openLinkInNewTab href="/en/service-desk">
+                      {' '}
+                      Service desk
+                    </UniversalLink>
+                    .
+                  </p>
+                </div>
+              </div>
+            </Modal.Content>
+            <Modal.Actions>
+              <div className="modal-buttons">
+                <a
+                  href={loginUrl || '#'}
+                  className="ccl-button ccl-button-green"
+                >
+                  Login using EU Login
+                </a>
+              </div>
+            </Modal.Actions>
+          </Modal>
+          <Popup
+            trigger={
+              <span
+                className={'map-menu-icon map-menu-icon-login'}
+                onClick={(e) => {
+                  showModal(e);
+                }}
+                onKeyDown={(e) => {
+                  showModal(e);
                 }}
                 tabIndex="0"
                 role="button"
@@ -377,7 +466,7 @@ export const AddCartItem = ({
   );
 };
 
-export const CheckLogin = () => {
+/*export const CheckLogin = () => {
   const { isLoggedIn } = useCartState();
   return (
     <>
@@ -400,7 +489,7 @@ export const CheckLogin = () => {
       )}
     </>
   );
-};
+};*/
 
 export const TouchScreenPopup = () => {
   return (
@@ -2665,17 +2754,6 @@ class MenuWidget extends React.Component {
             <span className="opacity-label right">100 %</span>
           </div>
         </div>
-        <div className="login-panel">
-          <div
-            className="esri-icon-close"
-            id="login_close"
-            role="button"
-            onClick={() => this.closeLogin()}
-            onKeyDown={() => this.closeLogin()}
-            tabIndex="0"
-          ></div>
-          {!this.props.download && <CheckLogin />}
-        </div>
         <div className="touchScreenPopup-panel">
           <div
             className="esri-icon-close"

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -162,7 +162,7 @@ class TimesliderWidget extends React.Component {
       view: this.props.view,
       container: document.querySelector('.timeslider-panel'),
       timeVisible: true,
-      mode: this.props.download ? 'time-window' : 'instant',
+      mode: /*this.props.download ? 'time-window' : 'instant'*/ 'time-window',
       loop: false,
       labelFormatFunction: (value, type, element, layout) => {
         if (!this.TimesliderWidget.fullTimeExtent) {
@@ -186,9 +186,10 @@ class TimesliderWidget extends React.Component {
         }
       },
       values: this.props.time.start
-        ? this.props.download
+        ? /*this.props.download
           ? [new Date(this.props.time.start), new Date(this.props.time.end)]
-          : [new Date(this.props.time.start)]
+          : [new Date(this.props.time.start)]*/
+          [new Date(this.props.time.start), new Date(this.props.time.end)]
         : null,
     });
     this.props.view.ui.add(this.container.current, 'bottom-right');
@@ -224,6 +225,8 @@ class TimesliderWidget extends React.Component {
               this.props.time.dataset.setAttribute('time-start', start);
               this.props.time.dataset.setAttribute('time-end', end);
             }
+            /*this.props.time.dataset.setAttribute('time-start', start);
+            this.props.time.dataset.setAttribute('time-end', end);*/
           });
         } else {
           let serviceType = '';
@@ -301,6 +304,8 @@ class TimesliderWidget extends React.Component {
                   this.props.time.dataset.setAttribute('time-start', start);
                   this.props.time.dataset.setAttribute('time-end', end);
                 }
+                /*this.props.time.dataset.setAttribute('time-start', start);
+                this.props.time.dataset.setAttribute('time-end', end);*/
                 if (this.layer.type === 'wmts') {
                   this.layer.customParameters = {};
                   this.layer.customParameters['TIME'] =

package/src/components/MapViewer/css/ArcgisMap.css

@@ -809,7 +809,7 @@
   right: 0;
   display: none;
   margin: 0.5rem;
-  color: black;
+  color: #a0b128;
   cursor: pointer;
 }
 
@@ -829,6 +829,47 @@
   display: none;
 }
 
+.esri-time-slider__mode--time-window .esri-slider__segment-0,
+.esri-time-slider__mode--time-window .esri-slider__segment-1,
+.esri-time-slider__mode--time-window .esri-slider__segment-2 {
+  background-color: #c5c5c5 !important;
+}
+
+.esri-slider__thumb {
+  border-color: #a0b128 !important;
+  outline: none !important;
+}
+
+.esri-slider__thumb:hover {
+  border-color: #7c8921 !important;
+}
+
+.esri-widget--button {
+  overflow: visible !important;
+  width: 36px !important;
+  height: 36px !important;
+  border: none !important;
+  background-color: rgba(160, 177, 40, 0.8) !important;
+  box-shadow: none !important;
+  color: #fff !important;
+  font-size: 18px !important;
+  line-height: 1.1rem !important;
+  outline: none !important;
+}
+
+.esri-widget--button:hover {
+  background-color: #7c8921 !important;
+  color: white !important;
+}
+
+.esri-time-slider__slider {
+  background-color: rgba(160, 177, 40, 0.058823529411764705) !important;
+}
+
+.esri-time-slider__slider .esri-slider {
+  background-color: transparent !important;
+}
+
 /* Scale */
 .esri-scale-bar {
   z-index: 0;
@@ -1055,3 +1096,30 @@ input[type='range']::-ms-track {
   font-size: 0.875rem;
   text-align: center;
 }
+
+/* Privacy protection tooltip */
+.ui.primary.buttons .button,
+.ui.primary.button {
+  background-color: #a0b128 !important;
+  background-image: none;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+.privacy-toggle .ui.toggle.checkbox input:checked ~ label:before {
+  background-color: #a0b128 !important;
+}
+
+.privacy-toggle .ui.checked.toggle.checkbox input:checked ~ label:before {
+  background-color: #a0b128 !important;
+}
+
+.ui.checkbox input:checked ~ label:before {
+  border: 1px solid #a0b128 !important;
+  box-shadow: none;
+}
+
+.privacy-toggle .ui.checkbox input:checked ~ label:after {
+  color: #a0b128 !important;
+  content: '\e800';
+}