Assets Library Widget - added files upload

phpstan-baseline.neon

@@ -9280,61 +9280,6 @@ parameters:
 			count: 1
 			path: src/lib/UI/Config/Provider/Autosave.php
 
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:__construct\\(\\) has parameter \\$defaultMappings with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:__construct\\(\\) has parameter \\$fallbackContentType with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:__construct\\(\\) has parameter \\$locationMappings with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildFallbackContentTypeStructure\\(\\) has parameter \\$fallbackContentType with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildFallbackContentTypeStructure\\(\\) return type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildMappingGroupStructure\\(\\) has parameter \\$mappingGroup with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildMappingGroupStructure\\(\\) return type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:getConfig\\(\\) return type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Property Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:\\$defaultMappings type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Property Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:\\$fallbackContentType type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Property Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:\\$locationMappings type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
 		-
 			message: "#^Offset 'dirname' does not exist on array\\{dirname\\?\\: string, basename\\: string, extension\\?\\: string, filename\\: string\\}\\.$#"
 			count: 1

src/bundle/Resources/encore/ibexa.js.config.js

@@ -228,9 +228,7 @@ module.exports = (Encore) => {
                 '../../ui-dev/src/modules/universal-discovery/components/tree-item-toggle-selection/tree.item.toggle.selection.js',
             ),
         ])
-        .addEntry('ibexa-admin-ui-mfu-js', [
-            path.resolve(__dirname, '../../ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js'),
-        ])
+        .addEntry('ibexa-admin-ui-mfu-js', [path.resolve(__dirname, '../../ui-dev/src/modules/multi-file-upload/config.loader.js')])
         .addEntry('ibexa-admin-ui-subitems-js', [path.resolve(__dirname, '../../ui-dev/src/modules/sub-items/sub.items.module.js')])
         .addEntry('ibexa-admin-ui-content-tree-js', [
             path.resolve(__dirname, '../../ui-dev/src/modules/content-tree/content.tree.module.js'),

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -150,6 +150,7 @@
 
             return contentTypeDataMap;
         }, {});
+
         const mfuAttrs = {
             adminUiConfig: {
                 ...ibexa.adminUiConfig,
@@ -160,6 +161,7 @@
                 contentTypeIdentifier: mfuContainer.dataset.parentContentTypeIdentifier,
                 contentTypeId: parseInt(mfuContainer.dataset.parentContentTypeId, 10),
                 locationPath: mfuContainer.dataset.parentLocationPath,
+                name: mfuContainer.dataset.parentName,
                 language: mfuContainer.dataset.parentContentLanguage,
             },
             currentLanguage: mfuContainer.dataset.currentLanguage,

src/bundle/Resources/public/js/scripts/helpers/context.helper.js

@@ -1,16 +1,17 @@
 let { bootstrap, flatpickr, moment, Popper, Routing, Translator } = window;
 let adminUiConfig = window.ibexa?.adminUiConfig;
+let rootNode = document.body;
 const restInfo = {
     accessToken: null,
     instanceUrl: window.location.origin,
     token: document.querySelector('meta[name="CSRF-Token"]')?.content,
     siteaccess: document.querySelector('meta[name="SiteAccess"]')?.content,
 };
 
-export const setRestInfo = ({ instanceUrl, token, csrfToken, siteaccess }) => {
+export const setRestInfo = ({ instanceUrl, accessToken, token, siteaccess }) => {
     restInfo.instanceUrl = instanceUrl ?? restInfo.instanceUrl;
+    restInfo.accessToken = accessToken ?? restInfo.accessToken;
     restInfo.token = token ?? restInfo.token;
-    restInfo.csrfToken = csrfToken ?? restInfo.csrfToken;
     restInfo.siteaccess = siteaccess ?? restInfo.siteaccess;
 };
 export const setAdminUiConfig = (loadedAdminUiConfig) => (adminUiConfig = loadedAdminUiConfig);
@@ -44,6 +45,7 @@ export const setTranslator = (TranslatorInstance, forceSet = false) => {
         Translator = TranslatorInstance;
     }
 };
+export const setRootNode = (rootNodeParam) => (rootNode = rootNodeParam);
 
 export const getAdminUiConfig = () => adminUiConfig;
 export const getBootstrap = () => bootstrap;
@@ -53,3 +55,4 @@ export const getPopper = () => Popper;
 export const getRouting = () => Routing;
 export const getTranslator = () => Translator;
 export const getRestInfo = () => restInfo;
+export const getRootNode = () => rootNode;

src/bundle/Resources/public/scss/ui/modules/common/_tooltip.popup.scss

@@ -9,6 +9,12 @@
         margin: 0;
     }
 
+    &__subtitle {
+        @include modal-subtitle();
+
+        color: $ibexa-color-dark;
+    }
+
     &__close {
         @include close-button();
     }

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss

@@ -5,21 +5,81 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: calculateRem(47px);
 
     &__message {
+        color: $ibexa-color-dark;
+        margin-bottom: calculateRem(16px);
+    }
+
+    &__message--main {
+        cursor: auto;
+        font-weight: 600;
+    }
+
+    &__message--filesize {
+        margin: calculateRem(16px) 0 0 0;
         color: $ibexa-color-dark-400;
-        margin-bottom: calculateRem(12px);
+        font-size: $ibexa-text-font-size-medium;
+    }
+
+    &__max-files-size {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: calculateRem(8px);
+
+        &--expanded {
+            .c-drop-area {
+                &__max-file-size-item {
+                    display: flex;
+                }
 
-        &--main {
-            cursor: auto;
-            font-weight: bold;
-            margin-top: calculateRem(44px);
+                &__max-file-size-toggle-btn {
+                    &::after {
+                        transform: rotate(-180deg);
+                    }
+                }
+            }
         }
+    }
+
+    &__max-file-size-item {
+        display: none;
+        gap: calculateRem(4px);
+        justify-content: center;
+        align-items: center;
+        font-size: $ibexa-text-font-size-small;
 
-        &--filesize {
-            color: $ibexa-color-dark-300;
+        &:first-child {
             font-size: $ibexa-text-font-size-medium;
-            margin: calculateRem(12px) 0 calculateRem(44px);
+            display: flex;
+        }
+    }
+
+    &__max-file-size-toggle-btn {
+        width: calculateRem(16px);
+        height: calculateRem(16px);
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        border: none;
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: calculateRem(6px);
+            height: calculateRem(3px);
+            top: calc(50% - #{calculateRem(3px)});
+            right: 0;
+            border-left: calculateRem(6px) solid transparent;
+            border-right: calculateRem(6px) solid transparent;
+            border-top: calculateRem(6px) solid $ibexa-color-dark-400;
+            transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
         }
     }
 

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_progress.bar.scss

@@ -9,13 +9,13 @@
         border-radius: calculateRem(4px);
         transition: width 0.2s linear;
         height: calculateRem(8px);
-        width: 10vw;
+        width: calculateRem(176px);
         position: relative;
 
         &::after {
             content: '';
             width: calc(100% - var(--progress));
-            height: calculateRem(10px);
+            height: calculateRem(11px);
             border-radius: calculateRem(4px);
             position: absolute;
             right: 0;
@@ -29,7 +29,7 @@
     }
 
     &__label {
-        font-size: $ibexa-text-font-size-small;
+        font-size: $ibexa-text-font-size-medium;
         color: $ibexa-color-dark-400;
     }
 }

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss

@@ -1,20 +1,39 @@
 .c-upload-list-item {
     display: flex;
+    flex-wrap: wrap;
     background: $ibexa-color-white;
-    padding: calculateRem(8px) 0;
-    min-height: calculateRem(60px);
+    padding: 0;
+    margin: calculateRem(12px) 0;
+    height: calculateRem(48px);
 
     &--errored {
-        background: $ibexa-color-danger-100;
-        color: $ibexa-color-danger;
+        background: $ibexa-color-danger-200;
+        color: $ibexa-color-danger-600;
         border-radius: $ibexa-border-radius;
 
         .ibexa-icon {
-            fill: $ibexa-color-danger;
+            fill: $ibexa-color-danger-600;
         }
 
         .c-upload-list-item__size {
-            color: $ibexa-color-danger;
+            color: $ibexa-color-danger-600;
+        }
+    }
+
+    &--expanded-multiple-errors {
+        padding-bottom: 0;
+        height: auto;
+
+        .c-upload-list-item {
+            &__multiple-errors-list {
+                display: block;
+                padding: calculateRem(4px) 0 calculateRem(8px) calculateRem(26px);
+                margin-top: calculateRem(4px);
+            }
+
+            &__multiple-errors-toggle-btn {
+                transform: rotate(180deg);
+            }
         }
     }
 
@@ -26,26 +45,25 @@
     }
 
     &__meta {
-        padding: 0 calculateRem(16px);
-        line-height: 1.4;
+        padding: 0 calculateRem(8px);
         max-width: 25vw;
+        height: calculateRem(48px);
         display: flex;
         justify-content: center;
         align-items: center;
     }
 
     &__name {
-        font-size: calculateRem(16px);
         margin-right: calculateRem(8px);
-        max-width: 15vw;
+        max-width: calculateRem(172px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
     &__size {
-        color: $ibexa-color-dark-300;
-        font-size: $ibexa-text-font-size-medium;
+        color: $ibexa-color-dark-400;
+        font-size: $ibexa-text-font-size-small;
     }
 
     &__info {
@@ -56,8 +74,8 @@
     }
 
     &__message {
-        font-style: italic;
-        font-size: $ibexa-text-font-size-small;
+        font-size: $ibexa-text-font-size-medium;
+        line-height: $ibexa-text-font-size-medium;
 
         .ibexa-icon {
             margin-right: calculateRem(4px);
@@ -70,6 +88,14 @@
                 fill: $ibexa-color-success;
             }
         }
+
+        &--error {
+            display: flex;
+            align-items: center;
+            font-size: $ibexa-text-font-size-small;
+            line-height: $ibexa-text-font-size-small;
+            padding-right: calculateRem(32px);
+        }
     }
 
     &__actions {
@@ -93,4 +119,27 @@
             margin-right: 0;
         }
     }
+
+    &__multiple-errors-toggle-btn {
+        border: none;
+        outline: none;
+        margin: 0 0 0 calculateRem(8px);
+        padding: 0;
+        transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+    }
+
+    &__multiple-errors-list {
+        display: none;
+        flex-basis: 100%;
+        background: $ibexa-color-danger-100;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;
+    }
+
+    &__multiple-errors-item {
+        margin: calculateRem(4px) 0;
+        font-size: $ibexa-text-font-size-medium;
+    }
 }