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/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,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 <div className="m-sub-items__pagination-info ibexa-pagination__info" dangerouslySetInnerHTML={{ __html: message }} />;
+};
+
+PaginationInfo.propTypes = {
+    totalCount: PropTypes.number.isRequired,
+    viewingCount: PropTypes.number.isRequired,
+};
+
+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/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;

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();