Chat FU: rework styles to make several files showing in a one row

Author: Zedwag

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

@@ -33,6 +33,10 @@
   .dx-fileuploader-wrapper {
     padding: 0;
   }
+
+  .dx-fileuploader-files-container {
+    display: grid;
+  }
 }
 
 .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: 2px 3px 3px 3px;
+      gap: $gap;
+      grid-template-columns: repeat(auto-fit, $chat-file-container-width);
+      min-width: $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/js/__internal/ui/file_uploader/file_uploader.ts

@@ -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 ? getWidth($icon) : 0;
+    debugger;
     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);
     }