@eeacms/volto-eea-map 4.0.0 → 5.0.0

package/src/styles/editor.less

@@ -0,0 +1,446 @@
+.arcgis-map {
+  &__editor {
+    --color-background-light: #f3f6fa;
+    --color-background-top: #fff;
+    --color-border-default: #c8d4e3;
+    --color-border-light: #dfe8f3;
+    --color-text-active: #2a3f5f;
+    --color-accent: #119dff;
+    --color-accent-shade: #0d76bf;
+    --color-accent-shade-mid: #0d76bf;
+    --color-button-primary-base-fill: var(--color-accent);
+    --color-button-primary-base-border: var(--color-accent-shade);
+    --color-button-primary-hover-fill: var(--color-accent-shade-mid);
+    --color-button-primary-hover-border: var(--color-accent-shade);
+    --color-button-primary-base-text: #fff;
+    --color-button-primary-hover-text: #fff;
+    --text-shadow-dark-color: rgba(42, 63, 95, 0.7);
+    --border-default: 1px solid var(--color-border-default);
+    --border-light: 1px solid var(--color-border-light);
+    --border-radius: 5px;
+    --spacing-half-unit: 12px;
+    --spacing-quarter-unit: 6px;
+    --sidebar-background: #fff;
+    --sidebar-group-background-base: var(--sidebar-background);
+    --sidebar-item-background-base: var(--color-background-light);
+    --sidebar-width: 100px;
+    --panel-width: 500px;
+    --panel-background: #ebf0f8;
+    --editor-width: calc(var(--sidebar-width) + var(--panel-width) + 1px);
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-size-small: 12px;
+    --font-size-base: 13px;
+    --font-size-medium: 14px;
+    --color-text-base: #506784;
+    --text-shadow-dark-ui: 0 1px 2px var(--text-shadow-dark-color);
+    --text-shadow-dark-ui-inactive: 0 1px 1px rgba(42, 63, 95, 0.4);
+    --box-shadow-base-color: rgba(80, 103, 132, 0.2);
+    --box-shadow-base: 0px 2px 9px var(--box-shadow-base-color);
+    --fold-header-background-base: #506784;
+    --fold-header-border-color-base: #506784;
+    --fold-header-text-color-closed: #fff;
+    --fold-header-text-color-base: #fff;
+    --fold-header-border-color-closed: #2a3f5f;
+    --fold-header-background-closed: #2a3f5f;
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    flex-grow: 1;
+
+    button {
+      display: inline-flex;
+      height: 36px;
+      align-items: center;
+      padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      border-radius: var(--border-radius);
+      column-gap: 0.25rem;
+      cursor: pointer;
+      font-size: var(--font-size-medium);
+      font-weight: var(--font-weight-semibold);
+      letter-spacing: 0.5px;
+      line-height: 1;
+      outline: none;
+      text-align: center;
+      transition: all 0.15s ease-in-out;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      &:first-letter {
+        text-transform: capitalize;
+      }
+
+      &.btn-primary {
+        border-color: var(--color-button-primary-base-border);
+        background-color: var(--color-button-primary-base-fill);
+        color: var(--color-button-primary-base-text);
+        text-shadow: var(--text-shadow-dark-ui);
+
+        &:hover {
+          border: 1px solid var(--color-button-primary-hover-border);
+          background-color: var(--color-button-primary-hover-fill);
+          color: var(--color-button-primary-hover-text);
+        }
+      }
+    }
+
+    .ruleGroup .rule .rule-value:has(.rule-value-list-item) {
+      input {
+        width: 50%;
+      }
+    }
+
+    .ruleGroup .ruleGroup-body {
+      gap: 1rem;
+    }
+
+    .ruleGroup .custom-rule {
+      display: flex;
+      flex-flow: column;
+      gap: 0.5rem;
+
+      .react-select {
+        .react-select__control {
+          width: 100%;
+          min-height: auto;
+        }
+
+        .react-select__value-container {
+          padding: 0.3em !important;
+        }
+
+        .react-select__indicator {
+          padding: 0.3em !important;
+        }
+      }
+    }
+  }
+
+  &__view {
+    .esri-view {
+      --ag-map-height: 100% !important;
+    }
+  }
+
+  &__controls {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: var(--editor-width);
+    flex-shrink: 0;
+    margin-right: 1rem;
+  }
+
+  &__view {
+    position: sticky;
+    top: 10px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__sidebar {
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    max-width: var(--sidebar-width);
+    height: 100%;
+    flex-grow: 1;
+    border-right: var(--border-default);
+    background: var(--sidebar-background);
+    float: left;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-align: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .sidebar-group {
+      &--title {
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        padding: var(--spacing-half-unit) 0;
+        border-bottom: var(--border-light);
+        background-color: var(--sidebar-group-background-base);
+
+        color: var(--color-text-base);
+        cursor: pointer;
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-normal);
+        text-align: left;
+        text-transform: capitalize;
+
+        &__icon {
+          height: 20px;
+
+          svg {
+            rotate: 90deg;
+          }
+        }
+      }
+
+      &--item {
+        position: relative;
+        overflow: hidden;
+        padding: 10px;
+        padding-right: var(--spacing-quarter-unit);
+        padding-left: 18px;
+        border-bottom: var(--border-light);
+        background-color: var(--sidebar-item-background-base);
+        color: var(--color-text-base);
+        cursor: pointer;
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-normal);
+        line-height: var(--font-size-medium);
+        text-align: left;
+        text-transform: capitalize;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 5px;
+          height: 100%;
+          background-color: var(--color-accent);
+          content: '';
+          transform: scaleX(0);
+          transform-origin: left center;
+          transition: all 0.15s ease-in-out;
+          will-change: transform;
+        }
+
+        &__is-active {
+          color: var(--color-text-active);
+          cursor: default;
+          font-weight: var(--font-weight-semibold);
+
+          &::before {
+            transform: none;
+          }
+        }
+      }
+
+      &--expanded {
+        .sidebar-group--title {
+          position: relative;
+          z-index: 4;
+          box-shadow: var(--box-shadow-base);
+
+          &__icon svg {
+            rotate: 180deg;
+          }
+        }
+      }
+
+      &--is-active {
+        .sidebar-group--title {
+          color: var(--color-text-active);
+          font-weight: var(--font-weight-semibold);
+
+          &__icon svg {
+            fill: var(--color-accent) !important;
+          }
+        }
+      }
+    }
+  }
+
+  &__panel {
+    position: relative;
+    display: flex;
+    width: var(--panel-width);
+    box-sizing: border-box;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: var(--spacing-half-unit);
+    border-right: var(--border-default);
+    background-color: var(--panel-background);
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .panel {
+      &--header {
+        display: flex;
+        flex-shrink: 0;
+        margin-bottom: var(--spacing-half-unit);
+      }
+    }
+
+    .fold {
+      position: relative;
+      width: 100%;
+      margin-bottom: var(--spacing-half-unit);
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+      &.foldable {
+        .fold--top {
+          cursor: pointer;
+        }
+      }
+
+      &--top {
+        display: flex;
+        height: auto;
+        justify-content: space-between;
+        padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+        border: 1px solid var(--fold-header-border-color-closed);
+        border-radius: var(--border-radius);
+        background-color: var(--fold-header-background-closed);
+        clear: both;
+        color: var(--fold-header-text-color-closed);
+        font-size: var(--font-size-base);
+        text-shadow: var(--text-shadow-dark-ui);
+        transition:
+          background-color 0.1s ease-in-out,
+          color 0.1s ease-in-out,
+          border 0.1s ease-in-out;
+
+        &__content {
+          display: flex;
+          flex-grow: 1;
+        }
+
+        &__fold {
+          rotate: 90deg;
+        }
+
+        &__title {
+          overflow: hidden;
+          max-width: 230px;
+          margin-left: calc(var(--spacing-half-unit) / 3);
+          font-size: var(--font-size-medium);
+          font-weight: var(--font-weight-semibold);
+          letter-spacing: 0.2px;
+          line-height: var(--font-size-medium);
+          text-overflow: ellipsis;
+          transform: translateY(1px);
+          white-space: nowrap;
+        }
+      }
+
+      &--content {
+        padding: 0.5rem;
+        border: var(--border-default);
+        border-width: 0 1px 1px 1px;
+        background: var(--color-background-top);
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      &__open {
+        .fold--top {
+          border: 1px solid var(--fold-header-border-color-base);
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+          background-color: var(--fold-header-background-base);
+          color: var(--fold-header-text-color-base);
+          text-shadow: var(--text-shadow-dark-ui-inactive);
+        }
+
+        .fold--top__fold {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
+}
+
+.arcgis-map__editor {
+  .queryBuilder {
+    font-size: var(--font-size-small);
+
+    button {
+      height: auto !important;
+      font-size: var(--font-size-small);
+    }
+
+    select.rule-fields {
+      max-width: 100px;
+    }
+
+    input.rule-value {
+      width: 100%;
+    }
+  }
+
+  .ui.segment.form.attached .field:last-child {
+    margin-bottom: 0;
+  }
+
+  .ui.form .field .wrapper > label,
+  .inline.field {
+    font-size: var(--font-size-small);
+  }
+
+  .ui.form.accordion .title {
+    display: flex;
+    height: auto;
+    flex-flow: row-reverse;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
+    border: 1px solid var(--fold-header-border-color-base);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    background-color: var(--fold-header-background-base) !important;
+    clear: both;
+    color: var(--fold-header-text-color-base) !important;
+    column-gap: calc(var(--spacing-half-unit) / 3);
+    font-size: var(--font-size-medium);
+    text-shadow: var(--text-shadow-dark-ui-inactive);
+    transition:
+      background-color 0.1s ease-in-out,
+      color 0.1s ease-in-out,
+      border 0.1s ease-in-out;
+
+    svg {
+      height: 16px !important;
+      rotate: 180deg !important;
+    }
+
+    &:not(.active) {
+      border: 1px solid var(--fold-header-border-color-closed) !important;
+      border-radius: var(--border-radius) !important;
+      background-color: var(--fold-header-background-closed) !important;
+      color: var(--fold-header-text-color-closed) !important;
+      text-shadow: var(--text-shadow-dark-ui) !important;
+
+      svg {
+        rotate: -90deg !important;
+      }
+    }
+  }
+
+  #blockform-fieldset-default {
+    .ui.segment.form:empty {
+      display: none;
+    }
+  }
+}
+
+.arcgis-renderer-editor {
+  padding: 1rem 0.625rem;
+  font-size: var(--font-size-small);
+
+  .ui.form.segment {
+    padding: 0;
+  }
+}
+
+.arcgis-viewpoint-editor {
+  .ui.form.segment {
+    padding: 0;
+  }
+}

package/src/styles/map.less

@@ -0,0 +1,3 @@
+.esri-view {
+  height: var(--ag-map-height, 600px);
+}

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

@@ -1,161 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { Message } from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { SidebarPortal } from '@plone/volto/components';
-import { getContent } from '@plone/volto/actions';
-import { flattenToAppURL } from '@plone/volto/helpers';
-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 { Schema } from './Schema';
-import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
-import { deepUpdateDataQueryParams, getMapVisualizationData } from './helpers';
-import { isEqual } from 'lodash';
-
-const Edit = (props) => {
-  const {
-    id,
-    block,
-    onChangeBlock,
-    selected,
-    data,
-    getContent,
-    connected_data_parameters, // page level queries live from widget
-    data_query, // page level queries
-    mapContent,
-  } = props;
-
-  const {
-    data_query_params, //block level queries
-    enable_queries,
-    show_legend = true,
-    show_note = true,
-    show_more_info = true,
-    show_share = true,
-    dataprotection = { enabled: true },
-    height = '',
-  } = data;
-
-  const schema = Schema(props);
-  const [mapData, setMapData] = React.useState('');
-
-  const vis_url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
-
-  const map_visualization_data = useMemo(
-    () => getMapVisualizationData({ mapContent, data }),
-    [mapContent, data],
-  );
-
-  const effectiveQueryParams =
-    connected_data_parameters && connected_data_parameters.length > 0
-      ? connected_data_parameters
-      : data_query;
-
-  React.useEffect(() => {
-    deepUpdateDataQueryParams(
-      block,
-      props.data,
-      effectiveQueryParams,
-      onChangeBlock,
-    );
-  }, [block, props.data, effectiveQueryParams, onChangeBlock]);
-
-  useEffect(() => {
-    const mapVisId = flattenToAppURL(map_visualization_data['@id'] || '');
-    if (!map_visualization_data?.error && vis_url && vis_url !== mapVisId) {
-      getContent(vis_url, null, id);
-    }
-    if (!vis_url) {
-      setMapData('');
-    }
-  }, [id, getContent, vis_url, map_visualization_data]);
-
-  useEffect(() => {
-    const mergedQueries =
-      connected_data_parameters &&
-      connected_data_parameters.length > 0 &&
-      connected_data_parameters.map((unsavedQuery, index) => {
-        const correspondingQuery =
-          data_query_params && data_query_params[index];
-        return { ...unsavedQuery, alias: correspondingQuery?.alias };
-      });
-    const queriesToUse =
-      mergedQueries && mergedQueries.length > 0
-        ? mergedQueries
-        : data_query_params;
-
-    const updatedMapData = applyQueriesToMapLayers(
-      map_visualization_data,
-      queriesToUse,
-      enable_queries,
-    );
-
-    if (!isEqual(mapData, updatedMapData)) {
-      setMapData(updatedMapData);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    map_visualization_data,
-    data_query_params,
-    enable_queries,
-    connected_data_parameters,
-  ]);
-
-  return (
-    <>
-      {!vis_url && (
-        <Message>Please select a visualization from block editor.</Message>
-      )}
-      {!!vis_url && mapData && (
-        <div>
-          <Webmap data={mapData} height={height} isEdit={true} />
-          <ExtraViews
-            data={{
-              ...data,
-              show_legend,
-              show_note,
-              show_sources: true,
-              show_more_info,
-              show_share,
-              dataprotection,
-              map_visualization_data,
-            }}
-          />
-        </div>
-      )}
-      <SidebarPortal selected={selected}>
-        <BlockDataForm
-          block={block}
-          title={schema.title}
-          schema={schema}
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
-
-export default compose(
-  connect(
-    (state, props) => {
-      const pathname = flattenToAppURL(state.content.data['@id']);
-      return {
-        mapContent: state.content.subrequests?.[props.id]?.data,
-        data_query: state.content.data.data_query,
-        connected_data_parameters:
-          state?.connected_data_parameters?.byContextPath &&
-          state.connected_data_parameters?.byContextPath[pathname],
-      };
-    },
-    { getContent },
-  ),
-)(Edit);