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

package/CHANGELOG.md

@@ -4,6 +4,43 @@ 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).
 
+### [1.10.0](https://github.com/eea/volto-eea-website-theme/compare/1.9.3...1.10.0) - 10 March 2023
+
+#### :nail_care: Enhancements
+
+- change(copyright): improvements to the position and the image size #92 from eea/better-copyright-align [ichim-david - [`14e41e0`](https://github.com/eea/volto-eea-website-theme/commit/14e41e0c2f848cedafb60eb8e5f67b134fff4f71)]
+- change(image): use great scale by default, huge for full width [David Ichim - [`beec7b7`](https://github.com/eea/volto-eea-website-theme/commit/beec7b709cbf3f2c519ac639c617cb7525d8f400)]
+- change(copyright): changed hidden class usage to hiddenStructure [David Ichim - [`a6cdb22`](https://github.com/eea/volto-eea-website-theme/commit/a6cdb2202b0573dad7e3c60cb16b3f01d91e1955)]
+- change(copyright): renamed copyright-image to copyright-wrapper [David Ichim - [`015d2e8`](https://github.com/eea/volto-eea-website-theme/commit/015d2e8c6183bd2f583db3d9f75a347281a19de2)]
+- change(copyright): removed style.less imports and avoid removal of copyright hover from dom [David Ichim - [`8647979`](https://github.com/eea/volto-eea-website-theme/commit/86479796a838dddef8c444a74a56659b3bb52d83)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.10.0 [Alin Voinea - [`ada8f7f`](https://github.com/eea/volto-eea-website-theme/commit/ada8f7f972e5a2301fa205cb3fda9bbc6cee8b10)]
+- bring back undefined value for No theme option of theme color picker [David Ichim - [`c9ca733`](https://github.com/eea/volto-eea-website-theme/commit/c9ca7339533ae4eab839b09cf2146df3ad26a2f7)]
+- icon closer to edges, eea colors, align text with container [andreiggr - [`eab7975`](https://github.com/eea/volto-eea-website-theme/commit/eab7975f6945a4ba935ae506bbf88569bef89c45)]
+- copyright always hoverable on LeadImage also [andreiggr - [`625c11c`](https://github.com/eea/volto-eea-website-theme/commit/625c11c8c7d80c45256a90c901661f3c7f9f4e6f)]
+- copyright always hoverable and settings for it also hidden if it is hidden [andreiggr - [`67c8baf`](https://github.com/eea/volto-eea-website-theme/commit/67c8baf8b5cf89d8a4d0c766bd3b77ca88a9d197)]
+- Separate hocs [dana-cfc4 - [`bd81285`](https://github.com/eea/volto-eea-website-theme/commit/bd812850acf8089b8b91632a0570eba1af994310)]
+- Copyright hover on mobile [dana-cfc4 - [`05db4f6`](https://github.com/eea/volto-eea-website-theme/commit/05db4f6a0e22671955b2a3a7bfa0943705c8a39a)]
+- Fix copyright bottom margin [dana-cfc4 - [`fadd874`](https://github.com/eea/volto-eea-website-theme/commit/fadd874c711f2990367050e30a06c25b05aa1e0a)]
+- no-theme is default [andreiggr - [`b6eda53`](https://github.com/eea/volto-eea-website-theme/commit/b6eda53948018a184d99f7fca84ae25678138264)]
+- allow render of image after container parent is rendered [andreiggr - [`182151a`](https://github.com/eea/volto-eea-website-theme/commit/182151aba6f11cccb6e8e67078f22df3ab7dd995)]
+- copyright align changes for lead image block too [andreiggr - [`eb8ed9b`](https://github.com/eea/volto-eea-website-theme/commit/eb8ed9b2c61e45490595e1406262ae85ceca09b4)]
+- comitt stash also [andreiggr - [`e8fd2c6`](https://github.com/eea/volto-eea-website-theme/commit/e8fd2c64b09dc1b72ba1ddfe5aa607188cffe0fd)]
+- postcss-less missing [andreiggr - [`b721d65`](https://github.com/eea/volto-eea-website-theme/commit/b721d65e513310911be37eab07a376465a22c40b)]
+- lintz [andreiggr - [`e3b974e`](https://github.com/eea/volto-eea-website-theme/commit/e3b974e9e85400a388026f5bf8dcaa1cb368d6b2)]
+- copyright dont show other than large image, and better alignment on hover [andreiggr - [`ceb1058`](https://github.com/eea/volto-eea-website-theme/commit/ceb105830a0caf919c62524a3cc5f7f9db99f19d)]
+- using intermediary container as floater container for image and copyright [andreiggr - [`d195a26`](https://github.com/eea/volto-eea-website-theme/commit/d195a265b57c2814ed746483d9fcb9736169c1e2)]
+- more image updates, fixed for out of content column [andreiggr - [`7254183`](https://github.com/eea/volto-eea-website-theme/commit/7254183d454f74d8f44f5cdc15089dea6dfcd390)]
+- Keep copyright hover inside image area [ichim-david - [`ae0b7ac`](https://github.com/eea/volto-eea-website-theme/commit/ae0b7ac0bbbb5cce5b3bd0cd312589ca418d257c)]
+- lint5 [andreiggr - [`97f31be`](https://github.com/eea/volto-eea-website-theme/commit/97f31be5b9e12adb120f59d0416d50768e341205)]
+- lint4 [andreiggr - [`f142ed7`](https://github.com/eea/volto-eea-website-theme/commit/f142ed73fa7716ab06fc2ef64875b693884bb0f7)]
+- lint3 [andreiggr - [`177c6e5`](https://github.com/eea/volto-eea-website-theme/commit/177c6e527f1f2f345ac29a942ca7361b1b8a022c)]
+- lint2 [andreiggr - [`d998041`](https://github.com/eea/volto-eea-website-theme/commit/d998041468f7aaea4278e056c686d8eca857596f)]
+- lint [andreiggr - [`76ec5b4`](https://github.com/eea/volto-eea-website-theme/commit/76ec5b469f28bb7ba7b56f2a05cbcb7975b63d43)]
+- copyright hoverable over 50chars [andreiggr - [`6051b2a`](https://github.com/eea/volto-eea-website-theme/commit/6051b2a11813c169153051d954e62ef66d4c5b38)]
+- another implementation of copyright align for image block [andreiggr - [`6daa5d5`](https://github.com/eea/volto-eea-website-theme/commit/6daa5d586097bcda5e61217dc8e9478e5ce06a6e)]
 ### [1.9.3](https://github.com/eea/volto-eea-website-theme/compare/1.9.2...1.9.3) - 10 March 2023
 
 #### :hammer_and_wrench: Others
@@ -17,7 +54,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6c5e2f8`](https://github.com/eea/volto-eea-website-theme/commit/6c5e2f80456e2061d9e9c15fd0a0b91b9ac70568)]
 ### [1.9.1](https://github.com/eea/volto-eea-website-theme/compare/1.9.0...1.9.1) - 28 February 2023
 
 #### :bug: Bug Fixes
@@ -164,7 +200,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -198,7 +233,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -208,7 +242,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -217,9 +250,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
-#### :hammer_and_wrench: Others
-
-- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -260,7 +290,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -308,7 +337,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -576,7 +604,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -618,5 +645,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -29,7 +29,8 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "postcss-less": "6.0.0"
   },
   "scripts": {
     "release": "release-it",

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

@@ -31,7 +31,6 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import uploadSVG from '@plone/volto/icons/upload.svg';
-import './style.less';
 const Dropzone = loadable(() => import('react-dropzone'));
 
 const messages = defineMessages({
@@ -240,6 +239,9 @@ class Edit extends Component {
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
     const { copyright, copyrightIcon, copyrightPosition } = data;
+
+    const showCopyright = data?.size === 'l' || !data.size;
+
     return (
       <div
         className={cx(
@@ -250,143 +252,160 @@ class Edit extends Component {
           data.align,
         )}
       >
-        {data.url ? (
-          <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')
+        <div
+          className={cx(
+            'image-block-container',
+            {
+              large: data.size === 'l',
+              medium: data.size === 'm',
+              small: data.size === 's',
+            },
+            data?.align ? data?.align : '',
+          )}
+        >
+          {data.url ? (
+            <>
+              <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/mini`;
-                      return `${flattenToAppURL(data.url)}/@@images/image`;
-                    })()
-                  : data.url
-              }
-              alt={data.alt || ''}
-            />
-            <div className="copyright-image">
-              {copyright ? (
-                <Copyright copyrightPosition={copyrightPosition}>
-                  <Copyright.Icon>
-                    <IconSemantic name={copyrightIcon} />
-                  </Copyright.Icon>
-                  <Copyright.Text>{copyright}</Copyright.Text>
-                </Copyright>
-              ) : (
-                ''
-              )}
-            </div>
-          </div>
-        ) : (
-          <div>
-            {this.props.editable && (
-              <Dropzone
-                noClick
-                onDrop={this.onDrop}
-                onDragEnter={this.onDragEnter}
-                onDragLeave={this.onDragLeave}
-                className="dropzone"
-              >
-                {({ getRootProps, getInputProps }) => (
-                  <div {...getRootProps()}>
-                    <Message>
-                      {this.state.dragging && <Dimmer active></Dimmer>}
-                      {this.state.uploading && (
-                        <Dimmer active>
-                          <Loader indeterminate>Uploading image</Loader>
-                        </Dimmer>
-                      )}
-                      <div className="no-image-wrapper">
-                        <img src={imageBlockSVG} alt="" />
-                        <div className="toolbar-inner">
-                          <Button.Group>
-                            <Button
-                              basic
-                              icon
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                this.props.openObjectBrowser();
-                              }}
-                            >
-                              <Icon name={navTreeSVG} size="24px" />
-                            </Button>
-                          </Button.Group>
-                          <Button.Group>
-                            <label className="ui button basic icon">
-                              <Icon name={uploadSVG} size="24px" />
-                              <input
-                                {...getInputProps({
-                                  type: 'file',
-                                  onChange: this.onUploadImage,
-                                  style: { display: 'none' },
-                                })}
-                              />
-                            </label>
-                          </Button.Group>
-                          <Input
-                            onKeyDown={this.onKeyDownVariantMenuForm}
-                            onChange={this.onChangeUrl}
-                            placeholder={placeholder}
-                            value={this.state.url}
-                            onClick={(e) => {
-                              e.target.focus();
-                            }}
-                            onFocus={(e) => {
-                              this.props.onSelectBlock(this.props.id);
-                            }}
-                          />
-                          {this.state.url && (
+                        )}/@@images/image/great`;
+                      })()
+                    : data.url
+                }
+                alt={data.alt || ''}
+              />
+              <div className={`copyright-wrapper ${copyrightPosition}`}>
+                {copyright && showCopyright ? (
+                  <Copyright copyrightPosition={copyrightPosition}>
+                    <Copyright.Icon>
+                      <IconSemantic name={copyrightIcon} />
+                    </Copyright.Icon>
+                    <Copyright.Text>{copyright}</Copyright.Text>
+                  </Copyright>
+                ) : (
+                  ''
+                )}
+              </div>
+            </>
+          ) : (
+            <div>
+              {this.props.editable && (
+                <Dropzone
+                  noClick
+                  onDrop={this.onDrop}
+                  onDragEnter={this.onDragEnter}
+                  onDragLeave={this.onDragLeave}
+                  className="dropzone"
+                >
+                  {({ getRootProps, getInputProps }) => (
+                    <div {...getRootProps()}>
+                      <Message>
+                        {this.state.dragging && <Dimmer active></Dimmer>}
+                        {this.state.uploading && (
+                          <Dimmer active>
+                            <Loader indeterminate>Uploading image</Loader>
+                          </Dimmer>
+                        )}
+                        <div className="no-image-wrapper">
+                          <img src={imageBlockSVG} alt="" />
+                          <div className="toolbar-inner">
                             <Button.Group>
                               <Button
                                 basic
-                                className="cancel"
+                                icon
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  this.setState({ url: '' });
+                                  e.preventDefault();
+                                  this.props.openObjectBrowser();
                                 }}
                               >
-                                <Icon name={clearSVG} size="30px" />
+                                <Icon name={navTreeSVG} size="24px" />
                               </Button>
                             </Button.Group>
-                          )}
-                          <Button.Group>
-                            <Button
-                              basic
-                              primary
-                              disabled={!this.state.url}
+                            <Button.Group>
+                              <label className="ui button basic icon">
+                                <Icon name={uploadSVG} size="24px" />
+                                <input
+                                  {...getInputProps({
+                                    type: 'file',
+                                    onChange: this.onUploadImage,
+                                    style: { display: 'none' },
+                                  })}
+                                />
+                              </label>
+                            </Button.Group>
+                            <Input
+                              onKeyDown={this.onKeyDownVariantMenuForm}
+                              onChange={this.onChangeUrl}
+                              placeholder={placeholder}
+                              value={this.state.url}
                               onClick={(e) => {
-                                e.stopPropagation();
-                                this.onSubmitUrl();
+                                e.target.focus();
+                              }}
+                              onFocus={(e) => {
+                                this.props.onSelectBlock(this.props.id);
                               }}
-                            >
-                              <Icon name={aheadSVG} size="30px" />
-                            </Button>
-                          </Button.Group>
+                            />
+                            {this.state.url && (
+                              <Button.Group>
+                                <Button
+                                  basic
+                                  className="cancel"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    this.setState({ url: '' });
+                                  }}
+                                >
+                                  <Icon name={clearSVG} size="30px" />
+                                </Button>
+                              </Button.Group>
+                            )}
+                            <Button.Group>
+                              <Button
+                                basic
+                                primary
+                                disabled={!this.state.url}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  this.onSubmitUrl();
+                                }}
+                              >
+                                <Icon name={aheadSVG} size="30px" />
+                              </Button>
+                            </Button.Group>
+                          </div>
                         </div>
-                      </div>
-                    </Message>
-                  </div>
-                )}
-              </Dropzone>
-            )}
-          </div>
-        )}
+                      </Message>
+                    </div>
+                  )}
+                </Dropzone>
+              )}
+            </div>
+          )}
+        </div>
         <SidebarPortal selected={this.props.selected}>
           <ImageSidebar {...this.props} />
         </SidebarPortal>