UX improvments for upload popup

ibexa · Feb 26, 2024 · 18527d9 · 18527d9
1 parent 953753b
commit 18527d9
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 23 deletions.
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
@@ -29,23 +29,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 +58,7 @@
 
     &__message {
         font-size: $ibexa-text-font-size-medium;
+        line-height: $ibexa-text-font-size-medium;
 
         .ibexa-icon {
             margin-right: calculateRem(4px);
@@ -73,7 +73,10 @@
         }
 
         &--error {
+            display: flex;
+            align-items: center;
             font-size: $ibexa-text-font-size-small;
+            line-height: $ibexa-text-font-size-small;
         }
     }
 

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/...ndle/ui-dev/src/modules/multi-file-upload/components/upload-list/upload.item.component.js b/...ndle/ui-dev/src/modules/multi-file-upload/components/upload-list/upload.item.component.js
@@ -380,7 +380,7 @@ export default class UploadItemComponent extends Component {
 
         const contentTypeIconUrl = getContentTypeIconUrl(contentTypeIdentifier);
 
-        return <Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small"/>;
+        return <Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />;
     }
 
     /**