@eeacms/volto-eea-website-theme 1.9.2 → 1.10.0

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 /**
  * View image block.
  * @module components/manage/Blocks/Image/View
@@ -11,91 +12,133 @@ import cx from 'classnames';
 import { withBlockExtensions } from '@plone/volto/helpers';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
-import './style.less';
+
 /**
  * View image block class.
  * @class View
  * @extends Component
  */
-export const View = ({ data, detached }) => {
+export const View = (props) => {
+  const { data, detached } = props;
   const href = data?.href?.[0]?.['@id'] || '';
   const { copyright, copyrightIcon, copyrightPosition } = data;
+  // const [hovering, setHovering] = React.useState(false);
+  const [viewLoaded, setViewLoaded] = React.useState(false);
+
+  const showCopyright = data?.size === 'l' || !data.size;
+
+  React.useEffect(() => {
+    setViewLoaded(true);
+  }, []);
+
   return (
-    <p
-      className={cx(
-        'block image align',
-        {
-          center: !Boolean(data.align),
-          detached,
-        },
-        data.align,
-      )}
-    >
-      {data.url && (
-        <>
-          {(() => {
-            const image = (
-              <div className="image-block">
-                <img
-                  className={cx({
-                    'full-width': data.align === 'full',
-                    large: data.size === 'l',
-                    medium: data.size === 'm',
-                    small: data.size === 's',
-                  })}
-                  src={
-                    isInternalURL(data.url)
-                      ? // Backwards compat in the case that the block is storing the full server URL
-                        (() => {
-                          if (data.size === 'l')
-                            return `${flattenToAppURL(
-                              data.url,
-                            )}/@@images/image`;
-                          if (data.size === 'm')
-                            return `${flattenToAppURL(
-                              data.url,
-                            )}/@@images/image/preview`;
-                          if (data.size === 's')
-                            return `${flattenToAppURL(
-                              data.url,
-                            )}/@@images/image/mini`;
-                          return `${flattenToAppURL(data.url)}/@@images/image`;
-                        })()
-                      : data.url
+    <>
+      {viewLoaded && (
+        <div
+          className={cx(
+            'block image align',
+            {
+              center: !Boolean(data.align),
+              detached,
+            },
+            data.align,
+          )}
+        >
+          <div
+            className={cx(
+              'image-block-container',
+              {
+                large: data.size === 'l',
+                medium: data.size === 'm',
+                small: data.size === 's',
+              },
+              data?.align ? data?.align : '',
+            )}
+          >
+            {data.url && (
+              <>
+                {(() => {
+                  const image = (
+                    <>
+                      <img
+                        className={cx({
+                          'full-width': data.align === 'full',
+                        })}
+                        src={
+                          isInternalURL(data.url)
+                            ? // Backwards compat in the case that the block is storing the full server URL
+                              (() => {
+                                if (data.align === 'full')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/huge`;
+                                if (data.size === 'l')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/great`;
+                                if (data.size === 'm')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/preview`;
+                                if (data.size === 's')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/mini`;
+                                return `${flattenToAppURL(
+                                  data.url,
+                                )}/@@images/image/great`;
+                              })()
+                            : data.url
+                        }
+                        alt={data.alt || ''}
+                        loading="lazy"
+                      />
+                      <div
+                        // onMouseEnter={() => setHovering(true)}
+                        // onMouseLeave={() => setHovering(false)}
+                        className={`copyright-wrapper ${
+                          copyrightPosition ? copyrightPosition : 'left'
+                        }`}
+                      >
+                        {copyright && showCopyright ? (
+                          <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>
+                    </>
+                  );
+                  if (href) {
+                    return (
+                      <UniversalLink
+                        href={href}
+                        openLinkInNewTab={data.openLinkInNewTab}
+                      >
+                        {image}
+                      </UniversalLink>
+                    );
+                  } else {
+                    return image;
                   }
-                  alt={data.alt || ''}
-                  loading="lazy"
-                />
-                <div className="copyright-image">
-                  {copyright ? (
-                    <Copyright copyrightPosition={copyrightPosition}>
-                      <Copyright.Icon>
-                        <Icon className={copyrightIcon} />
-                      </Copyright.Icon>
-                      <Copyright.Text>{copyright}</Copyright.Text>
-                    </Copyright>
-                  ) : (
-                    ''
-                  )}
-                </div>
-              </div>
-            );
-            if (href) {
-              return (
-                <UniversalLink
-                  href={href}
-                  openLinkInNewTab={data.openLinkInNewTab}
-                >
-                  {image}
-                </UniversalLink>
-              );
-            } else {
-              return image;
-            }
-          })()}
-        </>
+                })()}
+              </>
+            )}
+          </div>
+        </div>
       )}
-    </p>
+    </>
   );
 };
 
@@ -108,4 +151,4 @@ View.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default withBlockExtensions(View);
+export default withBlockExtensions(React.memo(View));

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

@@ -47,12 +47,17 @@ export function ImageSchema({ formData, intl }) {
         title: 'Default',
         fields: [...(formData.url ? ['url', 'alt', 'align', 'size'] : [])],
       },
-      {
-        id: 'copyright',
-        title: 'Copyright',
-        fields: ['copyright', 'copyrightIcon', 'copyrightPosition'],
-      },
-      ...(formData.url
+
+      ...(!formData?.size || formData?.size === 'l'
+        ? [
+            {
+              id: 'copyright',
+              title: 'Copyright',
+              fields: ['copyright', 'copyrightIcon', 'copyrightPosition'],
+            },
+          ]
+        : []),
+      ...(formData?.url
         ? [
             {
               id: 'link_settings',

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

@@ -11,7 +11,6 @@ import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
 import { isEqual } from 'lodash';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
-import './style.less';
 import { Icon } from 'semantic-ui-react';
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
@@ -97,39 +96,43 @@ class Edit extends Component {
           data.align,
         )}
       >
-        {!properties.image && (
-          <Message>
-            <center>
-              <img src={imageBlockSVG} alt="" />
-              <div className="message-text">{placeholder}</div>
-            </center>
-          </Message>
-        )}
-        {properties.image && (
-          <div className="image-block">
-            <img
-              className={cx({ 'full-width': data.align === 'full' })}
-              src={
-                properties.image.data
-                  ? `data:${properties.image['content-type']};base64,${properties.image.data}`
-                  : flattenToAppURL(properties.image.download)
-              }
-              alt={data.image_caption || ''}
-            />
-            <div className="copyright-image">
-              {copyright ? (
-                <Copyright copyrightPosition={copyrightPosition}>
-                  <Copyright.Icon>
-                    <Icon className={copyrightIcon} />
-                  </Copyright.Icon>
-                  <Copyright.Text>{copyright}</Copyright.Text>
-                </Copyright>
-              ) : (
-                ''
-              )}
+        <div
+          className={`image-block-container ${data?.align ? data?.align : ''}`}
+        >
+          {!properties.image && (
+            <Message>
+              <center>
+                <img src={imageBlockSVG} alt="" />
+                <div className="message-text">{placeholder}</div>
+              </center>
+            </Message>
+          )}
+          {properties.image && (
+            <div className="image-block">
+              <img
+                className={cx({ 'full-width': data.align === 'full' })}
+                src={
+                  properties.image.data
+                    ? `data:${properties.image['content-type']};base64,${properties.image.data}`
+                    : flattenToAppURL(properties.image.download)
+                }
+                alt={data.image_caption || ''}
+              />
+              <div className="copyright-wrapper">
+                {copyright ? (
+                  <Copyright copyrightPosition={copyrightPosition}>
+                    <Copyright.Icon>
+                      <Icon className={copyrightIcon} />
+                    </Copyright.Icon>
+                    <Copyright.Text>{copyright}</Copyright.Text>
+                  </Copyright>
+                ) : (
+                  ''
+                )}
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
         <SidebarPortal selected={this.props.selected}>
           <LeadImageSidebar {...this.props} />
         </SidebarPortal>

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

@@ -1,80 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Form } from 'semantic-ui-react';
-import { Accordion, Grid, Segment } from 'semantic-ui-react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { CheckboxWidget, Icon, TextWidget } from '@plone/volto/components';
+import { Segment } from 'semantic-ui-react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { Icon, BlockDataForm } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
-import AlignChooser from './AlignChooser';
-
+import { LeadImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import upSVG from '@plone/volto/icons/up-key.svg';
-import downSVG from '@plone/volto/icons/down-key.svg';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-
-const messages = defineMessages({
-  Image: {
-    id: 'Image',
-    defaultMessage: 'Image',
-  },
-  Origin: {
-    id: 'Origin',
-    defaultMessage: 'Origin',
-  },
-  AltText: {
-    id: 'Alt text',
-    defaultMessage: 'Alt text',
-  },
-  Copyright: {
-    id: 'Text',
-    defaultMessage: 'Text',
-  },
-  CopyrightIcon: {
-    id: 'Icon',
-    defaultMessage: 'Icon',
-  },
-  Align: {
-    id: 'Alignment',
-    defaultMessage: 'Alignment',
-  },
-  LinkTo: {
-    id: 'Link to',
-    defaultMessage: 'Link to',
-  },
-  openLinkInNewTab: {
-    id: 'Open in a new tab',
-    defaultMessage: 'Open in a new tab',
-  },
-  NoImageSelected: {
-    id: 'No image set in image content field',
-    defaultMessage: 'No image set in image content field',
-  },
-  externalURL: {
-    id: 'External URL',
-    defaultMessage: 'External URL',
-  },
-});
 
-const LeadImageSidebar = ({
-  properties,
-  data,
-  block,
-  onChangeBlock,
-  openObjectBrowser,
-  required = false,
-  onChangeField,
-  intl,
-}) => {
-  const [activeAccIndex, setActiveAccIndex] = useState(0);
+const LeadImageSidebar = ({ properties, data, block, onChangeBlock, intl }) => {
   const defaultValueCopyrightIcon = 'ri-copyright-line';
   const defaultValueCopyrightPosition = 'left';
-  function handleAccClick(e, titleProps) {
-    const { index } = titleProps;
-    const newIndex = activeAccIndex === index ? -1 : index;
-    setActiveAccIndex(newIndex);
-  }
+  const schema = LeadImageSchema({ formData: properties, intl });
 
   useEffect(() => {
     if (data.copyrightIcon === '' || data.copyrightIcon === undefined)
@@ -121,164 +57,19 @@ const LeadImageSidebar = ({
               alt={properties.image_caption || ''}
             />
           </Segment>
-          <Segment className="form sidebar-image-data">
-            <TextWidget
-              id="alt"
-              title={intl.formatMessage(messages.AltText)}
-              required={false}
-              value={properties.image_caption}
-              icon={properties.image_caption ? clearSVG : null}
-              iconAction={() => onChangeField('image_caption', '')}
-              onChange={(name, value) => {
-                onChangeField('image_caption', value);
-              }}
-            />
-            <Form.Field inline required={required}>
-              <Grid>
-                <Grid.Row>
-                  <Grid.Column width="4">
-                    <div className="wrapper">
-                      <label htmlFor="field-align">
-                        <FormattedMessage
-                          id="Alignment"
-                          defaultMessage="Alignment"
-                        />
-                      </label>
-                    </div>
-                  </Grid.Column>
-                  <Grid.Column width="8" className="align-tools">
-                    <AlignBlock
-                      align={data.align}
-                      onChangeBlock={onChangeBlock}
-                      data={data}
-                      block={block}
-                    />
-                  </Grid.Column>
-                </Grid.Row>
-              </Grid>
-            </Form.Field>
-          </Segment>
-          <Accordion fluid styled className="form">
-            <Accordion.Title
-              active={activeAccIndex === 0}
-              index={0}
-              onClick={handleAccClick}
-            >
-              Link Settings
-              {activeAccIndex === 0 ? (
-                <Icon name={upSVG} size="20px" />
-              ) : (
-                <Icon name={downSVG} size="20px" />
-              )}
-            </Accordion.Title>
-            <Accordion.Content active={activeAccIndex === 0}>
-              <TextWidget
-                id="link"
-                title={intl.formatMessage(messages.LinkTo)}
-                required={false}
-                value={flattenToAppURL(data.href)}
-                icon={data.href ? clearSVG : navTreeSVG}
-                iconAction={
-                  data.href
-                    ? () => {
-                        onChangeBlock(block, {
-                          ...data,
-                          href: '',
-                        });
-                      }
-                    : () => openObjectBrowser({ mode: 'link' })
-                }
-                onChange={(name, value) => {
-                  onChangeBlock(block, {
-                    ...data,
-                    href: flattenToAppURL(value),
-                  });
-                }}
-              />
-              <CheckboxWidget
-                id="openLinkInNewTab"
-                title={intl.formatMessage(messages.openLinkInNewTab)}
-                value={data.openLinkInNewTab ? data.openLinkInNewTab : false}
-                onChange={(name, value) => {
-                  onChangeBlock(block, {
-                    ...data,
-                    openLinkInNewTab: value,
-                  });
-                }}
-              />
-            </Accordion.Content>
-          </Accordion>
-          <Accordion fluid styled className="form">
-            <Accordion.Title
-              active={activeAccIndex === 1}
-              index={1}
-              onClick={handleAccClick}
-            >
-              Copyright
-              {activeAccIndex === 1 ? (
-                <Icon name={upSVG} size="20px" />
-              ) : (
-                <Icon name={downSVG} size="20px" />
-              )}
-            </Accordion.Title>
-            <Accordion.Content active={activeAccIndex === 1}>
-              <Segment className="form">
-                <TextWidget
-                  id="copyright"
-                  title={intl.formatMessage(messages.Copyright)}
-                  required={false}
-                  value={data.copyright}
-                  icon={data.copyright ? clearSVG : null}
-                  iconAction={() => onChangeField('copyright', '')}
-                  onChange={(name, value) => {
-                    onChangeBlock(block, {
-                      ...data,
-                      copyright: value,
-                    });
-                  }}
-                />
-                <TextWidget
-                  id="copyrightIcon"
-                  title={intl.formatMessage(messages.CopyrightIcon)}
-                  required={false}
-                  value={data.copyrightIcon}
-                  icon={data.copyrightIcon ? clearSVG : null}
-                  iconAction={() => onChangeField('copyrightIcon', '')}
-                  onChange={(name, value) => {
-                    onChangeBlock(block, {
-                      ...data,
-                      copyrightIcon: value,
-                    });
-                  }}
-                />
-                <Form.Field inline required={required}>
-                  <Grid>
-                    <Grid.Row>
-                      <Grid.Column width="4">
-                        <div className="wrapper">
-                          <label htmlFor="field-align">
-                            <FormattedMessage
-                              id="Alignment"
-                              defaultMessage="Alignment"
-                            />
-                          </label>
-                        </div>
-                      </Grid.Column>
-                      <Grid.Column width="8" className="align-tools">
-                        <AlignChooser
-                          align={data.copyrightPosition}
-                          actions={['left', 'right']}
-                          onChangeBlock={onChangeBlock}
-                          block={block}
-                          data={data}
-                        />
-                      </Grid.Column>
-                    </Grid.Row>
-                  </Grid>
-                </Form.Field>
-              </Segment>
-            </Accordion.Content>
-          </Accordion>
+          <BlockDataForm
+            schema={schema}
+            title={schema.title}
+            onChangeField={(id, value) => {
+              onChangeBlock(block, {
+                ...data,
+                [id]: value,
+              });
+            }}
+            onChangeBlock={onChangeBlock}
+            formData={data}
+            block={block}
+          />
         </>
       )}
     </Segment.Group>