From 2f22ceedc48165b1b89e5c227db3026e45be2066 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 11:20:54 +0200 Subject: [PATCH 01/12] FEATURE: Extract DimensionSelector and render single dimentsion This commit extracts the DimensionSelector to an own component. The component gets an additional property to render only the Select without any label. The DimensionSwitcher now renders a single DimensionSelector if we have just one dimension and the old dropdown if we have multiple. --- .../DimensionSwitcher/DimensionSelector.js | 110 +++++++++ .../PrimaryToolbar/DimensionSwitcher/index.js | 218 +++++++----------- .../DimensionSwitcher/style.module.css | 13 ++ 3 files changed, 202 insertions(+), 139 deletions(-) create mode 100644 packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js new file mode 100644 index 0000000000..52dcd13e46 --- /dev/null +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -0,0 +1,110 @@ +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import Icon from '@neos-project/react-ui-components/src/Icon/'; +import SelectBox from '@neos-project/react-ui-components/src/SelectBox/'; +import style from './style.module.css'; +import {$get, $transform} from 'plow-js'; +import mapValues from 'lodash.mapvalues'; +import I18n from '@neos-project/neos-ui-i18n'; +import sortBy from 'lodash.sortby'; +import {neos} from '@neos-project/neos-ui-decorators'; +import DimensionSelectorOption from './DimensionSelectorOption'; + +const searchOptions = (searchTerm, processedSelectBoxOptions) => + processedSelectBoxOptions.filter(option => option.label && option.label.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1); + +@neos(globalRegistry => ({ + i18nRegistry: globalRegistry.get('i18n') +})) +export default class DimensionSelector extends PureComponent { + static propTypes = { + icon: PropTypes.string.isRequired, + dimensionLabel: PropTypes.string.isRequired, + presets: PropTypes.object.isRequired, + activePreset: PropTypes.string.isRequired, + dimensionName: PropTypes.string.isRequired, + isLoading: PropTypes.bool, + onSelect: PropTypes.func.isRequired, + showOnlyDimensionDropdown: PropTypes.bool, + + i18nRegistry: PropTypes.object.isRequired + }; + + state = { + searchTerm: '' + }; + + renderDimensionDropdown = () => { + const { + activePreset, + isLoading, + i18nRegistry, + dimensionName, + onSelect, + presets + } = this.props; + + const presetOptions = mapValues( + presets, + (presetConfiguration, presetName) => { + return $transform( + { + label: $get('label'), + value: presetName, + disallowed: $get('disallowed') + }, + presetConfiguration + ); + } + ); + + const sortedPresetOptions = sortBy(presetOptions, ['label']); + + const onPresetSelect = presetName => { + onSelect(dimensionName, presetName); + }; + + return ( + = 10} + searchOptions={searchOptions(this.state.searchTerm, sortedPresetOptions)} + onSearchTermChange={this.handleSearchTermChange} + noMatchesFoundLabel={i18nRegistry.translate('Neos.Neos:Main:noMatchesFound')} + searchBoxLeftToTypeLabel={i18nRegistry.translate('Neos.Neos:Main:searchBoxLeftToType')} + threshold={0} + ListPreviewElement={DimensionSelectorOption} + className={style.dimensionSwitcherDropDown} + /> + ) + } + + render() { + const { + icon, + dimensionLabel, + dimensionName, + showOnlyDimensionDropdown + } = this.props; + + const dimensionDropdown = this.renderDimensionDropdown(); + + return showOnlyDimensionDropdown === true ? dimensionDropdown : ( +
  • +
    + + +
    + {dimensionDropdown} +
    • + ); + } + + handleSearchTermChange = searchTerm => { + this.setState({searchTerm}); + } +} diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index c3ff5f1624..6d3aafc99e 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -4,16 +4,14 @@ import {connect} from 'react-redux'; import Button from '@neos-project/react-ui-components/src/Button/'; import Icon from '@neos-project/react-ui-components/src/Icon/'; import DropDown from '@neos-project/react-ui-components/src/DropDown/'; -import SelectBox from '@neos-project/react-ui-components/src/SelectBox/'; import style from './style.module.css'; import backend from '@neos-project/neos-ui-backend-connector'; import {$get, $transform} from 'plow-js'; import mapValues from 'lodash.mapvalues'; import {selectors, actions} from '@neos-project/neos-ui-redux-store'; import I18n from '@neos-project/neos-ui-i18n'; -import sortBy from 'lodash.sortby'; import {neos} from '@neos-project/neos-ui-decorators'; -import DimensionSelectorOption from './DimensionSelectorOption'; +import DimensionSelector from './DimensionSelector'; // TODO Add title prop to Icon component const SelectedPreset = props => { @@ -32,82 +30,6 @@ SelectedPreset.propTypes = { dimensionName: PropTypes.string.isRequired }; -const searchOptions = (searchTerm, processedSelectBoxOptions) => - processedSelectBoxOptions.filter(option => option.label && option.label.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1); - -@neos(globalRegistry => ({ - i18nRegistry: globalRegistry.get('i18n') -})) -class DimensionSelector extends PureComponent { - static propTypes = { - icon: PropTypes.string.isRequired, - dimensionLabel: PropTypes.string.isRequired, - presets: PropTypes.object.isRequired, - activePreset: PropTypes.string.isRequired, - dimensionName: PropTypes.string.isRequired, - isLoading: PropTypes.bool, - onSelect: PropTypes.func.isRequired, - - i18nRegistry: PropTypes.object.isRequired - }; - - state = { - searchTerm: '' - }; - - render() { - const {icon, dimensionLabel, presets, dimensionName, activePreset, onSelect, isLoading, i18nRegistry} = this.props; - - const presetOptions = mapValues( - presets, - (presetConfiguration, presetName) => { - return $transform( - { - label: $get('label'), - value: presetName, - disallowed: $get('disallowed') - }, - presetConfiguration - ); - } - ); - - const sortedPresetOptions = sortBy(presetOptions, ['label']); - - const onPresetSelect = presetName => { - onSelect(dimensionName, presetName); - }; - - return ( -
  • -
    - - -
    - = 10} - searchOptions={searchOptions(this.state.searchTerm, sortedPresetOptions)} - onSearchTermChange={this.handleSearchTermChange} - noMatchesFoundLabel={i18nRegistry.translate('Neos.Neos:Main:noMatchesFound')} - searchBoxLeftToTypeLabel={i18nRegistry.translate('Neos.Neos:Main:searchBoxLeftToType')} - threshold={0} - ListPreviewElement={DimensionSelectorOption} - className={style.dimensionSwitcherDropDown} - /> -
    • - ); - } - - handleSearchTermChange = searchTerm => { - this.setState({searchTerm}); - } -} - @connect($transform({ contentDimensions: selectors.CR.ContentDimensions.byName, allowedPresets: selectors.CR.ContentDimensions.allowedPresets, @@ -228,74 +150,92 @@ export default class DimensionSwitcher extends PureComponent { this.setState({isOpen: false}); } + renderSingleDimensionSelector = (dimensionName, contentDimensionsObject) => { + const dimensionConfiguration = contentDimensionsObject[dimensionName]; + const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); + // First look for active preset in transient state, else take it from activePresets prop + const activePreset = this.getEffectivePresets(this.state.transientPresets)[dimensionName]; + return ( + ); + } + render() { const {contentDimensions, activePresets, i18nRegistry} = this.props; const contentDimensionsObject = contentDimensions; const contentDimensionsObjectKeys = Object.keys(contentDimensionsObject); - return contentDimensionsObjectKeys.length ? ( - - + {this.renderSingleDimensionSelector(dimensionName, contentDimensionsObject)} + + ) + } + + if (contentDimensionsObjectKeys.length > 1) { + return ( + - {contentDimensionsObjectKeys.map(dimensionName => { - const dimensionConfiguration = contentDimensionsObject[dimensionName]; - const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); - return ( - ); - })} - - - {contentDimensionsObjectKeys.map(dimensionName => { - const dimensionConfiguration = contentDimensionsObject[dimensionName]; - const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); - // First look for active preset in transient state, else take it from activePresets prop - const activePreset = this.getEffectivePresets(this.state.transientPresets)[dimensionName]; - return ( - ); - })} - {Object.keys(contentDimensions).length > 1 &&
    - - + -
    } -     -     - ) : null; + + + } + + + ) + } + + return null; } presetsForDimension(dimensionName) { 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 42f7e4ca5e..77992dbca2 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -2,6 +2,7 @@ max-width: 320px; width: auto; } + .dropDown__header { background-color: transparent; @@ -9,6 +10,7 @@ color: var(--colors-PrimaryBlue); } } + .dropDown__contents { width: fit-content; min-width: 100%; @@ -16,9 +18,11 @@ background-color: var(--colors-ContrastDarker) !important; box-shadow: 0 5px 5px rgba(0, 0, 0, .2); } + .dropDown__btnIcon { margin-right: .5em; } + .dimensionCategory { background-color: var(--colors-ContrastDarkest); padding: var(--spacing-Full); @@ -49,6 +53,7 @@ .buttonGroup button { flex: 1 0 auto; } + @media only screen and (max-width: 1024px) { .selectPresetLabel { display: none; @@ -62,3 +67,11 @@ .selectPreset + .selectPreset { margin-left: var(--spacing-Half); } + +.singleDimensionDropdown { + + .dimensionSwitcherDropDown { + background: unset; + min-width: auto; + } +} From 448ca3d8a4079a5adf499a2515d8bd07917b25da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 11:49:37 +0200 Subject: [PATCH 02/12] BUGFIX: Hide create new div when it is not permitted --- .../SelectBox_ListPreview/selectBox_ListPreview.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react-ui-components/src/SelectBox_ListPreview/selectBox_ListPreview.js b/packages/react-ui-components/src/SelectBox_ListPreview/selectBox_ListPreview.js index 004a3af387..cf50eca472 100644 --- a/packages/react-ui-components/src/SelectBox_ListPreview/selectBox_ListPreview.js +++ b/packages/react-ui-components/src/SelectBox_ListPreview/selectBox_ListPreview.js @@ -38,10 +38,13 @@ class SelectBox_ListPreview extends PureComponent { SelectBox_ListPreviewFlat, SelectBox_ListPreviewGrouped, searchBoxLeftToTypeLabel, + onCreateNew, + searchTerm, theme } = this.props; const ListPreviewComponent = options.some(option => option.group) ? SelectBox_ListPreviewGrouped : SelectBox_ListPreviewFlat; + const isCreateNewEnabled = onCreateNew && searchTerm; // TODO: replace horible self-made I18n replace return ( @@ -64,9 +67,11 @@ class SelectBox_ListPreview extends PureComponent { /> )} -
    - -
    + {isCreateNewEnabled && ( +
    + +
    + )} ); } From 5c0ca4f6e7f8627e54e24ef09c96d4f0c343f66c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 12:50:31 +0200 Subject: [PATCH 03/12] BUGFIX: Resolve linting issues --- .../Containers/PrimaryToolbar/DimensionSwitcher/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 6d3aafc99e..10753bbd41 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -155,7 +155,8 @@ export default class DimensionSwitcher extends PureComponent { const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); // First look for active preset in transient state, else take it from activePresets prop const activePreset = this.getEffectivePresets(this.state.transientPresets)[dimensionName]; - return ( { const dimensionConfiguration = contentDimensionsObject[dimensionName]; const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); - return ( Date: Thu, 30 Mar 2023 13:27:31 +0200 Subject: [PATCH 04/12] TASK: Adjust acceptance tests --- .../Fixtures/1Dimension/switchingDimensions.e2e.js | 4 ++-- Tests/IntegrationTests/pageModel.js | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/Tests/IntegrationTests/Fixtures/1Dimension/switchingDimensions.e2e.js b/Tests/IntegrationTests/Fixtures/1Dimension/switchingDimensions.e2e.js index d50b5feb76..4b3864af6f 100644 --- a/Tests/IntegrationTests/Fixtures/1Dimension/switchingDimensions.e2e.js +++ b/Tests/IntegrationTests/Fixtures/1Dimension/switchingDimensions.e2e.js @@ -16,7 +16,7 @@ test('Switching dimensions', async t => { const otherPageName = 'Untranslated page'; await Page.goToPage(translatedPageName); - await DimensionSwitcher.switchLanguageDimension('Latvian'); + await DimensionSwitcher.switchSingleDimension('Latvian'); await t.click('#neos-NodeVariantCreationDialog-CreateEmpty'); await Page.waitForIframeLoading(); await t @@ -24,7 +24,7 @@ test('Switching dimensions', async t => { .expect(Page.treeNode.withText(otherPageName).exists).notOk('Untranslated node gone from the tree'); subSection('Switch back to original dimension'); - await DimensionSwitcher.switchLanguageDimension('English (US)'); + await DimensionSwitcher.switchSingleDimension('English (US)'); await Page.waitForIframeLoading(); await t .expect(await Page.getReduxState(state => state.cr.contentDimensions.active.language[0])).eql('en_US', 'Dimension back to English') diff --git a/Tests/IntegrationTests/pageModel.js b/Tests/IntegrationTests/pageModel.js index 4bc3c927d8..4e5fad99ac 100644 --- a/Tests/IntegrationTests/pageModel.js +++ b/Tests/IntegrationTests/pageModel.js @@ -40,6 +40,12 @@ export class DimensionSwitcher { .click(this.dimensionSwitcherFirstDimensionSelector) .click(this.dimensionSwitcherFirstDimensionSelectorWithShallowDropDownContents.find('li').withText(name)); } + + static async switchSingleDimension(name) { + await t + .click(this.dimensionSwitcher) + .click(ReactSelector('DimensionSelectorOption').withProps('option', {label: name})); + } } export class PublishDropDown { From 1520d8c37a2ec40af1cdd9c4317cc4d5a17b1527 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 14:46:05 +0200 Subject: [PATCH 05/12] TASK: Render icon for single dimension --- .../PrimaryToolbar/DimensionSwitcher/index.js | 11 +++++++++-- .../PrimaryToolbar/DimensionSwitcher/style.module.css | 10 +++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 10753bbd41..36160eaa41 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -64,6 +64,11 @@ export default class DimensionSwitcher extends PureComponent { loadingPresets: {} }; + getDimensionIcon = (dimensionName, contentDimensionsObject) => { + const dimensionConfiguration = contentDimensionsObject[dimensionName]; + return $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); + } + // // Merge active presets comming from redux with local transientPresets state (i.e. presents selected, but not yet applied) // @@ -152,7 +157,7 @@ export default class DimensionSwitcher extends PureComponent { renderSingleDimensionSelector = (dimensionName, contentDimensionsObject) => { const dimensionConfiguration = contentDimensionsObject[dimensionName]; - const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); + 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 ( @@ -177,8 +182,10 @@ export default class DimensionSwitcher extends PureComponent { if (contentDimensionsObjectKeys.length === 1) { const dimensionName = contentDimensionsObjectKeys[0]; + const icon = this.getDimensionIcon(dimensionName, contentDimensionsObject); return (
    + {this.renderSingleDimensionSelector(dimensionName, contentDimensionsObject)}
    ) @@ -199,7 +206,7 @@ export default class DimensionSwitcher extends PureComponent { > {contentDimensionsObjectKeys.map(dimensionName => { const dimensionConfiguration = contentDimensionsObject[dimensionName]; - const icon = $get('icon', dimensionConfiguration) && $get('icon', dimensionConfiguration); + const icon = this.getDimensionIcon(dimensionName, contentDimensionsObject); return ( Date: Thu, 30 Mar 2023 17:10:01 +0200 Subject: [PATCH 06/12] FEATURE: Introduce new props for SelectBox This commit adds the headerIcon property for the SelectBox and the showIcon prop for the ListPreviewElement and SelectBox_Option_SingleLine. With these new properties it is possible to render an icon only inside the header, even when the option has no icon definded. --- .../src/ListPreviewElement/listPreviewElement.js | 4 +++- .../react-ui-components/src/SelectBox/selectBox.js | 5 +++++ .../src/SelectBox_Header/selectBox_Header.js | 5 ++++- .../selectBox_Option_SingleLine.spec.js.snap | 2 ++ .../selectBox_Option_SingleLine.js | 10 ++++++++-- 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/react-ui-components/src/ListPreviewElement/listPreviewElement.js b/packages/react-ui-components/src/ListPreviewElement/listPreviewElement.js index e31202428a..1cd5fd0c16 100644 --- a/packages/react-ui-components/src/ListPreviewElement/listPreviewElement.js +++ b/packages/react-ui-components/src/ListPreviewElement/listPreviewElement.js @@ -38,6 +38,7 @@ class ListPreviewElement extends PureComponent { onClick: PropTypes.func, isHighlighted: PropTypes.bool, onMouseEnter: PropTypes.func, + showIcon: PropTypes.bool, // ------------------------------ // Theme & Dependencies @@ -61,6 +62,7 @@ class ListPreviewElement extends PureComponent { onClick, isHighlighted, onMouseEnter, + showIcon, theme, Icon @@ -82,7 +84,7 @@ class ListPreviewElement extends PureComponent { className={optionClassName} role="button" > - {Boolean(icon) &&
    } + {(Boolean(icon) && showIcon) &&
    } {children} diff --git a/packages/react-ui-components/src/SelectBox/selectBox.js b/packages/react-ui-components/src/SelectBox/selectBox.js index da5221b724..22dd6b6390 100644 --- a/packages/react-ui-components/src/SelectBox/selectBox.js +++ b/packages/react-ui-components/src/SelectBox/selectBox.js @@ -77,6 +77,11 @@ export default class SelectBox extends PureComponent { */ placeholderIcon: PropTypes.string, + /** + * This prop is an icon for the header. + */ + headerIcon: PropTypes.string, + /** * Text for the group label of options without a group */ diff --git a/packages/react-ui-components/src/SelectBox_Header/selectBox_Header.js b/packages/react-ui-components/src/SelectBox_Header/selectBox_Header.js index 36697a3c55..3236155778 100644 --- a/packages/react-ui-components/src/SelectBox_Header/selectBox_Header.js +++ b/packages/react-ui-components/src/SelectBox_Header/selectBox_Header.js @@ -17,6 +17,7 @@ class SelectBox_Header extends PureComponent { }), placeholder: PropTypes.string, placeholderIcon: PropTypes.string, + headerIcon: PropTypes.string, showResetButton: PropTypes.bool.isRequired, onReset: PropTypes.func, onClick: PropTypes.func, @@ -68,6 +69,7 @@ class SelectBox_Header extends PureComponent { theme, placeholder, placeholderIcon, + headerIcon, displayLoadingIndicator, Icon, ListPreviewElement, @@ -75,7 +77,7 @@ class SelectBox_Header extends PureComponent { } = this.props; const label = option ? option.label : placeholder; - const icon = option && option.icon ? option.icon : placeholderIcon; + const icon = option && option.icon ? option.icon : (headerIcon ? headerIcon : placeholderIcon); const restProps = omit(this.props, ['showResetButton, IconButton']); return ( @@ -92,6 +94,7 @@ class SelectBox_Header extends PureComponent { icon={icon} disabled={disabled} onClick={this.handleListPreviewElementClick} + showIcon={true} /> : (
    {icon && diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap b/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap index 19a93184bf..cfd6241199 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap @@ -4,6 +4,7 @@ exports[` should render correctly. 1`] = ` should render correctly. 1`] = ` "label": "Bar label", } } + showIcon={false} theme={Object {}} > + {option.label} ); From 06cb6a22ce958091fc3b8262c96f0a4c5580838d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 17:10:35 +0200 Subject: [PATCH 07/12] TASK: Replace the custom icon with the new headerIcon prop --- .../PrimaryToolbar/DimensionSwitcher/DimensionSelector.js | 1 + .../Containers/PrimaryToolbar/DimensionSwitcher/index.js | 2 -- .../PrimaryToolbar/DimensionSwitcher/style.module.css | 8 +------- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index 52dcd13e46..3308de7103 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -71,6 +71,7 @@ export default class DimensionSelector extends PureComponent { onValueChange={onPresetSelect} value={activePreset} allowEmpty={false} + headerIcon={this.props.icon} displaySearchBox={sortedPresetOptions.length >= 10} searchOptions={searchOptions(this.state.searchTerm, sortedPresetOptions)} onSearchTermChange={this.handleSearchTermChange} diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index 36160eaa41..c647a01797 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -182,10 +182,8 @@ export default class DimensionSwitcher extends PureComponent { if (contentDimensionsObjectKeys.length === 1) { const dimensionName = contentDimensionsObjectKeys[0]; - const icon = this.getDimensionIcon(dimensionName, contentDimensionsObject); return (
    - {this.renderSingleDimensionSelector(dimensionName, contentDimensionsObject)}
    ) 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 57d0e0feb4..d054d13942 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -71,15 +71,9 @@ .singleDimensionDropdown { display: flex; align-items: center; - padding-left: var(--spacing-Half); .dimensionSwitcherDropDown { background: unset; - min-width: 200px; - padding-left: var(--spacing-GoldenUnit); + min-width: fit-content; } } - -.singleDimensionDropdown__icon { - margin-right: calc(-1.25 * var(--spacing-GoldenUnit)); -} From bc4ce47e840ff16bc58ad574a6f78e4a95f1d3fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 17:26:38 +0200 Subject: [PATCH 08/12] BUGFIX: Render headerIcon only for single dimension dropdown --- .../PrimaryToolbar/DimensionSwitcher/DimensionSelector.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index 3308de7103..4464beec03 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -41,7 +41,8 @@ export default class DimensionSelector extends PureComponent { i18nRegistry, dimensionName, onSelect, - presets + presets, + showOnlyDimensionDropdown } = this.props; const presetOptions = mapValues( @@ -71,7 +72,7 @@ export default class DimensionSelector extends PureComponent { onValueChange={onPresetSelect} value={activePreset} allowEmpty={false} - headerIcon={this.props.icon} + headerIcon={showOnlyDimensionDropdown ? this.props.icon : null} displaySearchBox={sortedPresetOptions.length >= 10} searchOptions={searchOptions(this.state.searchTerm, sortedPresetOptions)} onSearchTermChange={this.handleSearchTermChange} From c3bd36a1898862b81b79f9e37b57a7af8facfff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Thu, 30 Mar 2023 20:02:33 +0200 Subject: [PATCH 09/12] TASK: Move list markup to DimensionSwitcher --- .../DimensionSwitcher/DimensionSelector.js | 31 +++---------------- .../PrimaryToolbar/DimensionSwitcher/index.js | 14 +++++++-- 2 files changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js index 4464beec03..9e6d1ad23f 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js @@ -1,11 +1,9 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import Icon from '@neos-project/react-ui-components/src/Icon/'; import SelectBox from '@neos-project/react-ui-components/src/SelectBox/'; import style from './style.module.css'; import {$get, $transform} from 'plow-js'; import mapValues from 'lodash.mapvalues'; -import I18n from '@neos-project/neos-ui-i18n'; import sortBy from 'lodash.sortby'; import {neos} from '@neos-project/neos-ui-decorators'; import DimensionSelectorOption from './DimensionSelectorOption'; @@ -25,7 +23,7 @@ export default class DimensionSelector extends PureComponent { dimensionName: PropTypes.string.isRequired, isLoading: PropTypes.bool, onSelect: PropTypes.func.isRequired, - showOnlyDimensionDropdown: PropTypes.bool, + showDropDownHeaderIcon: PropTypes.bool, i18nRegistry: PropTypes.object.isRequired }; @@ -34,7 +32,7 @@ export default class DimensionSelector extends PureComponent { searchTerm: '' }; - renderDimensionDropdown = () => { + render() { const { activePreset, isLoading, @@ -42,7 +40,7 @@ export default class DimensionSelector extends PureComponent { dimensionName, onSelect, presets, - showOnlyDimensionDropdown + showDropDownHeaderIcon } = this.props; const presetOptions = mapValues( @@ -72,7 +70,7 @@ export default class DimensionSelector extends PureComponent { onValueChange={onPresetSelect} value={activePreset} allowEmpty={false} - headerIcon={showOnlyDimensionDropdown ? this.props.icon : null} + headerIcon={showDropDownHeaderIcon ? this.props.icon : null} displaySearchBox={sortedPresetOptions.length >= 10} searchOptions={searchOptions(this.state.searchTerm, sortedPresetOptions)} onSearchTermChange={this.handleSearchTermChange} @@ -85,27 +83,6 @@ export default class DimensionSelector extends PureComponent { ) } - render() { - const { - icon, - dimensionLabel, - dimensionName, - showOnlyDimensionDropdown - } = this.props; - - const dimensionDropdown = this.renderDimensionDropdown(); - - return showOnlyDimensionDropdown === true ? dimensionDropdown : ( -
  • -
    - - -
    - {dimensionDropdown} -
    • - ); - } - handleSearchTermChange = searchTerm => { this.setState({searchTerm}); } diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js index c647a01797..bb4ffc9c50 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js @@ -170,7 +170,7 @@ export default class DimensionSwitcher extends PureComponent { presets={this.presetsForDimension(dimensionName)} activePreset={activePreset} onSelect={this.handleSelectPreset} - showOnlyDimensionDropdown={Object.keys(contentDimensionsObject).length === 1} + showDropDownHeaderIcon={Object.keys(contentDimensionsObject).length === 1} /> ); } @@ -218,7 +218,17 @@ export default class DimensionSwitcher extends PureComponent { {contentDimensionsObjectKeys.map(dimensionName => { - return this.renderSingleDimensionSelector(dimensionName, contentDimensionsObject) + const dimensionConfiguration = contentDimensionsObject[dimensionName]; + const icon = this.getDimensionIcon(dimensionName, contentDimensionsObject); + return ( +
  • +
    + + +
    + {this.renderSingleDimensionSelector(dimensionName, contentDimensionsObject)} +
    • + ) })} {Object.keys(contentDimensions).length > 1 &&
    diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap b/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap index cfd6241199..1a76b85a52 100644 --- a/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap +++ b/packages/react-ui-components/src/SelectBox_Option_SingleLine/__snapshots__/selectBox_Option_SingleLine.spec.js.snap @@ -12,7 +12,6 @@ exports[` should render correctly. 1`] = ` "label": "Bar label", } } - showIcon={false} theme={Object {}} > + {option.label} ); From f3c21f1623b93e5f07a2110fc779d643cec7dfab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Sun, 2 Apr 2023 21:15:27 +0200 Subject: [PATCH 12/12] TASK: Adjust spacings --- .../PrimaryToolbar/DimensionSwitcher/style.module.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 d054d13942..d3a87a2db3 100644 --- a/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css +++ b/packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css @@ -29,7 +29,7 @@ } .dimensionSwitcherDropDown { - min-width: 240px; + min-width: fit-content; } .dimensionCategory + .dimensionCategory { @@ -76,4 +76,8 @@ background: unset; min-width: fit-content; } + + .dimensionSwitcherDropDown div[role='button'] { + padding: 5px 0 5px var(--spacing-Full); + } }