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/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/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..c91bafad46 --- /dev/null +++ b/src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js @@ -0,0 +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, 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")*/ 'pagination.info.viewing_message', + { + viewingCount, + totalCount, + }, + 'ibexa_universal_discovery_widget', + ); + + 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/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/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 ; } /**