UX improvments for upload popup

ibexa · Feb 28, 2024 · 1f1618d · 1f1618d
1 parent 953753b
commit 1f1618d
Show file tree

Hide file tree

Showing 14 changed files with 267 additions and 245 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.error.page.js b/src/bundle/Resources/public/js/scripts/admin.error.page.js
@@ -1,5 +1,9 @@
 (function (global, doc, iconPaths) {
-    const notificationsContainer = doc.querySelector('.ibexa-notifications-container');
+    const configRootNodeSelector = getRootNodeSelector();
+    const noticeRootNode = configRootNodeSelector 
+        ? doc.querySelector(configRootNodeSelector)
+        : doc.body
+    const notificationsContainer = noticeRootNode.querySelector('.ibexa-notifications-container');
     const notifications = JSON.parse(notificationsContainer.dataset.notifications);
     const { template } = notificationsContainer.dataset;
     const iconsMap = {
@@ -16,6 +20,7 @@
         return stringTempNode.innerHTML;
     };
     const addNotification = ({ detail }) => {
+        console.log('add n')
         const { label, message } = detail;
         const container = doc.createElement('div');
         const iconSetPath = iconPaths.iconSets[iconPaths.defaultIconSet];
@@ -38,5 +43,5 @@
         messages.forEach((message) => addNotification({ detail: { label, message } }));
     });
 
-    doc.body.addEventListener('ibexa-notify', addNotification, false);
+    noticeRootNode.addEventListener('ibexa-notify', addNotification, false);
 })(window, window.document, window.ibexa.iconPaths);
diff --git a/src/bundle/Resources/public/js/scripts/core/notifications.js b/src/bundle/Resources/public/js/scripts/core/notifications.js
@@ -0,0 +1,22 @@
+import { getAdminUiConfig, getRootNodeSelector } from "./helpers/context.helper";
+import { escapeHTML } from "./helpers/text.helper";
+import { getIconPath } from "./helpers/icon.helper";
+
+const notificationsContainer = null;
+const notifications = null;
+
+export const initNotifications = (notificationsContainer) => {
+    const adminUiConfig = getAdminUiConfig();
+    const notifications = JSON.parse(notificationsContainer.dataset.notifications);
+
+    console.log("Selector:", getRootNodeSelector);
+
+    Object.entries(notifications).forEach(([label, messages]) => {
+        messages.forEach((message) => addNotification({ detail: { label, message } }));
+    });
+
+    doc.body.addEventListener('ibexa-notify', addNotification, false);
+}
+
+export const addNotification = ({ detail }) => {
+}
diff --git a/src/bundle/Resources/public/js/scripts/helpers/context.helper.js b/src/bundle/Resources/public/js/scripts/helpers/context.helper.js
@@ -1,5 +1,6 @@
 let { bootstrap, flatpickr, moment, Popper, Routing, Translator } = window;
 let adminUiConfig = window.ibexa?.adminUiConfig;
+let rootNodeSelector = null;
 const restInfo = {
     accessToken: null,
     instanceUrl: window.location.origin,
@@ -44,6 +45,12 @@ export const setTranslator = (TranslatorInstance, forceSet = false) => {
         Translator = TranslatorInstance;
     }
 };
+export const setRootNodeSelector = (rootNodeSelectorParam, forceSet = false) => {
+    if (!rootNodeSelector || forceSet) {
+        rootNodeSelector = rootNodeSelectorParam;
+    }
+};
+
 
 export const getAdminUiConfig = () => adminUiConfig;
 export const getBootstrap = () => bootstrap;
@@ -53,3 +60,4 @@ export const getPopper = () => Popper;
 export const getRouting = () => Routing;
 export const getTranslator = () => Translator;
 export const getRestInfo = () => restInfo;
+export const getRootNodeSelector = () => rootNodeSelector;
diff --git a/src/bundle/Resources/public/js/scripts/helpers/notification.helper.js b/src/bundle/Resources/public/js/scripts/helpers/notification.helper.js
@@ -1,3 +1,5 @@
+import { getRootNodeSelector } from "./context.helper";
+
 const { document: doc } = window;
 
 const NOTIFICATION_INFO_LABEL = 'info';
@@ -16,9 +18,14 @@ const NOTIFICATION_ERROR_LABEL = 'error';
  * @param {Object} detail.rawPlaceholdersMap
  */
 const showNotification = (detail) => {
+    const configRootNodeSelector = getRootNodeSelector();
+    const eventDispatchNode = configRootNodeSelector 
+        ? doc.querySelector(configRootNodeSelector)
+        : doc.body
+
     const event = new CustomEvent('ibexa-notify', { detail });
 
-    doc.body.dispatchEvent(event);
+    eventDispatchNode.dispatchEvent(event);
 };
 
 /**

diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss
@@ -5,22 +5,22 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: calculateRem(47px);
 
     &__message {
-        color: $ibexa-color-dark-400;
-        margin-bottom: calculateRem(12px);
+        color: $ibexa-color-dark;
+        margin-bottom: calculateRem(16px);
+    }
 
-        &--main {
-            cursor: auto;
-            font-weight: bold;
-            margin-top: calculateRem(44px);
-        }
+    &__message--main {
+        cursor: auto;
+        font-weight: 600;
+    }
 
-        &--filesize {
-            color: $ibexa-color-dark-300;
-            font-size: $ibexa-text-font-size-medium;
-            margin: calculateRem(12px) 0 calculateRem(44px);
-        }
+    &__message--filesize {
+        margin: calculateRem(16px) 0 0 0;
+        color: $ibexa-color-dark-400;
+        font-size: $ibexa-text-font-size-medium;
     }
 
     &__input--hidden {

diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_progress.bar.scss b/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;
     }
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss
@@ -1,15 +1,15 @@
 .c-upload-list-item {
     display: flex;
+    flex-wrap: wrap;
     background: $ibexa-color-white;
     padding: calculateRem(8px) 0;
     margin: calculateRem(8px) 0;
     min-height: calculateRem(60px);
 
     &--errored {
-        background: $ibexa-color-danger-100;
+        background: $ibexa-color-danger-200;
         color: $ibexa-color-danger-600;
         border-radius: $ibexa-border-radius;
-        padding-right: calculateRem(32px);
 
         .ibexa-icon {
             fill: $ibexa-color-danger-600;
@@ -20,6 +20,22 @@
         }
     }
 
+    &--expanded-multiple-errors {
+        padding-bottom: 0;
+
+        .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);
+            }
+        }
+    }
+
     &__icon-wrapper {
         flex: 0 0 calculateRem(20px);
         display: flex;
@@ -29,23 +45,22 @@
 
     &__meta {
         padding: 0 calculateRem(8px);
-        line-height: 1.4;
         max-width: 25vw;
         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 {
+        padding-top: calculateRem(6px);
         color: $ibexa-color-dark-400;
         font-size: $ibexa-text-font-size-small;
     }
@@ -59,6 +74,7 @@
 
     &__message {
         font-size: $ibexa-text-font-size-medium;
+        line-height: $ibexa-text-font-size-medium;
 
         .ibexa-icon {
             margin-right: calculateRem(4px);
@@ -73,7 +89,11 @@
         }
 
         &--error {
+            display: flex;
+            align-items: center;
             font-size: $ibexa-text-font-size-small;
+            line-height: $ibexa-text-font-size-small;
+            padding-right: calculateRem(32px);
         }
     }
 
@@ -98,4 +118,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;
+    }
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss
@@ -9,25 +9,35 @@
     color: $ibexa-color-dark;
 
     &__label {
-        margin-top: calculateRem(16px);
+        margin-bottom: calculateRem(8px);
         color: $ibexa-color-dark-400;
         font-size: $ibexa-text-font-size-small;
+        line-height: calculateRem(18px);
     }
 
     .c-tooltip-popup {
         width: 100%;
-        max-width: calculateRem(774px);
+        max-width: calculateRem(800px);
         position: absolute;
         z-index: 2;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        padding: calculateRem(16px) calculateRem(32px) calculateRem(32px); 
+        padding: calculateRem(32px); 
 
         &__header {
             @include modal-header();
 
-            padding: $modal-header-padding-y $modal-header-padding-x;
+            padding: 0;
+            margin-bottom: calculateRem(36px);
+        }
+
+        &__title {
+            line-height: calculateRem(42px);
+        }
+
+        &__close {
+            top: 0;
         }
 
         &__subtitle {

diff --git a/src/bundle/Resources/translations/ibexa_multi_file_upload.en.xliff b/src/bundle/Resources/translations/ibexa_multi_file_upload.en.xliff
@@ -21,11 +21,6 @@
         <target state="new">Cannot get content type by identifier</target>
         <note>key: cannot_get_content_type_identifier.message</note>
       </trans-unit>
-      <trans-unit id="235e57ee5665f61ea5873be5e2f6cd15b05a51c0" resname="cannot_upload.message">
-        <source>Cannot upload file</source>
-        <target state="new">Cannot upload file</target>
-        <note>key: cannot_upload.message</note>
-      </trans-unit>
       <trans-unit id="9914d81081499df395d9a54e9d5208be234d4367" resname="delete.label">
         <source>Delete</source>
         <target state="new">Delete</target>
@@ -61,6 +56,11 @@
         <target state="new">Edit</target>
         <note>key: edit.label</note>
       </trans-unit>
+      <trans-unit id="34aa1a315b52b6c1a6c43ce449753c7224b8c4a0" resname="general.error.message">
+        <source>An error occurred while publishing a file</source>
+        <target state="new">An error occurred while publishing a file</target>
+        <note>key: general.error.message</note>
+      </trans-unit>
       <trans-unit id="0cd9663c2a0626f9d1556efe30c151196af02e8e" resname="max_file_size.message">
         <source>Max file size:</source>
         <target state="new">Max file size:</target>
@@ -76,6 +76,11 @@
         <target state="new">Under %name%</target>
         <note>key: multi_file_upload_popup.subtitle</note>
       </trans-unit>
+      <trans-unit id="c593b1388a800c1546c5bbbdb6eab08ef170f879" resname="multierror.label">
+        <source>Failed to upload </source>
+        <target state="new">Failed to upload </target>
+        <note>key: multierror.label</note>
+      </trans-unit>
       <trans-unit id="b23e0c9a0c723cb5fc100bbf270a045cb6c895da" resname="upload.progress_bar.uploading">
         <source>Uploading...</source>
         <target state="new">Uploading...</target>