FileUploader: Fix UI issues in Fluent

DevExpress · Oct 27, 2023 · 82bdce6 · 82bdce6
1 parent 85d4d7b
commit 82bdce6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss b/packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss
@@ -9,6 +9,8 @@
 * $type color
 */
 $fileuploader-filename-color: $base-text-color !default;
+$fileuploader-progressbar-status-color: $base-text-color !default;
+$fluent-fileuploader-files-container-bg-color: $base-neutral-background1 !default;
 
 /**
 * $name 20. File status text color

diff --git a/packages/devextreme/scss/widgets/fluent/fileUploader/_index.scss b/packages/devextreme/scss/widgets/fluent/fileUploader/_index.scss
@@ -10,6 +10,7 @@
 // adduse
 
 $fluent-fileuploader-file-wrapper-border-size: 3px;
+$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 
 .dx-fileuploader-wrapper {
   padding: $fluent-fileuploader-vertical-padding;
@@ -100,10 +101,12 @@ $fluent-fileuploader-file-wrapper-border-size: 3px;
   }
 
   .dx-fileuploader-file-container {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    display: flex;
     padding: $fluent-fileuploader-file-container-padding;
     margin-bottom: 4px;
     border-radius: $fluent-fileuploader-files-container-rounding;
+    background-color: $fluent-fileuploader-files-container-bg-color;
+    box-shadow: $fluent-fileuploader-file-container-boxshadow;
 
     .dx-fileuploader-button-container + .dx-fileuploader-button-container {
       .dx-button {
@@ -116,6 +119,12 @@ $fluent-fileuploader-file-wrapper-border-size: 3px;
       }
     }
 
+    .dx-fileuploader-button-container {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     .dx-button {
       height: $fluent-fileuploader-file-container-button-size;
       width: $fluent-fileuploader-file-container-button-size;
@@ -129,7 +138,12 @@ $fluent-fileuploader-file-wrapper-border-size: 3px;
   }
 }
 
+.dx-fileuploader .dx-progressbar-status {
+  color: $fileuploader-progressbar-status-color;
+}
+
 .dx-fileuploader-file {
+  display: block;
   padding-top: 5px;
   line-height: 13px;
 }

diff --git a/packages/devextreme/scss/widgets/fluent/fileUploader/_sizes.scss b/packages/devextreme/scss/widgets/fluent/fileUploader/_sizes.scss
@@ -18,7 +18,7 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
   $fluent-fileuploader-file-container-button-margin: 8px !default;
   $fluent-fileuploader-file-container-button-size: 32px !default;
   $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
-  $fluent-fileuploader-file-size-margin: 0 8px 0 4px !default;
+  $fluent-fileuploader-file-size-margin: 0 0 0 4px !default;
 }
 
 @else if $size == "compact" {
@@ -27,5 +27,5 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
   $fluent-fileuploader-file-container-button-margin: 2px !default;
   $fluent-fileuploader-file-container-button-size: 28px !default;
   $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
-  $fluent-fileuploader-file-size-margin: 0 8px 4px !default;
+  $fluent-fileuploader-file-size-margin: 0 0 4px !default;
 }
diff --git a/...e/etalons/editor-before-click-add-button-and-validation (fluent-blue-light).png b/...e/etalons/editor-before-click-add-button-and-validation (fluent-blue-light).png
diff --git a/...mage/etalons/editor-before-click-add-button-from-device (fluent-blue-light).png b/...mage/etalons/editor-before-click-add-button-from-device (fluent-blue-light).png