@eeacms/volto-eea-website-theme 1.34.0 → 2.0.1

package/src/customizations/volto/components/manage/Blocks/Image/schema.js

@@ -37,6 +37,10 @@ const messages = defineMessages({
     id: 'Alt text hint link text',
     defaultMessage: 'Describe the purpose of the image.',
   },
+  linkSettings: {
+    id: 'Link settings',
+    defaultMessage: 'Link settings',
+  },
 });
 
 export function ImageSchema({ formData, intl }) {
@@ -61,7 +65,7 @@ export function ImageSchema({ formData, intl }) {
         ? [
             {
               id: 'link_settings',
-              title: 'Link settings',
+              title: intl.formatMessage(messages.linkSettings),
               fields: ['href', 'openLinkInNewTab'],
             },
           ]
@@ -80,7 +84,7 @@ export function ImageSchema({ formData, intl }) {
               href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
               title={intl.formatMessage(messages.openLinkInNewTab)}
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
             >
               {intl.formatMessage(messages.AltTextHintLinkText)}
             </a>{' '}
@@ -136,3 +140,14 @@ export function ImageSchema({ formData, intl }) {
     required: [],
   };
 }
+
+export const gridImageDisableSizeAndPositionHandlersSchema = ({
+  schema,
+  formData,
+  intl,
+}) => {
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (item) => !['align', 'size'].includes(item),
+  );
+  return schema;
+};

package/src/customizations/volto/components/manage/Blocks/LeadImage/Edit.jsx

@@ -10,10 +10,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
 import { isEqual } from 'lodash';
+
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 import { Icon } from 'semantic-ui-react';
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 
@@ -80,11 +81,18 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data, properties } = this.props;
+    const { copyright, copyrightIcon, copyrightPosition } = data;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
-    const { copyright, copyrightIcon, copyrightPosition, styles } = data;
+
+    const hasImage = !!properties.image;
+    const hasImageData = hasImage && !!properties.image.data;
+    const className = cx('responsive', { 'full-image': data.align === 'full' });
+    const altText = data.image_caption || properties.image_caption || '';
+
     return (
       <div
         className={cx(
@@ -100,7 +108,7 @@ class Edit extends Component {
             `image-block-container ${data?.align ? data?.align : ''}`,
           )}
         >
-          {!properties.image && (
+          {!hasImage && (
             <Message>
               <center>
                 <img src={imageBlockSVG} alt="" />
@@ -108,19 +116,17 @@ class Edit extends Component {
               </center>
             </Message>
           )}
-          {properties.image && (
+          {hasImage && hasImageData && (
             <div className="image-block">
               <img
-                className={cx(
-                  { 'full-width': data.align === 'full' },
-                  styles?.objectPosition,
-                )}
-                src={
-                  properties.image.data
-                    ? `data:${properties.image['content-type']};base64,${properties.image.data}`
-                    : flattenToAppURL(properties.image.download)
-                }
-                alt={data.image_caption || ''}
+                className={(className, data?.styles?.objectPosition)}
+                src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+                width={properties.image.width}
+                height={properties.image.height}
+                alt={altText}
+                style={{
+                  aspectRatio: `${properties.image.width}/${properties.image.height}`,
+                }}
               />
               <div className="copyright-wrapper">
                 {copyright ? (
@@ -136,6 +142,21 @@ class Edit extends Component {
               </div>
             </div>
           )}
+          {hasImage && !hasImageData && (
+            <Image
+              className={className}
+              item={properties}
+              imageField="image"
+              sizes={(() => {
+                if (data.align === 'full' || data.align === 'center')
+                  return '100vw';
+                if (data.align === 'left' || data.align === 'right')
+                  return '50vw';
+                return undefined;
+              })()}
+              alt={altText}
+            />
+          )}
         </div>
         <SidebarPortal selected={this.props.selected}>
           <LeadImageSidebar {...this.props} />

package/src/customizations/volto/components/manage/Blocks/LeadImage/View.jsx

@@ -7,101 +7,87 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
+import config from '@plone/volto/registry';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 import { Icon } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
  * View image block class.
  * @class View
  * @extends Component
  */
-const View = (props) => {
-  const { data, properties } = props;
-  const { copyright, copyrightIcon, copyrightPosition, styles } = data;
-
-  // const [hovering, setHovering] = React.useState(false);
-  const [viewLoaded, setViewLoaded] = React.useState(false);
-
-  React.useEffect(() => {
-    setViewLoaded(true);
-  }, []);
+const View = ({ data, properties }) => {
+  const { copyright, copyrightIcon, copyrightPosition } = data;
+  const Image = config.getComponent({ name: 'Image' }).component;
 
   return (
     <>
-      {viewLoaded && (
-        <p
+      <p
+        className={cx(
+          'block image align',
+          {
+            center: !Boolean(data.align),
+          },
+          data.align,
+        )}
+      >
+        <div
           className={cx(
-            'block image align',
-            {
-              center: !Boolean(data.align),
-            },
-            data.align,
+            `image-block-container ${data?.align ? data?.align : ''}`,
           )}
         >
-          <div
-            className={cx(
-              `image-block-container ${data?.align ? data?.align : ''}`,
-            )}
-          >
-            {properties.image && (
-              <>
-                {(() => {
-                  const image = (
-                    <div className="image-block">
-                      <img
-                        className={cx(
-                          { 'full-width': data.align === 'full' },
-                          styles?.objectPosition,
-                        )}
-                        src={flattenToAppURL(properties.image.download)}
-                        alt={properties.image_caption || ''}
-                      />
-                      <div
-                        // onMouseEnter={() => setHovering(true)}
-                        // onMouseLeave={() => setHovering(false)}
-                        className={`copyright-wrapper ${
-                          copyrightPosition ? copyrightPosition : 'left'
-                        }`}
-                      >
-                        {copyright ? (
-                          <Copyright copyrightPosition={copyrightPosition}>
-                            <Copyright.Icon>
-                              <Icon className={copyrightIcon} />
-                            </Copyright.Icon>
-                            {/*<div*/}
-                            {/*  className={cx(*/}
-                            {/*    'copyright-hover-container',*/}
-                            {/*    !hovering ? 'hiddenStructure' : '',*/}
-                            {/*  )}*/}
-                            {/*>*/}
-                            <Copyright.Text>{copyright}</Copyright.Text>
-                            {/*</div>*/}
-                          </Copyright>
-                        ) : (
-                          ''
-                        )}
-                      </div>
+          {properties.image && (
+            <>
+              {(() => {
+                const image = (
+                  <div className="image-block">
+                    <Image
+                      className={cx(
+                        { 'full-width': data.align === 'full' },
+                        data?.styles?.objectPosition,
+                      )}
+                      item={properties}
+                      imageField="image"
+                      sizes={config.blocks.blocksConfig.leadimage.getSizes(
+                        data,
+                      )}
+                      alt={properties.image_caption || ''}
+                      responsive={true}
+                    />
+                    <div
+                      className={`copyright-wrapper ${
+                        copyrightPosition ? copyrightPosition : 'left'
+                      }`}
+                    >
+                      {copyright ? (
+                        <Copyright copyrightPosition={copyrightPosition}>
+                          <Copyright.Icon>
+                            <Icon className={copyrightIcon} />
+                          </Copyright.Icon>
+                        </Copyright>
+                      ) : (
+                        ''
+                      )}
                     </div>
+                  </div>
+                );
+                if (data.href) {
+                  return (
+                    <UniversalLink
+                      href={data.href}
+                      openLinkInNewTab={data.openLinkInNewTab}
+                    >
+                      {image}
+                    </UniversalLink>
                   );
-                  if (data.href) {
-                    return (
-                      <UniversalLink
-                        href={data.href}
-                        openLinkInNewTab={data.openLinkInNewTab}
-                      >
-                        {image}
-                      </UniversalLink>
-                    );
-                  } else {
-                    return image;
-                  }
-                })()}
-              </>
-            )}
-          </div>
-        </p>
-      )}
+                } else {
+                  return image;
+                }
+              })()}
+            </>
+          )}
+        </div>
+      </p>
     </>
   );
 };

package/src/customizations/volto/components/manage/Display/Display.jsx

@@ -0,0 +1,306 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import jwtDecode from 'jwt-decode';
+import {
+  getSchema,
+  getUser,
+  updateContent,
+  getContent,
+} from '@plone/volto/actions';
+import { getLayoutFieldname } from '@plone/volto/helpers';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { defineMessages, injectIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const messages = defineMessages({
+  Viewmode: {
+    id: 'Viewmode',
+    defaultMessage: 'View',
+  },
+});
+
+const Option = injectLazyLibs('reactSelect')((props) => {
+  const { Option } = props.reactSelect.components;
+  return (
+    <Option {...props}>
+      <div>{props.label}</div>
+      {props.isFocused && !props.isSelected && (
+        <Icon name={checkSVG} size="18px" color="#b8c6c8" />
+      )}
+      {props.isSelected && <Icon name={checkSVG} size="18px" color="#007bc1" />}
+    </Option>
+  );
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const { DropdownIndicator } = props.reactSelect.components;
+  return (
+    <DropdownIndicator {...props}>
+      {props.selectProps.menuIsOpen ? (
+        <Icon name={upSVG} size="24px" color="#007bc1" />
+      ) : (
+        <Icon name={downSVG} size="24px" color="#007bc1" />
+      )}
+    </DropdownIndicator>
+  );
+});
+
+const selectTheme = (theme) => ({
+  ...theme,
+  borderRadius: 0,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    border: 'none',
+    borderBottom: '2px solid #b8c6c8',
+    boxShadow: 'none',
+    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    boxShadow: 'none',
+    borderBottom: '2px solid #b8c6c8',
+  }),
+  menuList: (styles, state) => ({
+    ...styles,
+    maxHeight: '400px',
+  }),
+  indicatorSeparator: (styles) => ({
+    ...styles,
+    width: null,
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: 0,
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: null,
+    minHeight: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 12px',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    span: {
+      flex: '0 0 auto',
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};
+
+/**
+ * Display container class.
+ * @class Display
+ * @extends Component
+ */
+class DisplaySelect extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getSchema: PropTypes.func.isRequired,
+    updateContent: PropTypes.func.isRequired,
+    getContent: PropTypes.func.isRequired,
+    loaded: PropTypes.bool.isRequired,
+    pathname: PropTypes.string.isRequired,
+    layouts: PropTypes.arrayOf(PropTypes.string),
+    layout: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    layouts: [],
+    layout: '',
+    rolesWhoCanChangeLayout: [],
+  };
+
+  state = {
+    hasMatchingRole: false,
+    selectedOption: {
+      value: this.props.layout,
+      label: config.views.layoutViewsNamesMapping?.[this.props.layout]
+        ? this.props.intl.formatMessage({
+            id: config.views.layoutViewsNamesMapping?.[this.props.layout],
+            defaultMessage:
+              config.views.layoutViewsNamesMapping?.[this.props.layout],
+          })
+        : this.props.layout,
+    },
+  };
+
+  componentDidMount() {
+    this.props.getSchema(this.props.type);
+  }
+
+  UNSAFE_componentWillMount() {
+    if (!this.props.rolesWhoCanChangeLayout.length) {
+      this.props.rolesWhoCanChangeLayout.push(
+        ...(config?.settings?.eea?.rolesWhoCanChangeLayout || []),
+      );
+    }
+    if (!this.props.layouts.length) {
+      this.props.getSchema(this.props.type);
+    }
+    if (Object.keys(this.props.user).length === 0) {
+      this.props.getUser(this.props.userId);
+    } else {
+      const hasMatchingRole = this.props.user.roles.some((role) =>
+        this.props.rolesWhoCanChangeLayout.includes(role),
+      );
+      if (hasMatchingRole !== this.state.hasMatchingRole) {
+        this.setState({ hasMatchingRole });
+      }
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.getSchema(nextProps.type);
+    }
+    if (!this.props.loaded && nextProps.loaded) {
+      this.props.getContent(nextProps.pathname);
+    }
+
+    if (Object.keys(nextProps.user).length !== 0) {
+      const hasMatchingRole = nextProps.user.roles.some((role) =>
+        this.props.rolesWhoCanChangeLayout.includes(role),
+      );
+      if (hasMatchingRole !== this.state.hasMatchingRole) {
+        this.setState({ hasMatchingRole });
+      }
+    }
+  }
+
+  /**
+   * On set layout handler
+   * @method setLayout
+   * @param {Object} event Event object
+   * @returns {undefined}
+   */
+  setLayout = (selectedOption) => {
+    this.props.updateContent(this.props.pathname, {
+      layout: selectedOption.value,
+    });
+    this.setState({ selectedOption });
+  };
+
+  selectValue = (option) => (
+    <Fragment>
+      <span className="Select-value-label">{option.label}</span>
+    </Fragment>
+  );
+
+  optionRenderer = (option) => (
+    <Fragment>
+      <span style={{ marginRight: 'auto' }}>{option.label}</span>
+      <Icon name={checkSVG} size="24px" />
+    </Fragment>
+  );
+
+  render() {
+    if (!this.state.hasMatchingRole) {
+      return null;
+    }
+    const { selectedOption } = this.state;
+    const Select = this.props.reactSelect.default;
+    const layoutsNames = config.views.layoutViewsNamesMapping;
+    const layoutOptions = this.props.layouts
+      .filter(
+        (layout) =>
+          Object.keys(config.views.contentTypesViews).includes(layout) ||
+          Object.keys(config.views.layoutViews).includes(layout),
+      )
+      .map((item) => ({
+        value: item,
+        label:
+          this.props.intl.formatMessage({
+            id: layoutsNames[item],
+            defaultMessage: layoutsNames[item],
+          }) || item,
+      }));
+
+    return layoutOptions?.length > 1 ? (
+      <FormFieldWrapper
+        id="display-select"
+        title={this.props.intl.formatMessage(messages.Viewmode)}
+        {...this.props}
+      >
+        <Select
+          name="display-select"
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={layoutOptions}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          onChange={this.setLayout}
+          defaultValue={selectedOption}
+          isSearchable={false}
+        />
+      </FormFieldWrapper>
+    ) : null;
+  }
+}
+
+export default compose(
+  injectIntl,
+  injectLazyLibs('reactSelect'),
+  connect(
+    (state) => ({
+      loaded: state.content.update.loaded,
+      layouts: state.schema.schema ? state.schema.schema.layouts : [],
+      layout: state.content.data
+        ? state.content.data[getLayoutFieldname(state.content.data)]
+        : '',
+      layout_fieldname: state.content.data
+        ? getLayoutFieldname(state.content.data)
+        : '',
+      type: state.content.data ? state.content.data['@type'] : '',
+      user: state.users.user,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
+    }),
+    { getSchema, getUser, updateContent, getContent },
+  ),
+)(DisplaySelect);

package/src/customizations/volto/components/manage/Display/Readme.md

@@ -0,0 +1 @@
+Added customization to condition the display of the layout options based on the user's roles.

package/src/customizations/volto/components/manage/Sidebar/SidebarPopup copy.jsx

@@ -0,0 +1,82 @@
+// Check this https://github.com/plone/volto/pull/5520
+import React from 'react';
+import { Portal } from 'react-portal';
+import { CSSTransition } from 'react-transition-group';
+import PropTypes from 'prop-types';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+const DEFAULT_TIMEOUT = 500;
+
+const SidebarPopup = (props) => {
+  const { children, open, onClose, overlay } = props;
+
+  const asideElement = React.useRef();
+
+  const handleClickOutside = (e) => {
+    if (asideElement && doesNodeContainClick(asideElement.current, e)) return;
+    onClose();
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside, false);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  });
+
+  return (
+    <>
+      {overlay && (
+        <CSSTransition
+          in={open}
+          timeout={DEFAULT_TIMEOUT}
+          classNames="overlay-container"
+          unmountOnExit
+        >
+          <Portal node={document?.body}>
+            <div className="overlay-container"></div>
+          </Portal>
+        </CSSTransition>
+      )}
+      <CSSTransition
+        in={open}
+        timeout={DEFAULT_TIMEOUT}
+        classNames="sidebar-container"
+        unmountOnExit
+      >
+        <Portal>
+          <aside
+            id="test"
+            role="presentation"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+            }}
+            ref={asideElement}
+            key="sidebarpopup"
+            className="sidebar-container"
+            style={{ overflowY: 'auto' }}
+          >
+            {children}
+          </aside>
+        </Portal>
+      </CSSTransition>
+    </>
+  );
+};
+
+SidebarPopup.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  overlay: PropTypes.bool,
+};
+
+SidebarPopup.defaultProps = {
+  open: false,
+  onClose: () => {},
+  overlay: false,
+};
+
+export default SidebarPopup;