HtmlEditor: Update image uploading dropzone UI in Fluent

DevExpress · Oct 16, 2023 · ebbb3c5 · ebbb3c5
1 parent 28cd3f6
commit ebbb3c5
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 3 deletions.
diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -85,6 +85,7 @@ $base-border-color-accessible-hover: null !default;
 $base-border-color-accessible-focused: null !default;
 $base-neutral-border-color2: null !default;
 $base-neutral-border-color3: null !default;
+$base-neutral-border-color4: rgba(209, 209, 209, 1) !default; // #d1d1d1
 
 $base-inverted-bg: null !default;
 $base-element-bg: null !default;

diff --git a/packages/devextreme/scss/widgets/fluent/htmlEditor/_colors.scss b/packages/devextreme/scss/widgets/fluent/htmlEditor/_colors.scss
@@ -13,3 +13,5 @@ $htmleditor-resize-frame-border-color: $base-accent !default;
 $htmleditor-resize-handle-bg: $base-accent !default;
 $htmleditor-mention-bg: $base-bg-selected !default;
 $htmleditor-table-border-color: $base-border-color !default;
+$htmleditor-fileuploader-input-wrapper-border-color: $base-neutral-border-color4 !default;
+$htmleditor-fileuploader-input-wrapper-bg-color: $base-neutral-background2 !default;
diff --git a/packages/devextreme/scss/widgets/fluent/htmlEditor/_index.scss b/packages/devextreme/scss/widgets/fluent/htmlEditor/_index.scss
@@ -239,10 +239,22 @@
   }
 
   .dx-fileuploader-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
     padding: $fluent-html-editor-add-image-dialog-fileuploader-padding;
-    border: 3px dashed $base-border-color;
+    border: 1px dashed $htmleditor-fileuploader-input-wrapper-border-color;
+    background-color: $htmleditor-fileuploader-input-wrapper-bg-color;
+    border-radius: $fluent-html-editor-fileuploader-input-wrapper-border-radius;
+
+    &::after,
+    &::before {
+      content: none;
+    }
 
     .dx-fileuploader-input-label {
+      text-align: center;
       border-width: 0;
     }
   }

diff --git a/packages/devextreme/scss/widgets/fluent/htmlEditor/_sizes.scss b/packages/devextreme/scss/widgets/fluent/htmlEditor/_sizes.scss
@@ -8,19 +8,20 @@ $fluent-html-editor-vertical-padding: null !default;
 $fluent-html-editor-horizontal-padding: null !default;
 $fluent-html-editor-add-image-dialog-fileuploader-padding: null !default;
 $fluent-html-editor-toolbar-menu-separator-margin: 4px !default;
+$fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default;
 
 @if $size == "default" {
   $fluent-toolbar-size-editor-width: 120px !default;
   $fluent-html-editor-vertical-padding: 16px !default;
   $fluent-html-editor-horizontal-padding: 16px !default;
-  $fluent-html-editor-add-image-dialog-fileuploader-padding: 50px 40px;
+  $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px;
 }
 
 @else if $size == "compact" {
   $fluent-toolbar-size-editor-width: 90px !default;
   $fluent-html-editor-vertical-padding: 12px !default;
   $fluent-html-editor-horizontal-padding: 12px !default;
-  $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 30px;
+  $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px;
 }
 
 $fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !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
diff --git a/...lEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-blue-light).png b/...lEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-blue-light).png