From e5bdcdbd8ea823ee69cd060f76d5fd901c40eef4 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Fri, 22 Dec 2023 12:40:12 +0100 Subject: [PATCH 01/14] Feature: Add basic colors to dimensions dropdown --- .../DimensionSwitcher/DimensionSelector.js | 2 ++ .../DimensionSelectorOption.js | 11 +++++--- .../PrimaryToolbar/DimensionSwitcher/index.js | 27 ++++++++++++++++--- .../DimensionSwitcher/style.module.css | 7 +++-- 4 files changed, 39 insertions(+), 8 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index ded65d67da..22a1e8b72c 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -45,10 +45,12 @@ export default class DimensionSelector extends PureComponent { const presetOptions = mapValues( presets, (presetConfiguration, presetName) => { + return { label: presetConfiguration?.label, value: presetName, disallowed: presetConfiguration?.disallowed, + existing: presetConfiguration?.existing, group: presetConfiguration?.group }; } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index e580931b2f..ece33dff54 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -3,23 +3,28 @@ import PropTypes from 'prop-types'; import style from './style.module.css'; // eslint-disable-next-line camelcase import SelectBox_Option_SingleLine from '@neos-project/react-ui-components/src/SelectBox_Option_SingleLine/index'; +import mergeClassNames from 'classnames'; export default class DimensionSelectorOption extends PureComponent { static propTypes = { option: PropTypes.shape({ label: PropTypes.string.isRequired, - disallowed: PropTypes.bool + disallowed: PropTypes.bool, + existing: PropTypes.bool }) }; - render() { const {option} = this.props; + const className = mergeClassNames({ + [style.disallowed]: option.disallowed, + [style.nonExistent]: !option.existing + }); return ( // eslint-disable-next-line camelcase ); diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 1c71e90942..2dde775f0e 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -33,7 +33,9 @@ SelectedPreset.propTypes = { @connect($transform({ contentDimensions: selectors.CR.ContentDimensions.byName, allowedPresets: selectors.CR.ContentDimensions.allowedPresets, - activePresets: selectors.CR.ContentDimensions.activePresets + activePresets: selectors.CR.ContentDimensions.activePresets, + getNodeByContextPath: selectors.CR.Nodes.nodeByContextPath, + documentNode: selectors.CR.Nodes.documentNodeSelector }), { selectPreset: actions.CR.ContentDimensions.selectPreset, setAllowed: actions.CR.ContentDimensions.setAllowed @@ -47,6 +49,8 @@ export default class DimensionSwitcher extends PureComponent { activePresets: PropTypes.object.isRequired, allowedPresets: PropTypes.object.isRequired, selectPreset: PropTypes.func.isRequired, + getNodeByContextPath: PropTypes.func.isRequired, + documentNode: PropTypes.string.isRequired, setAllowed: PropTypes.func.isRequired, i18nRegistry: PropTypes.object.isRequired @@ -254,16 +258,33 @@ export default class DimensionSwitcher extends PureComponent { return null; } + getDocumentDimensions(dimensionName) { + const {getNodeByContextPath, documentNode, allowedPresets} = this.props; + const currentDocumentNode = getNodeByContextPath(documentNode.contextPath) + + if(!currentDocumentNode.dimensions) return allowedPresets[dimensionName] + + let variants = currentDocumentNode?.otherNodeVariants; + let dimensions = [currentDocumentNode.dimensions[dimensionName]]; + + Object.values(variants).forEach(entry => { + if(entry[dimensionName]) dimensions.push(entry[dimensionName]); + }); + + return dimensions; + } + presetsForDimension(dimensionName) { const {contentDimensions, allowedPresets, i18nRegistry} = this.props; const dimensionConfiguration = $get(dimensionName, contentDimensions); - + const documentDimensions = this.getDocumentDimensions(dimensionName); return mapValues(dimensionConfiguration.presets, (presetConfiguration, presetName) => { return Object.assign({}, presetConfiguration, { label: i18nRegistry.translate(presetConfiguration.label), - disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)) + disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), + existing: (documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension))), }); }); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css index d3a87a2db3..f5c9d350c2 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -60,8 +60,11 @@ } } -.dimmed { - filter: opacity(50%); +.nonExistent { + opacity: 0.5; +} +.disallowed { + background-color: var(--colors-ContrastBright); } .selectPreset + .selectPreset { From afd89aa5064d658bf51df282be89e975323fc414 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Wed, 27 Dec 2023 11:37:25 +0100 Subject: [PATCH 02/14] Feature: Add for single dimensions --- .../DimensionSelectorOption.js | 2 +- .../PrimaryToolbar/DimensionSwitcher/index.js | 21 +++++++++++++------ .../DimensionSwitcher/style.module.css | 2 +- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index ece33dff54..d9be035428 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -25,7 +25,7 @@ export default class DimensionSelectorOption extends PureComponent { ); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 2dde775f0e..211b1e520c 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -50,7 +50,7 @@ export default class DimensionSwitcher extends PureComponent { allowedPresets: PropTypes.object.isRequired, selectPreset: PropTypes.func.isRequired, getNodeByContextPath: PropTypes.func.isRequired, - documentNode: PropTypes.string.isRequired, + documentNode: PropTypes.object.isRequired, setAllowed: PropTypes.func.isRequired, i18nRegistry: PropTypes.object.isRequired @@ -159,6 +159,16 @@ export default class DimensionSwitcher extends PureComponent { this.setState({isOpen: false}); } + createDirectDimensionsLink = (dimensionName, presetConfigurationValues ) => { + const {documentNode} = this.props; + + const nodeContextPath = documentNode.properties._path + ';' + dimensionName + '=' + presetConfigurationValues.join(',') + const uri = new URL(window.location.href); + uri.searchParams.set('node', nodeContextPath); + //console.log(uri.toString()); + return uri.toString(); + } + renderSingleDimensionSelector = (dimensionName, contentDimensionsObject) => { const dimensionConfiguration = contentDimensionsObject[dimensionName]; const icon = this.getDimensionIcon(dimensionName, contentDimensionsObject); @@ -259,18 +269,16 @@ export default class DimensionSwitcher extends PureComponent { return null; } getDocumentDimensions(dimensionName) { - const {getNodeByContextPath, documentNode, allowedPresets} = this.props; + const {getNodeByContextPath, documentNode, allowedPresets, activePresets} = this.props; const currentDocumentNode = getNodeByContextPath(documentNode.contextPath) - if(!currentDocumentNode.dimensions) return allowedPresets[dimensionName] let variants = currentDocumentNode?.otherNodeVariants; let dimensions = [currentDocumentNode.dimensions[dimensionName]]; Object.values(variants).forEach(entry => { - if(entry[dimensionName]) dimensions.push(entry[dimensionName]); + dimensions.push(entry[dimensionName]); }); - return dimensions; } @@ -284,7 +292,8 @@ export default class DimensionSwitcher extends PureComponent { return Object.assign({}, presetConfiguration, { label: i18nRegistry.translate(presetConfiguration.label), disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), - existing: (documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension))), + existing: documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension)), + uri: this.createDirectDimensionsLink( dimensionName, presetConfiguration.values) }); }); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css index f5c9d350c2..34e42e18f1 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -64,7 +64,7 @@ opacity: 0.5; } .disallowed { - background-color: var(--colors-ContrastBright); + text-decoration: line-through; } .selectPreset + .selectPreset { From 97c025f8d86815e301a97ee510c09f5c96b77858 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Thu, 28 Dec 2023 15:01:19 +0100 Subject: [PATCH 03/14] Feature: Add logic for twodimensional dropdown --- .../PrimaryToolbar/DimensionSwitcher/index.js | 36 ++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 211b1e520c..07f7142fec 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -68,6 +68,17 @@ export default class DimensionSwitcher extends PureComponent { loadingPresets: {} }; + componentDidMount() { + const activePresets = mapValues( + this.props.activePresets, + dimensionPreset => dimensionPreset.name + ); + this.setState({ + transientPresets: activePresets + }); + console.log(this.state.transientPresets); + } + getDimensionIcon = (dimensionName, contentDimensionsObject) => { const dimensionConfiguration = contentDimensionsObject[dimensionName]; return dimensionConfiguration?.icon || null; @@ -146,6 +157,7 @@ export default class DimensionSwitcher extends PureComponent { } } + handleApplyPresets = () => { this.props.selectPreset(this.state.transientPresets); this.setState({isOpen: false, transientPresets: {}}); @@ -269,16 +281,32 @@ export default class DimensionSwitcher extends PureComponent { return null; } getDocumentDimensions(dimensionName) { - const {getNodeByContextPath, documentNode, allowedPresets, activePresets} = this.props; + const {getNodeByContextPath, documentNode, allowedPresets, contentDimensions} = this.props; const currentDocumentNode = getNodeByContextPath(documentNode.contextPath) - if(!currentDocumentNode.dimensions) return allowedPresets[dimensionName] + if(!currentDocumentNode.dimensions){ + return allowedPresets[dimensionName] + } - let variants = currentDocumentNode?.otherNodeVariants; - let dimensions = [currentDocumentNode.dimensions[dimensionName]]; + let variants = [...currentDocumentNode?.otherNodeVariants]; + variants.push(currentDocumentNode.dimensions) + for(let dimensionKey of Object.keys(contentDimensions)){ + if(dimensionKey == dimensionName) { + break; + } + Object.entries(variants).forEach(entry => { + const [key, value] = entry; + if(value[dimensionKey] != this.state.transientPresets[dimensionKey]){ + delete variants[key] + } + }); + } + let dimensions = [] Object.values(variants).forEach(entry => { + dimensions.push(entry[dimensionName]); }); + return dimensions; } From b838ab81faf46c63f7284c83c43da38eb494aaec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Gu=CC=88nther?= Date: Thu, 28 Dec 2023 15:21:54 +0100 Subject: [PATCH 04/14] TASK: Fix linting issues --- .../DimensionSwitcher/DimensionSelector.js | 1 - .../DimensionSelectorOption.js | 3 ++- .../PrimaryToolbar/DimensionSwitcher/index.js | 26 +++++++++---------- .../DimensionSwitcher/style.module.css | 2 +- 4 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index 22a1e8b72c..70666ee17f 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -45,7 +45,6 @@ export default class DimensionSelector extends PureComponent { const presetOptions = mapValues( presets, (presetConfiguration, presetName) => { - return { label: presetConfiguration?.label, value: presetName, diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index d9be035428..75f73cb87c 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -13,6 +13,7 @@ export default class DimensionSelectorOption extends PureComponent { existing: PropTypes.bool }) }; + render() { const {option} = this.props; const className = mergeClassNames({ @@ -25,7 +26,7 @@ export default class DimensionSelectorOption extends PureComponent { ); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 07f7142fec..7574d9dc37 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -157,7 +157,6 @@ export default class DimensionSwitcher extends PureComponent { } } - handleApplyPresets = () => { this.props.selectPreset(this.state.transientPresets); this.setState({isOpen: false, transientPresets: {}}); @@ -171,13 +170,13 @@ export default class DimensionSwitcher extends PureComponent { this.setState({isOpen: false}); } - createDirectDimensionsLink = (dimensionName, presetConfigurationValues ) => { + createDirectDimensionsLink = (dimensionName, presetConfigurationValues) => { const {documentNode} = this.props; const nodeContextPath = documentNode.properties._path + ';' + dimensionName + '=' + presetConfigurationValues.join(',') const uri = new URL(window.location.href); uri.searchParams.set('node', nodeContextPath); - //console.log(uri.toString()); + // console.log(uri.toString()); return uri.toString(); } @@ -280,37 +279,36 @@ export default class DimensionSwitcher extends PureComponent { return null; } + getDocumentDimensions(dimensionName) { const {getNodeByContextPath, documentNode, allowedPresets, contentDimensions} = this.props; const currentDocumentNode = getNodeByContextPath(documentNode.contextPath) - if(!currentDocumentNode.dimensions){ + if (!currentDocumentNode.dimensions) { return allowedPresets[dimensionName] } - let variants = [...currentDocumentNode?.otherNodeVariants]; + const variants = [...currentDocumentNode?.otherNodeVariants]; variants.push(currentDocumentNode.dimensions) - for(let dimensionKey of Object.keys(contentDimensions)){ - if(dimensionKey == dimensionName) { + for (const dimensionKey of Object.keys(contentDimensions)) { + if (dimensionKey === dimensionName) { break; } Object.entries(variants).forEach(entry => { const [key, value] = entry; - if(value[dimensionKey] != this.state.transientPresets[dimensionKey]){ - delete variants[key] + if (value[dimensionKey] !== this.state.transientPresets[dimensionKey]) { + delete variants[key] } }); } - let dimensions = [] + const dimensions = [] Object.values(variants).forEach(entry => { - dimensions.push(entry[dimensionName]); }); return dimensions; } - presetsForDimension(dimensionName) { const {contentDimensions, allowedPresets, i18nRegistry} = this.props; const dimensionConfiguration = $get(dimensionName, contentDimensions); @@ -320,8 +318,8 @@ export default class DimensionSwitcher extends PureComponent { return Object.assign({}, presetConfiguration, { label: i18nRegistry.translate(presetConfiguration.label), disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), - existing: documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension)), - uri: this.createDirectDimensionsLink( dimensionName, presetConfiguration.values) + existing: documentDimensions.some(dimension => presetConfiguration.values.includes(dimension)), + uri: this.createDirectDimensionsLink(dimensionName, presetConfiguration.values) }); }); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css index 34e42e18f1..093051a444 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -61,7 +61,7 @@ } .nonExistent { - opacity: 0.5; + opacity: .5; } .disallowed { text-decoration: line-through; From c441ff6e083784efa5469b7c3957939fea2ecc69 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Fri, 29 Dec 2023 07:56:56 +0100 Subject: [PATCH 05/14] Feature: make linking only work with single dimension --- .../DimensionSelectorOption.js | 1 - .../PrimaryToolbar/DimensionSwitcher/index.js | 18 +++++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index d9be035428..e86634df6b 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -25,7 +25,6 @@ export default class DimensionSelectorOption extends PureComponent { ); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 07f7142fec..f854df3417 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -171,13 +171,12 @@ export default class DimensionSwitcher extends PureComponent { this.setState({isOpen: false}); } - createDirectDimensionsLink = (dimensionName, presetConfigurationValues ) => { + createDirectDimensionsLink = (dimensionName, presetName ) => { const {documentNode} = this.props; - const nodeContextPath = documentNode.properties._path + ';' + dimensionName + '=' + presetConfigurationValues.join(',') + const nodeContextPath = documentNode.properties._path + ';' + dimensionName + '=' + presetName const uri = new URL(window.location.href); uri.searchParams.set('node', nodeContextPath); - //console.log(uri.toString()); return uri.toString(); } @@ -289,13 +288,15 @@ export default class DimensionSwitcher extends PureComponent { let variants = [...currentDocumentNode?.otherNodeVariants]; variants.push(currentDocumentNode.dimensions) - + console.log(variants); for(let dimensionKey of Object.keys(contentDimensions)){ - if(dimensionKey == dimensionName) { - break; + if(dimensionKey == dimensionName && contentDimensions.length !== 1) { + break; } + console.log(this.state.transientPresets[dimensionKey]) Object.entries(variants).forEach(entry => { const [key, value] = entry; + console.log(value[dimensionKey]) if(value[dimensionKey] != this.state.transientPresets[dimensionKey]){ delete variants[key] } @@ -303,10 +304,9 @@ export default class DimensionSwitcher extends PureComponent { } let dimensions = [] Object.values(variants).forEach(entry => { - dimensions.push(entry[dimensionName]); }); - + console.log(dimensions) return dimensions; } @@ -321,7 +321,7 @@ export default class DimensionSwitcher extends PureComponent { label: i18nRegistry.translate(presetConfiguration.label), disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), existing: documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension)), - uri: this.createDirectDimensionsLink( dimensionName, presetConfiguration.values) + uri: (contentDimensions.length === 1) ? this.createDirectDimensionsLink( dimensionName, presetName) : null }); }); } From d048232e415379fcfa2c8df4916bc98fa14016e7 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Fri, 29 Dec 2023 14:41:23 +0100 Subject: [PATCH 06/14] Feature: Add URL option for single dropdown --- .../DimensionSwitcher/DimensionSelector.js | 3 ++- .../DimensionSelectorOption.js | 22 +++++++++++++++- .../PrimaryToolbar/DimensionSwitcher/index.js | 2 +- .../selectBox_Option_SingleLine.js | 26 +++++++++++++++---- .../style.module.css | 6 +++++ 5 files changed, 51 insertions(+), 8 deletions(-) create mode 100644 packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index 22a1e8b72c..1cda88f337 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -51,7 +51,8 @@ export default class DimensionSelector extends PureComponent { value: presetName, disallowed: presetConfiguration?.disallowed, existing: presetConfiguration?.existing, - group: presetConfiguration?.group + group: presetConfiguration?.group, + url: presetConfiguration?.url }; } ); diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index e86634df6b..f2dd637334 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -10,9 +10,11 @@ export default class DimensionSelectorOption extends PureComponent { option: PropTypes.shape({ label: PropTypes.string.isRequired, disallowed: PropTypes.bool, - existing: PropTypes.bool + existing: PropTypes.bool, + url: PropTypes.bool }) }; + render() { const {option} = this.props; const className = mergeClassNames({ @@ -20,6 +22,24 @@ export default class DimensionSelectorOption extends PureComponent { [style.nonExistent]: !option.existing }); + if(!option.disallowed && option.existing && option.url){ + + const linkOptions = { + href: option.url, + target: '_blank', + rel: 'noopener noreferrer', + onClick: (event) => event.preventDefault() + } + return ( + + // eslint-disable-next-line camelcase + + ); + } return ( // eslint-disable-next-line camelcase presetConfiguration.values.includes(dimension)), - uri: (contentDimensions.length === 1) ? this.createDirectDimensionsLink( dimensionName, presetName) : null + url: this.createDirectDimensionsLink( dimensionName, presetName) }); }); } diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js index eb6734b86e..23ffb158e4 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js @@ -3,34 +3,50 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import ListPreviewElement from '../ListPreviewElement'; import mergeClassNames from 'classnames'; +import style from './style.module.css'; class SelectBox_Option_SingleLine extends PureComponent { static propTypes = { option: PropTypes.shape({ label: PropTypes.string.isRequired, icon: PropTypes.string, - disabled: PropTypes.bool + disabled: PropTypes.bool, + title: PropTypes.string }).isRequired, disabled: PropTypes.bool, - className: PropTypes.string + className: PropTypes.string, + + linkOptions: PropTypes.shape({ + href: PropTypes.string.isRequired, + target: PropTypes.string, + rel: PropTypes.string, + onClick: PropTypes.func + }) } render() { - const {option, className, disabled, icon} = this.props; + const {option, className, disabled, icon, linkOptions} = this.props; const isDisabled = disabled || option.disabled; const finalClassNames = mergeClassNames({ [className]: className + [style.linkedItem]: true }); - const previewElementIcon = option.icon ? option.icon : (icon ? icon : null); return ( - {option.label} + {linkOptions ? ( + {option.label} + ) : ( + {option.label} + )} ); } diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css new file mode 100644 index 0000000000..99d244ec21 --- /dev/null +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css @@ -0,0 +1,6 @@ +.dropdownLink{ + color: white; +} +.linkedItem{ + background-color: red; +} From 777e6d09851ce816b676d2a4e0b957b9e30e63ba Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Fri, 29 Dec 2023 16:40:29 +0100 Subject: [PATCH 07/14] Feature: update styling --- .../DimensionSwitcher/DimensionSelectorOption.js | 2 +- .../PrimaryToolbar/DimensionSwitcher/index.js | 13 +++++++------ .../selectBox_Option_SingleLine.js | 4 ++-- .../SelectBox_Option_SingleLine/style.module.css | 4 +++- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index f2dd637334..ef617ee75b 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -11,7 +11,7 @@ export default class DimensionSelectorOption extends PureComponent { label: PropTypes.string.isRequired, disallowed: PropTypes.bool, existing: PropTypes.bool, - url: PropTypes.bool + url: PropTypes.string }) }; diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 9656800625..055ead8e64 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -286,10 +286,10 @@ export default class DimensionSwitcher extends PureComponent { const variants = [...currentDocumentNode?.otherNodeVariants]; variants.push(currentDocumentNode.dimensions) - console.log(variants); - for(let dimensionKey of Object.keys(contentDimensions)){ - if(dimensionKey == dimensionName && contentDimensions.length !== 1) { - break; + + for (const dimensionKey of Object.keys(contentDimensions)) { + if (dimensionKey === dimensionName || Object.keys(contentDimensions).length === 1) { + break; } Object.entries(variants).forEach(entry => { const [key, value] = entry; @@ -298,12 +298,13 @@ export default class DimensionSwitcher extends PureComponent { delete variants[key] } }); + } const dimensions = [] Object.values(variants).forEach(entry => { dimensions.push(entry[dimensionName]); }); - + return dimensions; } @@ -317,7 +318,7 @@ export default class DimensionSwitcher extends PureComponent { label: i18nRegistry.translate(presetConfiguration.label), disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), existing: documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension)), - url: (Object.keys(contentDimensionsObject).length === 1) ? this.createDirectDimensionsLink( dimensionName, presetName) : null + url: (Object.keys(contentDimensions).length === 1) ? this.createDirectDimensionsLink( dimensionName, presetName) : null }); }); } diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js index 23ffb158e4..0526a9dc55 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js @@ -32,8 +32,8 @@ class SelectBox_Option_SingleLine extends PureComponent { const isDisabled = disabled || option.disabled; const finalClassNames = mergeClassNames({ - [className]: className - [style.linkedItem]: true + [className]: className, + [style.linkedItem]: linkOptions }); const previewElementIcon = option.icon ? option.icon : (icon ? icon : null); diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css index 99d244ec21..700add1428 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css @@ -1,6 +1,8 @@ .dropdownLink{ color: white; + padding: 5px 14px; + display: inline-block; } .linkedItem{ - background-color: red; + padding: 0px !important; } From 9d0061a8eca63190f98f6f8c8a99a67f613c56c4 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Tue, 2 Jan 2024 10:59:13 +0100 Subject: [PATCH 08/14] FIX: Linter --- .../DimensionSwitcher/DimensionSelectorOption.js | 5 ++--- .../PrimaryToolbar/DimensionSwitcher/index.js | 12 +++++------- .../selectBox_Option_SingleLine.js | 4 ++-- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index ef617ee75b..715bb7d545 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -22,15 +22,14 @@ export default class DimensionSelectorOption extends PureComponent { [style.nonExistent]: !option.existing }); - if(!option.disallowed && option.existing && option.url){ - + if (!option.disallowed && option.existing && option.url) { const linkOptions = { href: option.url, target: '_blank', rel: 'noopener noreferrer', onClick: (event) => event.preventDefault() } - return ( + return ( // eslint-disable-next-line camelcase { + createDirectDimensionsLink = (dimensionName, presetName) => { const {documentNode} = this.props; const nodeContextPath = documentNode.properties._path + ';' + dimensionName + '=' + presetName @@ -293,12 +293,10 @@ export default class DimensionSwitcher extends PureComponent { } Object.entries(variants).forEach(entry => { const [key, value] = entry; - console.log(value[dimensionKey]) - if(value[dimensionKey] != this.state.transientPresets[dimensionKey]){ - delete variants[key] + if (value[dimensionKey] !== this.state.transientPresets[dimensionKey]) { + delete variants[key] } }); - } const dimensions = [] Object.values(variants).forEach(entry => { @@ -317,8 +315,8 @@ export default class DimensionSwitcher extends PureComponent { return Object.assign({}, presetConfiguration, { label: i18nRegistry.translate(presetConfiguration.label), disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), - existing: documentDimensions.some(dimension=> presetConfiguration.values.includes(dimension)), - url: (Object.keys(contentDimensions).length === 1) ? this.createDirectDimensionsLink( dimensionName, presetName) : null + existing: documentDimensions.some(dimension => presetConfiguration.values.includes(dimension)), + url: (Object.keys(contentDimensions).length === 1) ? this.createDirectDimensionsLink(dimensionName, presetName) : null }); }); } diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js index 0526a9dc55..6578736c6b 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js @@ -43,9 +43,9 @@ class SelectBox_Option_SingleLine extends PureComponent { {option.label} + title={option.title ? option.title : option.label}>{option.label} ) : ( - {option.label} + {option.label} )} ); From 76c02993a5cd66ab0c4683bbf79ccb5cc2a0a640 Mon Sep 17 00:00:00 2001 From: pKallert <91674611+pKallert@users.noreply.github.com> Date: Wed, 3 Jan 2024 08:47:23 +0100 Subject: [PATCH 09/14] Feature: Make Link full width of line --- .../selectBox_Option_SingleLine.js | 9 ++++++++- .../src/SelectBox_Option_SingleLine/style.module.css | 6 ++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js index 6578736c6b..539d7a476a 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js @@ -18,6 +18,8 @@ class SelectBox_Option_SingleLine extends PureComponent { className: PropTypes.string, + icon: PropTypes.string, + linkOptions: PropTypes.shape({ href: PropTypes.string.isRequired, target: PropTypes.string, @@ -35,6 +37,11 @@ class SelectBox_Option_SingleLine extends PureComponent { [className]: className, [style.linkedItem]: linkOptions }); + const linkClassname = mergeClassNames({ + [style.dropdownLink]: true, + [style.hasIcon]: (option.icon || icon ? true: false) + }); + const previewElementIcon = option.icon ? option.icon : (icon ? icon : null); return ( @@ -42,7 +49,7 @@ class SelectBox_Option_SingleLine extends PureComponent { {linkOptions ? ( {option.label} ) : ( {option.label} diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css index 700add1428..a7467ca1b0 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css @@ -2,6 +2,12 @@ color: white; padding: 5px 14px; display: inline-block; + width: 100%; + +} +.hasIcon { + width: calc(100% - 2em); + padding: 5px 0px; } .linkedItem{ padding: 0px !important; From a0eb7a62b26f418c57aad68ff82641eed89d9ee9 Mon Sep 17 00:00:00 2001 From: Paula Kallert Date: Fri, 15 Mar 2024 09:15:40 +0100 Subject: [PATCH 10/14] Feature: add styling --- .../PrimaryToolbar/DimensionSwitcher/index.js | 9 +++---- .../DimensionSwitcher/style.module.css | 24 +++++++++++++++++-- .../src/ListPreviewElement/style.module.css | 1 + 3 files changed, 28 insertions(+), 6 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 0361a041b8..ea2b6fcd30 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -74,7 +74,6 @@ export default class DimensionSwitcher extends PureComponent { this.setState({ transientPresets: activePresets }); - console.log(this.state.transientPresets); } getDimensionIcon = (dimensionName, contentDimensionsObject) => { @@ -162,6 +161,7 @@ export default class DimensionSwitcher extends PureComponent { handleToggle = () => { this.setState({isOpen: !this.state.isOpen}); + } handleClose = () => { @@ -182,6 +182,7 @@ export default class DimensionSwitcher extends PureComponent { const icon = this.getDimensionIcon(dimensionName, contentDimensionsObject); // First look for active preset in transient state, else take it from activePresets prop const activePreset = this.getEffectivePresets(this.state.transientPresets)[dimensionName]; + return ( ) } - + if (contentDimensionsObjectKeys.length > 1) { return ( span { From 1c0c38144cebcbf0139d848e9d6b9bfa0788852e Mon Sep 17 00:00:00 2001 From: Paula Kallert Date: Wed, 5 Jun 2024 15:33:22 +0200 Subject: [PATCH 11/14] Feature: Add title attribute to explain colors --- Resources/Private/Translations/en/Main.xlf | 6 ++++++ .../DimensionSwitcher/DimensionSelectorOption.js | 14 ++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf index 0db6995fa5..fb66d054a6 100644 --- a/Resources/Private/Translations/en/Main.xlf +++ b/Resources/Private/Translations/en/Main.xlf @@ -374,6 +374,12 @@ For more information about the error please refer to the JavaScript console. + + The current document does not exist in the dimension + + + This combination of dimensions is not allowed + diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index 715bb7d545..b4b70904f6 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -4,6 +4,11 @@ import style from './style.module.css'; // eslint-disable-next-line camelcase import SelectBox_Option_SingleLine from '@neos-project/react-ui-components/src/SelectBox_Option_SingleLine/index'; import mergeClassNames from 'classnames'; +import {neos} from '@neos-project/neos-ui-decorators'; + +@neos(globalRegistry => ({ + i18nRegistry: globalRegistry.get('i18n') +})) export default class DimensionSelectorOption extends PureComponent { static propTypes = { @@ -12,11 +17,12 @@ export default class DimensionSelectorOption extends PureComponent { disallowed: PropTypes.bool, existing: PropTypes.bool, url: PropTypes.string - }) + }), + i18nRegistry: PropTypes.object.isRequired }; render() { - const {option} = this.props; + const {option, i18nRegistry} = this.props; const className = mergeClassNames({ [style.disallowed]: option.disallowed, [style.nonExistent]: !option.existing @@ -39,6 +45,10 @@ export default class DimensionSelectorOption extends PureComponent { /> ); } + option.title = option.disallowed ? + i18nRegistry.translate('Neos.Neos.Ui:Main:dimensions.combinationNotAllowed') : + i18nRegistry.translate('Neos.Neos.Ui:Main:dimensions.doesNotExistsInDimension') + return ( // eslint-disable-next-line camelcase Date: Wed, 5 Jun 2024 15:33:48 +0200 Subject: [PATCH 12/14] Fix: fix linting errors --- .../src/Containers/PrimaryToolbar/DimensionSwitcher/index.js | 3 +-- .../PrimaryToolbar/DimensionSwitcher/style.module.css | 2 +- .../SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index ea2b6fcd30..a2aa7a1ce2 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -161,7 +161,6 @@ export default class DimensionSwitcher extends PureComponent { handleToggle = () => { this.setState({isOpen: !this.state.isOpen}); - } handleClose = () => { @@ -211,7 +210,7 @@ export default class DimensionSwitcher extends PureComponent { ) } - + if (contentDimensionsObjectKeys.length > 1) { return ( Date: Wed, 5 Jun 2024 15:39:25 +0200 Subject: [PATCH 13/14] Fix: Adjust spacing for CSS changes Co-authored-by: Sebastian Helzle --- .../src/SelectBox_Option_SingleLine/style.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css index a7467ca1b0..2eab7a22d9 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css @@ -1,4 +1,4 @@ -.dropdownLink{ +.dropdownLink { color: white; padding: 5px 14px; display: inline-block; @@ -9,6 +9,6 @@ width: calc(100% - 2em); padding: 5px 0px; } -.linkedItem{ +.linkedItem { padding: 0px !important; } From ff75dd42dbf78a87c72c3d74661c9e47bb634347 Mon Sep 17 00:00:00 2001 From: Paula Kallert Date: Wed, 5 Jun 2024 15:43:49 +0200 Subject: [PATCH 14/14] Fix: Adjust naming from existing to covered --- .../PrimaryToolbar/DimensionSwitcher/DimensionSelector.js | 2 +- .../DimensionSwitcher/DimensionSelectorOption.js | 6 +++--- .../Containers/PrimaryToolbar/DimensionSwitcher/index.js | 2 +- .../PrimaryToolbar/DimensionSwitcher/style.module.css | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index 28b02714de..bbdc813df2 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -49,7 +49,7 @@ export default class DimensionSelector extends PureComponent { label: presetConfiguration?.label, value: presetName, disallowed: presetConfiguration?.disallowed, - existing: presetConfiguration?.existing, + covered: presetConfiguration?.covered, group: presetConfiguration?.group, url: presetConfiguration?.url }; diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js index b4b70904f6..6a250dd61a 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js @@ -15,7 +15,7 @@ export default class DimensionSelectorOption extends PureComponent { option: PropTypes.shape({ label: PropTypes.string.isRequired, disallowed: PropTypes.bool, - existing: PropTypes.bool, + covered: PropTypes.bool, url: PropTypes.string }), i18nRegistry: PropTypes.object.isRequired @@ -25,10 +25,10 @@ export default class DimensionSelectorOption extends PureComponent { const {option, i18nRegistry} = this.props; const className = mergeClassNames({ [style.disallowed]: option.disallowed, - [style.nonExistent]: !option.existing + [style.notCovered]: !option.covered }); - if (!option.disallowed && option.existing && option.url) { + if (!option.disallowed && option.covered && option.url) { const linkOptions = { href: option.url, target: '_blank', diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index a2aa7a1ce2..60c10d1ef6 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -315,7 +315,7 @@ export default class DimensionSwitcher extends PureComponent { return Object.assign({}, presetConfiguration, { label: i18nRegistry.translate(presetConfiguration.label), disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)), - existing: documentDimensions.some(dimension => presetConfiguration.values.includes(dimension)), + covered: documentDimensions.some(dimension => presetConfiguration.values.includes(dimension)), url: (Object.keys(contentDimensions).length === 1) ? this.createDirectDimensionsLink(dimensionName, presetName) : null }); }); diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css index c8c82f2b60..736af06a55 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -60,11 +60,11 @@ } } -.nonExistent { +.notCovered { position: relative; background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 12px, #323232 0, #323232 23px); } -.nonExistent:after { +.notCovered:after { content: ''; position: absolute; height: 100%;