Chat FU: rework styles to make several files showing in a one row (#31560)

Author: Zedwag

packages/devextreme-scss/scss/widgets/base/_fileUploader.scss

@@ -199,7 +199,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 6px;
+  padding-right: 6px;
 }
 
 .dx-rtl {

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss

@@ -33,6 +33,14 @@
   .dx-fileuploader-wrapper {
     padding: 0;
   }
+
+  .dx-fileuploader-files-container {
+    display: grid;
+
+    .dx-fileuploader-file-container {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .dx-chat-textarea-toolbar.dx-toolbar {

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss

@@ -4,7 +4,10 @@
   $gap,
   $textarea-border-radius,
   $textarea-padding,
-  $toolbar-min-height
+  $toolbar-min-height,
+  $chat-file-container-width,
+  $messagebox-file-container-padding,
+  $messagebox-file-container-padding-top,
 ) {
   .dx-chat-messagebox {
     padding: $messagebox-padding;
@@ -29,6 +32,13 @@
         border-bottom-right-radius: $textarea-border-radius;
       }
     }
+
+    .dx-fileuploader-files-container {
+      padding: $messagebox-file-container-padding;
+      padding-top: $messagebox-file-container-padding-top;
+      gap: $gap;
+      grid-template-columns: repeat(auto-fit, $chat-file-container-width);
+    }
   }
 
   .dx-chat-textarea-toolbar.dx-toolbar {

packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss

@@ -46,6 +46,9 @@
   $chat-messagebox-textarea-border-radius,
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-file-container-padding,
+  $chat-messagebox-file-container-padding-top,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss

@@ -18,6 +18,8 @@ $chat-messagebox-textarea-padding: null !default;
 $chat-messagebox-textarea-border-radius: null !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-file-container-padding: 3px !default;
+$chat-messagebox-file-container-padding-top: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;

packages/devextreme-scss/scss/widgets/generic/chat/_index.scss

@@ -49,6 +49,9 @@
   $chat-messagebox-textarea-border-radius,
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-file-container-padding,
+  $chat-messagebox-file-container-padding-top,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss

@@ -18,6 +18,8 @@ $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !defaul
 $chat-messagebox-textarea-padding: null !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-file-container-padding: 3px !default;
+$chat-messagebox-file-container-padding-top: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;

packages/devextreme-scss/scss/widgets/material/chat/_index.scss

@@ -47,6 +47,9 @@
   $chat-messagebox-textarea-border-radius,
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-file-container-padding,
+  $chat-messagebox-file-container-padding-top,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,

packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss

@@ -16,6 +16,8 @@ $chat-messagebox-textarea-border-radius: $base-border-radius * 2 !default;
 $chat-messagebox-textarea-padding: null !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-file-container-padding: 3px !default;
+$chat-messagebox-file-container-padding-top: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;

packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts

@@ -10,7 +10,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import Callbacks from '@js/core/utils/callbacks';
 import { extend } from '@js/core/utils/extend';
-import { getOffset, getWidth } from '@js/core/utils/size';
+import { getOffset, getOuterWidth, getWidth } from '@js/core/utils/size';
 import { isDefined, isFunction, isNumeric } from '@js/core/utils/type';
 import { getWindow } from '@js/core/utils/window';
 import type { DxEvent } from '@js/events';
@@ -776,7 +776,9 @@ class FileUploader extends Editor<FileUploaderProperties> {
   }
 
   _updateFileNameMaxWidth(): void {
-    const { allowCanceling, uploadMode } = this.option();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { allowCanceling, uploadMode, _showFileIcon } = this.option();
+
     const cancelButtonsCount = allowCanceling && uploadMode !== 'useForm' ? 1 : 0;
     const uploadButtonsCount = uploadMode === 'useButtons' ? 1 : 0;
     const filesContainerWidth = getWidth(
@@ -785,13 +787,15 @@ class FileUploader extends Editor<FileUploaderProperties> {
     const $buttonContainer = this._$filesContainer?.find(`.${FILEUPLOADER_BUTTON_CONTAINER_CLASS}`).eq(0);
     const buttonsWidth = getWidth($buttonContainer) * (cancelButtonsCount + uploadButtonsCount);
     const $fileSize = this._$filesContainer?.find(`.${FILEUPLOADER_FILE_SIZE_CLASS}`).eq(0);
+    const $icon = this._$filesContainer?.find(`.${FILEUPLOADER_FILE_ICON_CLASS}`).eq(0);
+    const iconWidth = _showFileIcon ? getOuterWidth($icon) : 0;
 
     const prevFileSize = $fileSize?.text();
     $fileSize?.text('1000 Mb');
     const fileSizeWidth = getWidth($fileSize);
     $fileSize?.text(prevFileSize ?? '');
 
-    this._$filesContainer?.find(`.${FILEUPLOADER_FILE_NAME_CLASS}`).css('maxWidth', filesContainerWidth - buttonsWidth - fileSizeWidth);
+    this._$filesContainer?.find(`.${FILEUPLOADER_FILE_NAME_CLASS}`).css('maxWidth', filesContainerWidth - buttonsWidth - fileSizeWidth - iconWidth);
   }
 
   _renderFileButtons(file: FileUploaderItem, $container: dxElementWrapper): void {
@@ -1745,6 +1749,10 @@ class FileUploader extends Editor<FileUploaderProperties> {
         this._initFileInput();
         super._optionChanged(args);
         break;
+      case 'visible':
+        super._optionChanged(args);
+        this._updateFileNameMaxWidth();
+        break;
       default:
         super._optionChanged(args);
     }