From c002349bfa4d24fbf6ecac3775cf363065587918 Mon Sep 17 00:00:00 2001 From: andreiggr Date: Sat, 5 Nov 2022 20:22:05 +0200 Subject: [PATCH] fix layouts for new volto --- src/constants/Layouts.js | 11 +- src/constants/runtime.js | 6 +- .../components/manage/Display/Display.jsx | 254 ++++++++++++++++++ src/index.js | 1 - theme/site/extras/toolbar.less | 7 + 5 files changed, 267 insertions(+), 12 deletions(-) create mode 100644 src/customizations/volto/components/manage/Display/Display.jsx diff --git a/src/constants/Layouts.js b/src/constants/Layouts.js index 73b328b..ec4194f 100644 --- a/src/constants/Layouts.js +++ b/src/constants/Layouts.js @@ -1,11 +1,6 @@ +import config from '@plone/volto/registry'; + export default { - album_view: 'Album view', - event_listing: 'Event listing', - full_view: 'All content', - listing_view: 'Listing view', - summary_view: 'Summary view', - tabular_view: 'Tabular view', - layout_view: 'Mosaic layout', - document_view: 'Document view', + ...config.views.layoutViewsNamesMapping, country_tab_view: 'Country page', }; diff --git a/src/constants/runtime.js b/src/constants/runtime.js index 6c74cf7..5ea5498 100644 --- a/src/constants/runtime.js +++ b/src/constants/runtime.js @@ -1,4 +1,4 @@ -export const RAZZLE_FRONTEND_VERSION = 'eeacms/forests-frontend:2.4.3'; +export const RAZZLE_FRONTEND_VERSION = 'eeacms/forests-frontend:2.26.8'; export const RAZZLE_FRONTEND_VERSION_URL = - 'https://github.com/eea/forests-frontend/releases/tag/2.4.3'; -export const RAZZLE_FRONTEND_PUBLISHED_AT = '2021-06-18T15:15:04Z'; + 'https://github.com/eea/forests-frontend/releases/tag/2.26.8'; +export const RAZZLE_FRONTEND_PUBLISHED_AT = '2022-11-03T12:36:42Z'; diff --git a/src/customizations/volto/components/manage/Display/Display.jsx b/src/customizations/volto/components/manage/Display/Display.jsx new file mode 100644 index 0000000..5edbe84 --- /dev/null +++ b/src/customizations/volto/components/manage/Display/Display.jsx @@ -0,0 +1,254 @@ +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 { getSchema, 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 ( + + ); +}); + +const DropdownIndicator = injectLazyLibs('reactSelect')((props) => { + const { DropdownIndicator } = props.reactSelect.components; + return ( + + {props.selectProps.menuIsOpen ? ( + + ) : ( + + )} + + ); +}); + +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: '', + }; + + state = { + selectedOption: { + value: `${this.props.layout}`, + label: `${this.props?.layout}`, + }, + }; + + componentDidMount() { + this.props.getSchema(this.props.type); + console.log(config?.views?.layoutViewsNamesMapping, 'config'); + console.log(this.props.layout, 'config'); + } + + /** + * 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); + } + } + + /** + * 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) => ( + + {option.label} + + ); + + optionRenderer = (option) => ( + + {option.label} + + + ); + + render() { + 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: item, + })); + + return layoutOptions?.length > 1 ? ( + +