@eeacms/volto-eea-website-theme 1.4.1 → 1.5.0

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

@@ -0,0 +1,86 @@
+/**
+ * View image block.
+ * @module components/manage/Blocks/Image/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
+import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import './style.less';
+import { Icon } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * View image block class.
+ * @class View
+ * @extends Component
+ */
+const View = ({ data, properties }) => {
+  const { copyright, copyrightIcon, copyrightPosition } = data;
+
+  return (
+    <p
+      className={cx(
+        'block image align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {properties.image && (
+        <>
+          {(() => {
+            const image = (
+              <div className="image-block">
+                <img
+                  className={cx({ 'full-width': data.align === 'full' })}
+                  src={flattenToAppURL(properties.image.download)}
+                  alt={properties.image_caption || ''}
+                />
+                <div className="copyright-image">
+                  {copyright ? (
+                    <Copyright copyrightPosition={copyrightPosition}>
+                      <Copyright.Icon>
+                        <Icon className={copyrightIcon} />
+                      </Copyright.Icon>
+                      <Copyright.Text>{copyright}</Copyright.Text>
+                    </Copyright>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            );
+            if (data.href) {
+              return (
+                <UniversalLink
+                  href={data.href}
+                  openLinkInNewTab={data.openLinkInNewTab}
+                >
+                  {image}
+                </UniversalLink>
+              );
+            } else {
+              return image;
+            }
+          })()}
+        </>
+      )}
+    </p>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default View;

package/src/customizations/volto/components/manage/Blocks/LeadImage/style.less

@@ -0,0 +1,12 @@
+.image-block {
+  position: relative;
+}
+
+.copyright-image {
+  position: absolute;
+  z-index: 1000;
+  top: 90%;
+  width: 100%;
+  padding-right: 10px;
+  padding-left: 10px;
+}

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

@@ -201,6 +201,8 @@ class Form extends Component {
       selected: selectedBlock,
       multiSelected: [],
       isClient: false,
+      // Ensure focus remain in field after change
+      inFocus: {},
     };
     this.onChangeField = this.onChangeField.bind(this);
     this.onSelectBlock = this.onSelectBlock.bind(this);
@@ -324,6 +326,13 @@ class Form extends Component {
           [id]:
             value || (value !== undefined && isBoolean(value)) ? value : null,
         },
+        // Changing the form data re-renders the select widget which causes the
+        // focus to get lost. To circumvent this, we set the focus back to
+        // the input.
+        // This could fix other widgets too but currently targeted
+        // against the select widget only.
+        // Ensure field to be in focus after the change
+        inFocus: { [id]: true },
       };
     });
   }
@@ -441,7 +450,11 @@ class Form extends Component {
         () => {
           Object.keys(errors).forEach((err) =>
             toast.error(
-              <Toast error title={err} content={errors[err].join(', ')} />,
+              <Toast
+                error
+                title={this.props.schema.properties[err].title || err}
+                content={errors[err].join(', ')}
+              />,
             ),
           );
         },
@@ -603,7 +616,7 @@ class Form extends Component {
                           id={field}
                           fieldSet={item.title.toLowerCase()}
                           formData={this.state.formData}
-                          focus={false}
+                          focus={this.state.inFocus[field]}
                           value={this.state.formData?.[field]}
                           required={schema.required.indexOf(field) !== -1}
                           onChange={this.onChangeField}

package/src/customizations/volto/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -6,7 +6,6 @@ import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { flattenToAppURL, getContentIcon } from '@plone/volto/helpers';
 import { Image } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
-import '@eeacms/volto-eea-website-theme/../theme/site/imageicons/imageicons.less';
 
 import rightArrowSVG from '@plone/volto/icons/right-key.svg';
 import homeSVG from '@plone/volto/icons/home.svg';
@@ -84,7 +83,11 @@ const ObjectBrowserNav = ({
                     {item['@type'] === 'Image' ? (
                       <Image
                         src={`${item?.getURL}/@@images/image`}
-                        className="sidebar-image-icon"
+                        style={{
+                          marginRight: '10px',
+                          maxHeight: '24px',
+                          maxWidth: '24px',
+                        }}
                       />
                     ) : (
                       <Icon

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

@@ -53,7 +53,8 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
       (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
     return (
       has_home_layout &&
-      (pathname === router_pathname || router_pathname.endsWith('/edit'))
+      (removeTrailingSlash(pathname) === router_pathname ||
+        router_pathname.endsWith('/edit'))
     );
   });
 

package/theme/site/imageicons/imageicons.less

@@ -1,5 +0,0 @@
-.sidebar-image-icon {
-  margin-right: 10px;
-  height: 24px;
-  width: 24px;
-}