From c1b479aef157d73b8e3996a103f9805d4f0f606f Mon Sep 17 00:00:00 2001 From: tischsoic Date: Tue, 24 Oct 2023 15:59:52 +0200 Subject: [PATCH 1/3] IBX-6398: Adjust admin-ui for Image Picker component --- src/bundle/Resources/public/scss/_inputs.scss | 2 +- src/bundle/Resources/public/scss/_tables.scss | 59 +++++++++++++++---- .../src/modules/common/helpers/text.helper.js | 15 +++++ .../common/pagination/pagination.info.js | 28 +++++++++ .../multi-file-upload/helpers/text.helper.js | 24 +------- .../universal-discovery/browse.tab.module.js | 14 +++++ .../universal.discovery.module.js | 18 +++++- 7 files changed, 127 insertions(+), 33 deletions(-) create mode 100644 src/bundle/ui-dev/src/modules/common/helpers/text.helper.js create mode 100644 src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss index 8f9f406c64..60ee52b8a4 100644 --- a/src/bundle/Resources/public/scss/_inputs.scss +++ b/src/bundle/Resources/public/scss/_inputs.scss @@ -115,6 +115,7 @@ position: relative; display: inline-block; cursor: pointer; + background-color: $ibexa-color-white; &:disabled { &.form-check-input { @@ -128,7 +129,6 @@ height: calculateRem(16px); border-radius: calculateRem(2px); margin-bottom: calculateRem(3px); - background-color: transparent; &.form-check-input.form-check-input { float: none; diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss index 4dfcc91cbf..c3338da243 100644 --- a/src/bundle/Resources/public/scss/_tables.scss +++ b/src/bundle/Resources/public/scss/_tables.scss @@ -2,6 +2,7 @@ font-size: $ibexa-text-font-size; line-height: calculateRem(24px); border-spacing: 0; + border-collapse: separate; background-color: $ibexa-color-white; margin-bottom: 0; @@ -9,32 +10,62 @@ box-shadow: none; } - &__row:nth-child(odd) { - .ibexa-table__cell { - background-color: $ibexa-color-light-300; + &__row { + &:nth-child(odd) { + .ibexa-table__cell { + background-color: $ibexa-color-light-300; + } } - } - &__row:nth-child(even) { - .ibexa-table__cell { - background-color: $ibexa-color-white; + :nth-child(even) { + .ibexa-table__cell { + background-color: $ibexa-color-white; + } + } + + &--selected { + .ibexa-table__cell { + font-weight: 600; + } + } + + &--selectable { + cursor: pointer; + + &:hover { + .ibexa-table__cell { + border-color: $ibexa-color-primary; + } + + .ibexa-input--checkbox, + .ibexa-input--radio { + border-color: $ibexa-color-primary; + } + } } } &__cell:first-child { border-top-left-radius: $ibexa-border-radius; border-bottom-left-radius: $ibexa-border-radius; + border-left-width: calculateRem(1px); } &__cell:last-child { border-top-right-radius: $ibexa-border-radius; border-bottom-right-radius: $ibexa-border-radius; + border-right-width: calculateRem(1px); } &__cell.ibexa-table__cell { vertical-align: middle; padding: calculateRem(12px) calculateRem(16px); height: calculateRem(68px); + border-style: solid; + border-color: transparent; + border-top-width: calculateRem(1px); + border-bottom-width: calculateRem(1px); + transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; .form-check { margin-bottom: 0; @@ -128,7 +159,7 @@ display: none; } - &--asc:after { + &--asc::after { display: block; } @@ -197,6 +228,16 @@ text-decoration: none; } + &__thumbnail { + min-width: calculateRem(90px); + max-width: calculateRem(90px); + min-height: calculateRem(64px); + max-height: calculateRem(64px); + border-radius: calculateRem(8px); + overflow: hidden; + object-fit: cover; + } + &--not-striped { .ibexa-table__row { .ibexa-table__cell { @@ -206,8 +247,6 @@ } &--last-column-sticky { - border-collapse: separate; - .ibexa-table__row, .ibexa-table__head-row { .ibexa-table__cell:last-of-type, diff --git a/src/bundle/ui-dev/src/modules/common/helpers/text.helper.js b/src/bundle/ui-dev/src/modules/common/helpers/text.helper.js new file mode 100644 index 0000000000..8d1f05b2c6 --- /dev/null +++ b/src/bundle/ui-dev/src/modules/common/helpers/text.helper.js @@ -0,0 +1,15 @@ +export const fileSizeToString = (filesize) => { + const units = ['bytes', 'KB', 'MB', 'GB']; + const kilobyte = 1024; + let size = parseInt(filesize, 10) || 0; + let unitIndex = 0; + + while (size >= kilobyte) { + size = size / kilobyte; + unitIndex++; + } + + const decimalUnits = unitIndex < 1 ? 0 : 1; + + return `${size.toFixed(size >= 10 || decimalUnits)} ${units[unitIndex]}`; +}; diff --git a/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js b/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js new file mode 100644 index 0000000000..50cca3abb3 --- /dev/null +++ b/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const { Translator } = window; + +const PaginationInfo = ({ totalCount, viewingCount }) => { + if (totalCount === 0) { + return null; + } + + const message = Translator.trans( + /*@Desc("Viewing %viewingCount% out of %totalCount% items")*/ 'viewing_message', + { + viewingCount, + totalCount, + }, + 'ibexa_sub_items', + ); + + return
; +}; + +PaginationInfo.propTypes = { + totalCount: PropTypes.number.isRequired, + viewingCount: PropTypes.number.isRequired, +}; + +export default PaginationInfo; diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/helpers/text.helper.js b/src/bundle/ui-dev/src/modules/multi-file-upload/helpers/text.helper.js index 6c094c077f..f09830e284 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/helpers/text.helper.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/helpers/text.helper.js @@ -1,22 +1,4 @@ -/** - * Returns a filesize as a formatted string - * - * @function fileSizeToString - * @param {Number} filesize - * @returns {String} - */ -export const fileSizeToString = (filesize) => { - const units = ['bytes', 'KB', 'MB', 'GB']; - const kilobyte = 1024; - let size = parseInt(filesize, 10) || 0; - let unitIndex = 0; +import { fileSizeToString as fileSizeToStringFromCommon } from '../../common/helpers/text.helper'; - while (size >= kilobyte) { - size = size / kilobyte; - unitIndex++; - } - - const decimalUnits = unitIndex < 1 ? 0 : 1; - - return `${size.toFixed(size >= 10 || decimalUnits)} ${units[unitIndex]}`; -}; +// @deprecated, will be removed in 5.0 +export const fileSizeToString = fileSizeToStringFromCommon; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js index 2892faa225..a4515a9981 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js @@ -38,4 +38,18 @@ ibexa.addConfig( true, ); +ibexa.addConfig( + 'adminUiConfig.universalDiscoveryWidget.tabs', + [ + { + id: 'image_picker', + priority: 10, + component: BrowseTabModule, + label: Translator.trans(/*@Desc("Browse")*/ 'browse.label', {}, 'ibexa_universal_discovery_widget'), + icon: window.ibexa.helpers.icon.getIconPath('browse'), + }, + ], + true, +); + export default BrowseTabModule; 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 6ce7f1c64a..3bab5a3120 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 @@ -137,7 +137,23 @@ export const SearchTextContext = createContext(); export const DropdownPortalRefContext = createContext(); const UniversalDiscoveryModule = (props) => { - const { tabs } = ibexa.adminUiConfig.universalDiscoveryWidget; + const { tabs: tabsWithPriority } = ibexa.adminUiConfig.universalDiscoveryWidget; + const tabs = tabsWithPriority.reduce((tabsPrioritized, tabToAdd) => { + const tabWithSameIdIndex = tabsPrioritized.findIndex((tab) => tab.id === tabToAdd.id); + + if (tabWithSameIdIndex === -1) { + tabsPrioritized.push(tabToAdd); + } else { + const currentTabPriority = tabsPrioritized[tabWithSameIdIndex].priority ?? -1; + const tabToAddPriority = tabToAdd.priority ?? -1; + + if (currentTabPriority < tabToAddPriority) { + tabsPrioritized[tabWithSameIdIndex] = tabToAdd; + } + } + + return tabsPrioritized; + }, []); const defaultMarkedLocationId = props.startingLocationId || props.rootLocationId; const abortControllerRef = useRef(); const dropdownPortalRef = useRef(); From 7378c1d0613440461ea0a923cca3a09340a1cc2a Mon Sep 17 00:00:00 2001 From: tischsoic Date: Wed, 25 Oct 2023 09:18:01 +0200 Subject: [PATCH 2/3] PaginationInfo improvements/fixes --- .../translations/ibexa_sub_items.en.xliff | 5 ----- .../ibexa_universal_discovery_widget.en.xliff | 5 +++++ .../common/pagination/pagination.info.js | 18 ++++++++++++++---- .../src/modules/sub-items/sub.items.module.js | 16 ++-------------- 4 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff index dfef857828..2853a95cff 100644 --- a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff +++ b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff @@ -326,11 +326,6 @@ View key: view_switcher.view - - Viewing %viewingCount% out of %totalCount% sub-items - Viewing %viewingCount% out of %totalCount% sub-items - key: viewing_message - diff --git a/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff b/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff index 13c18c6c9b..61fd8059f3 100644 --- a/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff +++ b/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff @@ -231,6 +231,11 @@ Select destination key: move.title + + Viewing %viewingCount% out of %totalCount% items + Viewing %viewingCount% out of %totalCount% items + key: pagination.info.viewing_message + Close Close diff --git a/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js b/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js index 50cca3abb3..c91bafad46 100644 --- a/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js +++ b/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js @@ -1,28 +1,38 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { createCssClassNames } from '../helpers/css.class.names'; const { Translator } = window; -const PaginationInfo = ({ totalCount, viewingCount }) => { +const PaginationInfo = ({ totalCount, viewingCount, extraClasses }) => { if (totalCount === 0) { return null; } + const className = createCssClassNames({ + 'ibexa-pagination__info': true, + [extraClasses]: true, + }); const message = Translator.trans( - /*@Desc("Viewing %viewingCount% out of %totalCount% items")*/ 'viewing_message', + /*@Desc("Viewing %viewingCount% out of %totalCount% items")*/ 'pagination.info.viewing_message', { viewingCount, totalCount, }, - 'ibexa_sub_items', + 'ibexa_universal_discovery_widget', ); - return
; + return
; }; PaginationInfo.propTypes = { totalCount: PropTypes.number.isRequired, viewingCount: PropTypes.number.isRequired, + extraClasses: PropTypes.string, +}; + +PaginationInfo.defaultProps = { + extraClasses: '', }; export default PaginationInfo; diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js index e9d091ed35..86e7f54758 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js +++ b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js @@ -9,6 +9,7 @@ import ActionButton from './components/action-btn/action.btn.js'; import Pagination from '../common/pagination/pagination.js'; import NoItemsComponent from './components/no-items/no.items.component.js'; import Icon from '../common/icon/icon.js'; +import PaginationInfo from '../common/pagination/pagination.info.js'; import deepClone from '../common/helpers/deep.clone.helper.js'; import { updateLocationPriority, loadLocation as loadLocationService } from './services/sub.items.service'; @@ -1093,22 +1094,9 @@ export default class SubItemsModule extends Component { */ renderPaginationInfo() { const { totalCount, activePageItems } = this.state; - - if (totalCount === 0) { - return null; - } - const viewingCount = activePageItems ? activePageItems.length : 0; - const message = Translator.trans( - /*@Desc("Viewing %viewingCount% out of %totalCount% sub-items")*/ 'viewing_message', - { - viewingCount, - totalCount, - }, - 'ibexa_sub_items', - ); - return
; + return ; } /** From d49ad07c7a6cb1cdea447ba6cde88fd327c8b1bf Mon Sep 17 00:00:00 2001 From: tischsoic Date: Mon, 6 Nov 2023 11:00:51 +0100 Subject: [PATCH 3/3] Remove browser tab as image_picker tab config --- .../universal-discovery/browse.tab.module.js | 14 -------------- .../universal.discovery.module.js | 18 +----------------- 2 files changed, 1 insertion(+), 31 deletions(-) diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js index a4515a9981..2892faa225 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js @@ -38,18 +38,4 @@ ibexa.addConfig( true, ); -ibexa.addConfig( - 'adminUiConfig.universalDiscoveryWidget.tabs', - [ - { - id: 'image_picker', - priority: 10, - component: BrowseTabModule, - label: Translator.trans(/*@Desc("Browse")*/ 'browse.label', {}, 'ibexa_universal_discovery_widget'), - icon: window.ibexa.helpers.icon.getIconPath('browse'), - }, - ], - true, -); - export default BrowseTabModule; 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 3bab5a3120..6ce7f1c64a 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 @@ -137,23 +137,7 @@ export const SearchTextContext = createContext(); export const DropdownPortalRefContext = createContext(); const UniversalDiscoveryModule = (props) => { - const { tabs: tabsWithPriority } = ibexa.adminUiConfig.universalDiscoveryWidget; - const tabs = tabsWithPriority.reduce((tabsPrioritized, tabToAdd) => { - const tabWithSameIdIndex = tabsPrioritized.findIndex((tab) => tab.id === tabToAdd.id); - - if (tabWithSameIdIndex === -1) { - tabsPrioritized.push(tabToAdd); - } else { - const currentTabPriority = tabsPrioritized[tabWithSameIdIndex].priority ?? -1; - const tabToAddPriority = tabToAdd.priority ?? -1; - - if (currentTabPriority < tabToAddPriority) { - tabsPrioritized[tabWithSameIdIndex] = tabToAdd; - } - } - - return tabsPrioritized; - }, []); + const { tabs } = ibexa.adminUiConfig.universalDiscoveryWidget; const defaultMarkedLocationId = props.startingLocationId || props.rootLocationId; const abortControllerRef = useRef(); const dropdownPortalRef = useRef();