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 ? (
+
+
+
+ ) : null;
+ }
+}
+
+export default compose(
+ injectIntl,
+ injectLazyLibs('reactSelect'),
+ connect(
+ (state) => ({
+ loaded: state.content.update.loaded,
+ layouts: state.schema.schema ? state.schema.schema.layouts : [],
+ layout: state.content.data
+ ? state.content.data[getLayoutFieldname(state.content.data)]
+ : '',
+ layout_fieldname: state.content.data
+ ? getLayoutFieldname(state.content.data)
+ : '',
+ type: state.content.data ? state.content.data['@type'] : '',
+ }),
+ { getSchema, updateContent, getContent },
+ ),
+)(DisplaySelect);
diff --git a/src/index.js b/src/index.js
index 3747cb2..60916d4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -130,6 +130,5 @@ export default function applyConfig(config) {
// { cssClass: 'green-block-text', label: 'Green Text' },
// { cssClass: 'underline-block-text', label: 'Underline Text' },
// ];
-
return config;
}
diff --git a/theme/site/extras/toolbar.less b/theme/site/extras/toolbar.less
index 2ecaac6..5f9496a 100644
--- a/theme/site/extras/toolbar.less
+++ b/theme/site/extras/toolbar.less
@@ -624,6 +624,13 @@
flex: 1 0 75%;
}
+ .field-wrapper-state-select {
+ width: 100%;
+ }
+ .field-wrapper-display-select {
+ width: 100%;
+ }
+
label {
flex: 1 0 25%;
padding-top: 18px;