@eeacms/volto-eea-website-theme 0.6.14 → 0.6.15

package/CHANGELOG.md

@@ -4,8 +4,16 @@ 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).
 
+#### [0.6.15](https://github.com/eea/volto-eea-website-theme/compare/0.6.14...0.6.15)
+
+- Moved customized Toolbar to volto-eea-website-policy [`403b06d`](https://github.com/eea/volto-eea-website-theme/commit/403b06dd1225f4f15883d938d47facfe730a3699)
+- change(logo): use a real svg logo for white eea logo [`e2703af`](https://github.com/eea/volto-eea-website-theme/commit/e2703af2bf3779ad3aa21fa673fa5652691a9f25)
+
 #### [0.6.14](https://github.com/eea/volto-eea-website-theme/compare/0.6.13...0.6.14)
 
+> 30 June 2022
+
+- develop [`#46`](https://github.com/eea/volto-eea-website-theme/pull/46)
 - change(header): show eea information systems on mobile [`abdf181`](https://github.com/eea/volto-eea-website-theme/commit/abdf1819465ba1ca582c2a2d82ec02a137c0cf7f)
 - change(pageheader): share dropdown appears below the share icon [`10aaafc`](https://github.com/eea/volto-eea-website-theme/commit/10aaafc79d03784972b7cf40639077246340eda9)
 - change(pageheader): removed blogger, reddit and stumbleupon sharing links [`0f7d887`](https://github.com/eea/volto-eea-website-theme/commit/0f7d88700076704abb04ba1bf806ab669fe085be)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "0.6.14",
+  "version": "0.6.15",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/config.js

@@ -8,7 +8,7 @@ import copernicusLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/
 import industryLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
 import marineLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
 import eionetLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
-import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
+import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
 import climateLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/climate-health.svg';
 
 // TODO: to be consolidated with headerLinks

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

@@ -18,7 +18,7 @@ import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
 import { find } from 'lodash';
-import WhiteLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
+import WhiteLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
 import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';

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

@@ -1,589 +0,0 @@
-/**
- * Toolbar component.
- * @module components/manage/Toolbar/Toolbar
- */
-
-import React, { Component } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import jwtDecode from 'jwt-decode';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import { withCookies } from 'react-cookie';
-import { filter, find } from 'lodash';
-import cx from 'classnames';
-import config from '@plone/volto/registry';
-
-import More from '@plone/volto/components/manage/Toolbar/More';
-import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
-import Types from '@plone/volto/components/manage/Toolbar/Types';
-import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
-import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
-import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
-import {
-  getTypes,
-  listActions,
-  setExpandedToolbar,
-  unlockContent,
-} from '@plone/volto/actions';
-import { Icon } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
-import { Pluggable } from '@plone/volto/components/manage/Pluggable';
-
-import penSVG from '@plone/volto/icons/pen.svg';
-import unlockSVG from '@plone/volto/icons/unlock.svg';
-import folderSVG from '@plone/volto/icons/folder.svg';
-import addSVG from '@plone/volto/icons/add-document.svg';
-import moreSVG from '@plone/volto/icons/more.svg';
-import userSVG from '@plone/volto/icons/user.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-
-const messages = defineMessages({
-  edit: {
-    id: 'Edit',
-    defaultMessage: 'Edit',
-  },
-  contents: {
-    id: 'Contents',
-    defaultMessage: 'Contents',
-  },
-  add: {
-    id: 'Add',
-    defaultMessage: 'Add',
-  },
-  more: {
-    id: 'More',
-    defaultMessage: 'More',
-  },
-  personalTools: {
-    id: 'Personal tools',
-    defaultMessage: 'Personal tools',
-  },
-  shrinkToolbar: {
-    id: 'Shrink toolbar',
-    defaultMessage: 'Shrink toolbar',
-  },
-  personalInformation: {
-    id: 'Personal Information',
-    defaultMessage: 'Personal Information',
-  },
-  personalPreferences: {
-    id: 'Personal Preferences',
-    defaultMessage: 'Personal Preferences',
-  },
-  collection: {
-    id: 'Collection',
-    defaultMessage: 'Collection',
-  },
-  file: {
-    id: 'File',
-    defaultMessage: 'File',
-  },
-  link: {
-    id: 'Link',
-    defaultMessage: 'Link',
-  },
-  newsItem: {
-    id: 'News Item',
-    defaultMessage: 'News Item',
-  },
-  page: {
-    id: 'Page',
-    defaultMessage: 'Page',
-  },
-  back: {
-    id: 'Back',
-    defaultMessage: 'Back',
-  },
-  unlock: {
-    id: 'Unlock',
-    defaultMessage: 'Unlock',
-  },
-});
-
-const toolbarComponents = {
-  personalTools: { component: PersonalTools, wrapper: null },
-  more: { component: More, wrapper: null },
-  types: { component: Types, wrapper: null, contentAsProps: true },
-  profile: {
-    component: PersonalInformation,
-    wrapper: StandardWrapper,
-    wrapperTitle: messages.personalInformation,
-    hideToolbarBody: true,
-  },
-  preferences: {
-    component: PersonalPreferences,
-    wrapper: StandardWrapper,
-    wrapperTitle: messages.personalPreferences,
-    hideToolbarBody: true,
-  },
-};
-
-/**
- * Toolbar container class.
- * @class Toolbar
- * @extends Component
- */
-class Toolbar extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    actions: PropTypes.shape({
-      object: PropTypes.arrayOf(PropTypes.object),
-      object_buttons: PropTypes.arrayOf(PropTypes.object),
-      user: PropTypes.arrayOf(PropTypes.object),
-    }),
-    token: PropTypes.string,
-    userId: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-    content: PropTypes.shape({
-      '@type': PropTypes.string,
-      is_folderish: PropTypes.bool,
-      review_state: PropTypes.string,
-    }),
-    getTypes: PropTypes.func.isRequired,
-    types: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        addable: PropTypes.bool,
-        title: PropTypes.string,
-      }),
-    ),
-    listActions: PropTypes.func.isRequired,
-    unlockContent: PropTypes.func,
-    unlockRequest: PropTypes.objectOf(PropTypes.any),
-    inner: PropTypes.element.isRequired,
-    hideDefaultViewButtons: PropTypes.bool,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    actions: null,
-    token: null,
-    userId: null,
-    content: null,
-    hideDefaultViewButtons: false,
-    types: [],
-  };
-
-  toolbarWindow = React.createRef();
-
-  constructor(props) {
-    super(props);
-    const { cookies } = props;
-    this.state = {
-      expanded: cookies.get('toolbar_expanded') !== 'false',
-      showMenu: false,
-      menuStyle: {},
-      menuComponents: [],
-      loadedComponents: [],
-      hideToolbarBody: false,
-    };
-  }
-
-  /**
-   * Component will mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
-    this.props.getTypes(getBaseUrl(this.props.pathname));
-    this.props.setExpandedToolbar(this.state.expanded);
-    document.addEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
-      this.props.getTypes(getBaseUrl(nextProps.pathname));
-    }
-
-    // Unlock
-    if (this.props.unlockRequest.loading && nextProps.unlockRequest.loaded) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillUnmount
-   * @returns {undefined}
-   */
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  handleShrink = () => {
-    const { cookies } = this.props;
-    cookies.set('toolbar_expanded', !this.state.expanded, getCookieOptions());
-    this.setState(
-      (state) => ({ expanded: !state.expanded }),
-      () => this.props.setExpandedToolbar(this.state.expanded),
-    );
-  };
-
-  closeMenu = () =>
-    this.setState(() => ({ showMenu: false, loadedComponents: [] }));
-
-  loadComponent = (type) => {
-    const { loadedComponents } = this.state;
-    if (!this.state.loadedComponents.includes(type)) {
-      this.setState({
-        loadedComponents: [...loadedComponents, type],
-        hideToolbarBody: toolbarComponents[type].hideToolbarBody || false,
-      });
-    }
-  };
-
-  unloadComponent = () => {
-    this.setState((state) => ({
-      loadedComponents: state.loadedComponents.slice(0, -1),
-      hideToolbarBody:
-        toolbarComponents[
-          state.loadedComponents[state.loadedComponents.length - 2]
-        ].hideToolbarBody || false,
-    }));
-  };
-
-  toggleMenu = (e, selector) => {
-    if (this.state.showMenu) {
-      this.closeMenu();
-      return;
-    }
-    // PersonalTools always shows at bottom
-    if (selector === 'personalTools') {
-      this.setState((state) => ({
-        showMenu: !state.showMenu,
-        menuStyle: { bottom: 0 },
-      }));
-    } else {
-      this.setState((state) => ({
-        showMenu: !state.showMenu,
-        menuStyle: { top: 0 },
-      }));
-    }
-    this.loadComponent(selector);
-  };
-
-  handleClickOutside = (e) => {
-    if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
-    this.closeMenu();
-  };
-
-  unlock = (e) => {
-    this.props.unlockContent(getBaseUrl(this.props.pathname), true);
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const path = getBaseUrl(this.props.pathname);
-    const lock = this.props.content?.lock;
-    const unlockAction =
-      lock?.locked && lock?.stealable && lock?.creator !== this.props.userId;
-    const editAction =
-      !unlockAction && find(this.props.actions.object, { id: 'edit' });
-    const folderContentsAction = find(this.props.actions.object, {
-      id: 'folderContents',
-    });
-    const { expanded } = this.state;
-
-    return (
-      this.props.token && (
-        <>
-          <BodyClass
-            className={expanded ? 'has-toolbar' : 'has-toolbar-collapsed'}
-          />
-          <div
-            style={this.state.menuStyle}
-            className={
-              this.state.showMenu ? 'toolbar-content show' : 'toolbar-content'
-            }
-            ref={this.toolbarWindow}
-          >
-            {this.state.showMenu && (
-              // This sets the scroll locker in the body tag in mobile
-              <BodyClass className="has-toolbar-menu-open" />
-            )}
-            <div
-              className="pusher-puller"
-              ref={(node) => (this.pusher = node)}
-              style={{
-                transform: this.toolbarWindow.current
-                  ? `translateX(-${
-                      (this.state.loadedComponents.length - 1) *
-                      this.toolbarWindow.current.getBoundingClientRect().width
-                    }px)`
-                  : null,
-              }}
-            >
-              {this.state.loadedComponents.map((component, index) =>
-                (() => {
-                  const ToolbarComponent =
-                    toolbarComponents[component].component;
-                  const WrapperComponent = toolbarComponents[component].wrapper;
-                  const haveActions =
-                    toolbarComponents[component].hideToolbarBody;
-                  const title =
-                    toolbarComponents[component].wrapperTitle &&
-                    this.props.intl.formatMessage(
-                      toolbarComponents[component].wrapperTitle,
-                    );
-                  if (WrapperComponent) {
-                    return (
-                      <WrapperComponent
-                        componentName={component}
-                        componentTitle={title}
-                        pathname={this.props.pathname}
-                        loadComponent={this.loadComponent}
-                        unloadComponent={this.unloadComponent}
-                        componentIndex={index}
-                        theToolbar={this.toolbarWindow}
-                        key={`personalToolsComponent-${index}`}
-                        closeMenu={this.closeMenu}
-                        hasActions={haveActions}
-                      >
-                        <ToolbarComponent
-                          pathname={this.props.pathname}
-                          loadComponent={this.loadComponent}
-                          unloadComponent={this.unloadComponent}
-                          componentIndex={index}
-                          theToolbar={this.toolbarWindow}
-                          closeMenu={this.closeMenu}
-                          isToolbarEmbedded
-                        />
-                      </WrapperComponent>
-                    );
-                  } else {
-                    return (
-                      <ToolbarComponent
-                        pathname={this.props.pathname}
-                        loadComponent={this.loadComponent}
-                        unloadComponent={this.unloadComponent}
-                        componentIndex={index}
-                        theToolbar={this.toolbarWindow}
-                        key={`personalToolsComponent-${index}`}
-                        closeMenu={this.closeMenu}
-                        content={
-                          toolbarComponents[component].contentAsProps
-                            ? this.props.content
-                            : null
-                        }
-                      />
-                    );
-                  }
-                })(),
-              )}
-            </div>
-          </div>
-          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
-            <div className="toolbar-body">
-              <div className="toolbar-actions">
-                {this.props.hideDefaultViewButtons && this.props.inner && (
-                  <>{this.props.inner}</>
-                )}
-                {!this.props.hideDefaultViewButtons && (
-                  <>
-                    {unlockAction && (
-                      <button
-                        aria-label={this.props.intl.formatMessage(
-                          messages.unlock,
-                        )}
-                        className="unlock"
-                        onClick={(e) => this.unlock(e)}
-                        tabIndex={0}
-                      >
-                        <Icon
-                          name={unlockSVG}
-                          size="30px"
-                          className="unlock"
-                          title={this.props.intl.formatMessage(messages.unlock)}
-                        />
-                      </button>
-                    )}
-
-                    {editAction && (
-                      <Link
-                        aria-label={this.props.intl.formatMessage(
-                          messages.edit,
-                        )}
-                        className="edit"
-                        to={`${path}/edit`}
-                      >
-                        <Icon
-                          name={penSVG}
-                          size="30px"
-                          className="circled"
-                          title={this.props.intl.formatMessage(messages.edit)}
-                        />
-                      </Link>
-                    )}
-                    {this.props.content &&
-                      this.props.content.is_folderish &&
-                      folderContentsAction &&
-                      !this.props.pathname.endsWith('/contents') && (
-                        <Link
-                          aria-label={this.props.intl.formatMessage(
-                            messages.contents,
-                          )}
-                          to={`${path}/contents`}
-                        >
-                          <Icon
-                            name={folderSVG}
-                            size="30px"
-                            title={this.props.intl.formatMessage(
-                              messages.contents,
-                            )}
-                          />
-                        </Link>
-                      )}
-                    {this.props.content &&
-                      this.props.content.is_folderish &&
-                      folderContentsAction &&
-                      this.props.pathname.endsWith('/contents') && (
-                        <Link
-                          to={`${path}`}
-                          aria-label={this.props.intl.formatMessage(
-                            messages.back,
-                          )}
-                        >
-                          <Icon
-                            name={clearSVG}
-                            className="contents circled"
-                            size="30px"
-                            title={this.props.intl.formatMessage(messages.back)}
-                          />
-                        </Link>
-                      )}
-                    {this.props.content &&
-                      ((this.props.content.is_folderish &&
-                        this.props.types.length > 0) ||
-                        (config.settings.isMultilingual &&
-                          this.props.content['@components']?.translations)) && (
-                        <button
-                          className="add"
-                          aria-label={this.props.intl.formatMessage(
-                            messages.add,
-                          )}
-                          onClick={(e) => this.toggleMenu(e, 'types')}
-                          tabIndex={0}
-                          id="toolbar-add"
-                        >
-                          <Icon
-                            name={addSVG}
-                            size="30px"
-                            title={this.props.intl.formatMessage(messages.add)}
-                          />
-                        </button>
-                      )}
-                    <div className="toolbar-button-spacer" />
-                    <button
-                      className="more"
-                      aria-label={this.props.intl.formatMessage(messages.more)}
-                      onClick={(e) => this.toggleMenu(e, 'more')}
-                      tabIndex={0}
-                      id="toolbar-more"
-                    >
-                      <Icon
-                        className="mobile hidden"
-                        name={moreSVG}
-                        size="30px"
-                        title={this.props.intl.formatMessage(messages.more)}
-                      />
-                      {this.state.showMenu ? (
-                        <Icon
-                          className="mobile only"
-                          name={clearSVG}
-                          size="30px"
-                        />
-                      ) : (
-                        <Icon
-                          className="mobile only"
-                          name={moreSVG}
-                          size="30px"
-                        />
-                      )}
-                    </button>
-                  </>
-                )}
-              </div>
-              <div className="toolbar-bottom">
-                <Pluggable name="main.toolbar.bottom" />
-                {!this.props.hideDefaultViewButtons && (
-                  <button
-                    className="user"
-                    aria-label={this.props.intl.formatMessage(
-                      messages.personalTools,
-                    )}
-                    onClick={(e) => this.toggleMenu(e, 'personalTools')}
-                    tabIndex={0}
-                    id="toolbar-personal"
-                  >
-                    <Icon
-                      name={userSVG}
-                      size="30px"
-                      title={this.props.intl.formatMessage(
-                        messages.personalTools,
-                      )}
-                    />
-                  </button>
-                )}
-              </div>
-            </div>
-            <div className="toolbar-handler">
-              <button
-                aria-label={this.props.intl.formatMessage(
-                  messages.shrinkToolbar,
-                )}
-                className={cx({
-                  [this.props.content?.review_state]: this.props.content
-                    ?.review_state,
-                })}
-                onClick={this.handleShrink}
-              />
-            </div>
-          </div>
-          <div className="pusher" />
-        </>
-      )
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  withCookies,
-  connect(
-    (state, props) => ({
-      actions: state.actions.actions,
-      token: state.userSession.token,
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-      content: state.content.data,
-      pathname: props.pathname,
-      types: filter(state.types.types, 'addable'),
-      unlockRequest: state.content.unlock,
-    }),
-    { getTypes, listActions, setExpandedToolbar, unlockContent },
-  ),
-)(Toolbar);