diff --git a/src/bundle/Resources/config/universal_discovery_widget.yaml b/src/bundle/Resources/config/universal_discovery_widget.yaml index 32feca3396..89808d149f 100644 --- a/src/bundle/Resources/config/universal_discovery_widget.yaml +++ b/src/bundle/Resources/config/universal_discovery_widget.yaml @@ -35,6 +35,17 @@ system: browse: items_per_page: 50 priority: 30 + image_picker_tabs_config: + image_picker: + id: 'image_picker' + priority: 40 + items_per_page: 12 + hidden: false + image_picker_bookmarks: + id: 'image_picker_bookmarks' + priority: 50 + items_per_page: 30 + hidden: false # These inherit _default configuration create: diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss index 55ae909c89..b0f5406ff2 100644 --- a/src/bundle/Resources/public/scss/_mixins.scss +++ b/src/bundle/Resources/public/scss/_mixins.scss @@ -12,6 +12,7 @@ @import 'mixins/containers'; @import 'mixins/drag-and-drop'; @import 'mixins/spinner'; +@import 'mixins/tab-selector'; @mixin datetime-field() { &.is-invalid { diff --git a/src/bundle/Resources/public/scss/mixins/_tab-selector.scss b/src/bundle/Resources/public/scss/mixins/_tab-selector.scss new file mode 100644 index 0000000000..00d2b414f1 --- /dev/null +++ b/src/bundle/Resources/public/scss/mixins/_tab-selector.scss @@ -0,0 +1,43 @@ +@mixin tab-selector { + &__item { + height: calculateRem(48px); + width: calculateRem(48px); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: $ibexa-border-radius; + margin: calculateRem(12px) calculateRem(8px) calculateRem(24px); + position: relative; + + .ibexa-icon { + fill: $ibexa-color-black; + } + + &--selected { + background-color: $ibexa-color-light-400; + + .ibexa-icon { + fill: $ibexa-color-black; + } + } + + &:not(:first-of-type) { + &:before { + content: ''; + position: absolute; + top: calculateRem(-12px); + left: calculateRem(12px); + height: calculateRem(1.5px); + width: calculateRem(24px); + background-color: $ibexa-color-dark-200; + } + } + + &:hover { + .ibexa-icon { + fill: $ibexa-color-primary; + } + } + } +} \ No newline at end of file diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss index 5489d27c0f..9373d637a2 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss @@ -1,43 +1,3 @@ .c-tab-selector { - &__item { - height: calculateRem(48px); - width: calculateRem(48px); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border-radius: $ibexa-border-radius; - margin: calculateRem(12px) calculateRem(8px) calculateRem(24px); - position: relative; - - .ibexa-icon { - fill: $ibexa-color-black; - } - - &--selected { - background-color: $ibexa-color-light-400; - - .ibexa-icon { - fill: $ibexa-color-black; - } - } - - &:not(:first-of-type) { - &:before { - content: ''; - position: absolute; - top: calculateRem(-12px); - left: calculateRem(12px); - height: calculateRem(1.5px); - width: calculateRem(24px); - background-color: $ibexa-color-dark-200; - } - } - - &:hover { - .ibexa-icon { - fill: $ibexa-color-primary; - } - } - } + @include tab-selector(); } diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js index 0a96efb063..0422b28f66 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js @@ -195,6 +195,7 @@ export const DropdownPortalRefContext = createContext(); export const SuggestionsStorageContext = createContext(); export const GridActiveLocationIdContext = createContext(); export const SnackbarActionsContext = createContext(); +export const ImagePickerTabsConfigContext = createContext(); const UniversalDiscoveryModule = (props) => { const { restInfo } = props; @@ -473,112 +474,114 @@ const UniversalDiscoveryModule = (props) => { - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + @@ -633,6 +636,11 @@ UniversalDiscoveryModule.propTypes = { instanceUrl: PropTypes.string, }), snackbarEnabledActions: PropTypes.array, + imagePickerTabsConfig: PropTypes.objectOf( + PropTypes.shape({ + priority: PropTypes.number.isRequired, + }), + ), }; UniversalDiscoveryModule.defaultProps = { @@ -649,6 +657,7 @@ UniversalDiscoveryModule.defaultProps = { selectedLocations: [], restInfo: defaultRestInfo, snackbarEnabledActions: Object.values(SNACKBAR_ACTIONS), + imagePickerTabsConfig: {}, }; export default UniversalDiscoveryModule;