IBX-6398: Adjust admin-ui for Image Picker component

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;

src/bundle/Resources/public/scss/_tables.scss

@@ -2,39 +2,70 @@
     font-size: $ibexa-text-font-size;
     line-height: calculateRem(24px);
     border-spacing: 0;
+    border-collapse: separate;
     background-color: $ibexa-color-white;
     margin-bottom: 0;
 
     &.table > :not(caption) > * > * {
         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,

src/bundle/Resources/translations/ibexa_sub_items.en.xliff

@@ -326,11 +326,6 @@
         <target state="new">View</target>
         <note>key: view_switcher.view</note>
       </trans-unit>
-      <trans-unit id="5ae5a511a5c344781ad0caa53efe7b33429c6132" resname="viewing_message">
-        <source>Viewing %viewingCount% out of %totalCount% sub-items</source>
-        <target state="new">Viewing %viewingCount% out of %totalCount% sub-items</target>
-        <note>key: viewing_message</note>
-      </trans-unit>
     </body>
   </file>
 </xliff>

src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff

@@ -231,6 +231,11 @@
         <target state="new">Select destination</target>
         <note>key: move.title</note>
       </trans-unit>
+      <trans-unit id="d31e50b1f33f2682ff35901dc7d7c4ea646ca922" resname="pagination.info.viewing_message">
+        <source>Viewing %viewingCount% out of %totalCount% items</source>
+        <target state="new">Viewing %viewingCount% out of %totalCount% items</target>
+        <note>key: pagination.info.viewing_message</note>
+      </trans-unit>
       <trans-unit id="fde645e6790429ce2f904099b7aa2712224be9aa" resname="popup.close.label">
         <source>Close</source>
         <target state="new">Close</target>

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]}`;
+};

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 <div className={className} dangerouslySetInnerHTML={{ __html: message }} />;
+};
+
+PaginationInfo.propTypes = {
+    totalCount: PropTypes.number.isRequired,
+    viewingCount: PropTypes.number.isRequired,
+    extraClasses: PropTypes.string,
+};
+
+PaginationInfo.defaultProps = {
+    extraClasses: '',
+};
+
+export default PaginationInfo;

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;

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 <div className="m-sub-items__pagination-info ibexa-pagination__info" dangerouslySetInnerHTML={{ __html: message }} />;
+        return <PaginationInfo totalCount={totalCount} viewingCount={viewingCount} extraClasses="m-sub-items__pagination-info" />;
     }
 
     /**