fix(chat): Fix styles

DevExpress · Sep 5, 2024 · 06b87d2 · 06b87d2
1 parent 17dfb0c
commit 06b87d2
Show file tree

Hide file tree

Showing 16 changed files with 58 additions and 40 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
@@ -18,11 +18,4 @@
       border-radius: $textarea-border-radius;
     }
   }
-
-  .dx-chat-message-box-button {
-    &.dx-button.dx-button-default {
-      height: $button-size;
-      width: $button-size;
-    }
-  }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
@@ -5,7 +5,8 @@
 }
 
 .dx-chat-message-bubble {
-  width: max-content;
+  width: auto;
+  word-break: break-word;
 }
 
 .dx-chat-message-group-alignment-start {

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss
@@ -16,6 +16,10 @@
   @include dx-overflow();
 }
 
+.dx-chat-message-time {
+  white-space: nowrap;
+}
+
 .dx-chat-message-group-alignment-start {
   justify-items: start;
 

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss
@@ -2,17 +2,14 @@
   $messagegroup-gap,
   $messagegroup-start-template,
   $messagegroup-start-gap,
-  $messagegroup-padding-top,
+  $messagegroup-padding-bottom,
   $information-font-size,
   $information-color,
   $information-gap
 ) {
   .dx-chat-message-group {
     row-gap: $messagegroup-gap;
-
-    &:not(&:first-child) {
-      padding-top: $messagegroup-padding-top;
-    }
+    padding-bottom: $messagegroup-padding-bottom;
   }
 
   .dx-chat-message-group-information {

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
@@ -1,9 +1,7 @@
 @mixin chat-messagelist($padding) {
   .dx-chat-message-list {
-    padding: $padding 0;
-
     .dx-scrollable-content {
-      padding: 0 $padding;
+      padding: $padding;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss
@@ -1,5 +1,11 @@
-@mixin chat($background-color) {
+@mixin chat(
+  $background-color,
+  $border-color,
+  $border-radius
+) {
   .dx-chat {
     background-color: $background-color;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -5,6 +5,7 @@
 // adduse
 
 $chat-background-color: $base-bg !default;
+$chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
 $chat-avatar-background-color: null !default;
 $chat-bubble-background-color-primary: null !default;

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -5,7 +5,11 @@
 
 // adduse
 
-@include chat($chat-background-color);
+@include chat(
+  $chat-background-color,
+  $chat-border-color,
+  $chat-border-radius
+);
 @include chat-avatar($chat-avatar-size, $chat-avatar-background-color);
 @include chat-header($chat-header-padding);
 @include chat-messagebox(
@@ -27,7 +31,7 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
-  $chat-messagegroup-padding-top,
+  $chat-messagegroup-padding-bottom,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -3,6 +3,7 @@
 
 // adduse
 
+$chat-border-radius: $base-border-radius * 3 !default; // 12px
 $chat-bubble-border-radius: null !default;
 $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
@@ -13,7 +14,7 @@ $chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
-$chat-messagegroup-padding-top: null !default;
+$chat-messagegroup-padding-bottom: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -27,8 +28,8 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagebox-textarea-min-height: 40px !default;
   $chat-messagebox-button-size: 32px !default;
-  $chat-messagelist-padding: 20px !default;
-  $chat-messagegroup-padding-top: 24px !default;
+  $chat-messagelist-padding: 0 20px !default;
+  $chat-messagegroup-padding-bottom: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -37,6 +38,6 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagebox-textarea-min-height: 32px !default;
   $chat-messagebox-button-size: 24px !default;
-  $chat-messagelist-padding: 16px !default;
-  $chat-messagegroup-padding-top: 12px !default;
+  $chat-messagelist-padding: 0 16px !default;
+  $chat-messagegroup-padding-bottom: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -5,6 +5,7 @@
 // adduse
 
 $chat-background-color: $base-bg !default;
+$chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
 $chat-avatar-background-color: null !default;
 $chat-bubble-background-color-primary: null !default;

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -5,7 +5,11 @@
 
 // adduse
 
-@include chat($chat-background-color);
+@include chat(
+  $chat-background-color,
+  $chat-border-color,
+  $chat-border-radius
+);
 @include chat-avatar($chat-avatar-size, $chat-avatar-background-color);
 @include chat-header($chat-header-padding);
 @include chat-messagebox(
@@ -27,7 +31,7 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
-  $chat-messagegroup-padding-top,
+  $chat-messagegroup-padding-bottom,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -1,7 +1,9 @@
 @use "../sizes" as *;
+@use "../colors" as *;
 
 // adduse
 
+$chat-border-radius: $base-border-radius !default; // 4px
 $chat-bubble-border-radius: null !default;
 $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
@@ -12,7 +14,7 @@ $chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
-$chat-messagegroup-padding-top: null !default;
+$chat-messagegroup-padding-bottom: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -27,8 +29,8 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-min-height: 34px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 34px !default;
-  $chat-messagelist-padding: 20px !default;
-  $chat-messagegroup-padding-top: 24px !default;
+  $chat-messagelist-padding: 0 20px !default;
+  $chat-messagegroup-padding-bottom: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -38,6 +40,6 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-min-height: 28px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 24px !default;
-  $chat-messagelist-padding: 16px !default;
-  $chat-messagegroup-padding-top: 12px !default;
+  $chat-messagelist-padding: 0 16px !default;
+  $chat-messagegroup-padding-bottom: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -5,6 +5,7 @@
 // adduse
 
 $chat-background-color: $base-bg !default;
+$chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
 $chat-avatar-background-color: null !default;
 $chat-bubble-background-color-primary: null !default;
@@ -14,7 +15,7 @@ $chat-information-color: null !default;
 @if $mode == "light" {
   $chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default; // #03A9F414
-  $chat-bubble-background-color-secondary: rgba(darken($base-bg, 100.00), 0.08) !default; // #00000014
+  $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default; // #00000014
   $chat-information-color: rgba(darken($base-bg, 100.00), 0.6) !default; // #0009
 }
 

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -5,7 +5,11 @@
 
 // adduse
 
-@include chat($chat-background-color);
+@include chat(
+  $chat-background-color,
+  $chat-border-color,
+  $chat-border-radius
+);
 @include chat-avatar($chat-avatar-size, $chat-avatar-background-color);
 @include chat-header($chat-header-padding);
 @include chat-messagebox(
@@ -27,7 +31,7 @@
   $chat-messagegroup-gap,
   $chat-messagegroup-alignment-start-template,
   $chat-messagegroup-alignment-start-gap,
-  $chat-messagegroup-padding-top,
+  $chat-messagegroup-padding-bottom,
   $chat-information-font-size,
   $chat-information-color,
   $chat-information-gap

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -2,6 +2,7 @@
 
 // adduse
 
+$chat-border-radius: $base-border-radius * 2 !default; // 8px
 $chat-bubble-border-radius: null !default;
 $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
@@ -12,7 +13,7 @@ $chat-messagebox-button-size: null !default;
 $chat-messagebox-gap: 8px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
-$chat-messagegroup-padding-top: null !default;
+$chat-messagegroup-padding-bottom: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $chat-messagegroup-alignment-start-template: auto 1fr !default;
@@ -27,8 +28,8 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-min-height: 48px !default;
   $chat-messagebox-textarea-border-radius: 8px !default;
   $chat-messagebox-button-size: 36px !default;
-  $chat-messagelist-padding: 20px !default;
-  $chat-messagegroup-padding-top: 24px !default;
+  $chat-messagelist-padding: 0 20px !default;
+  $chat-messagegroup-padding-bottom: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -38,6 +39,6 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-textarea-min-height: 32px !default;
   $chat-messagebox-textarea-border-radius: 4px !default;
   $chat-messagebox-button-size: 28px !default;
-  $chat-messagelist-padding: 16px !default;
-  $chat-messagegroup-padding-top: 12px !default;
+  $chat-messagelist-padding: 0 16px !default;
+  $chat-messagegroup-padding-bottom: 12px !default;
 }
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -78,7 +78,7 @@ class Chat extends Widget<Properties> {
     const currentUserId = user?.id;
     const $messageList = $('<div>');
 
-    this.element().prepend($messageList.get(0));
+    this.$element().prepend($messageList);
 
     this._messageList = this._createComponent($messageList, MessageList, {
       items,