From 6bb9fb60543e9af789d9496edf5868b907ba32a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Wed, 4 Sep 2024 17:15:46 +0200 Subject: [PATCH] feat(chat): Add text-overflow && Fix button size --- .../base/chat/layout/chat-messagebox/_mixins.scss | 7 +++---- .../base/chat/layout/chat-messagegroup/_index.scss | 8 ++++++++ .../devextreme-scss/scss/widgets/fluent/chat/_index.scss | 3 +-- .../devextreme-scss/scss/widgets/fluent/chat/_sizes.scss | 9 +++------ .../scss/widgets/generic/chat/_index.scss | 3 +-- .../scss/widgets/generic/chat/_sizes.scss | 9 +++------ .../scss/widgets/material/chat/_index.scss | 3 +-- .../scss/widgets/material/chat/_sizes.scss | 9 +++------ 8 files changed, 23 insertions(+), 28 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 index c5948a94e878..bb219b4d283d 100644 --- 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 @@ -4,8 +4,7 @@ $gap, $textarea-min-height, $textarea-border-radius, - $button-height, - $button-width + $button-size ) { .dx-chat-message-box { padding: $padding; @@ -22,8 +21,8 @@ .dx-chat-message-box-button { &.dx-button.dx-button-default { - height: $button-height; - width: $button-width; + height: $button-size; + width: $button-size; } } } 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 index 52c07f32ebc9..f9b86ee7be93 100644 --- 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 @@ -1,3 +1,5 @@ +@use "../../../mixins" as *; + .dx-chat-message-group { display: grid; align-items: start; @@ -6,6 +8,12 @@ .dx-chat-message-group-information { display: flex; grid-row: 1; + max-width: 100%; + min-width: 0; +} + +.dx-chat-message-author-name { + @include dx-overflow(); } .dx-chat-message-group-alignment-start { diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss index 3f64d41d317d..5672ba3f1cf6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss @@ -14,8 +14,7 @@ $chat-messagebox-gap, $chat-messagebox-textarea-min-height, $chat-messagebox-textarea-border-radius, - $chat-messagebox-button-height, - $chat-messagebox-button-width + $chat-messagebox-button-size, ); @include chat-messagebubble( $chat-bubble-padding, diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss index ef7eaee1558c..9ab6cdaedc37 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss @@ -9,8 +9,7 @@ $chat-bubble-container-gap: 4px !default; $chat-messagebox-padding: null !default; $chat-messagebox-textarea-min-height: null !default; $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default; -$chat-messagebox-button-height: null !default; -$chat-messagebox-button-width: null !default; +$chat-messagebox-button-size: null !default; $chat-messagebox-gap: 8px !default; $chat-messagelist-padding: null !default; $chat-messagegroup-gap: 4px !default; @@ -27,8 +26,7 @@ $chat-information-font-size: 12px !default; $chat-bubble-padding: 8px 12px !default; $chat-messagebox-padding: 20px !default; $chat-messagebox-textarea-min-height: 40px !default; - $chat-messagebox-button-height: 40px !default; - $chat-messagebox-button-width: 32px !default; + $chat-messagebox-button-size: 32px !default; $chat-messagelist-padding: 20px !default; $chat-messagelist-gap: 24px !default; } @@ -38,8 +36,7 @@ $chat-information-font-size: 12px !default; $chat-bubble-padding: 6px 8px !default; $chat-messagebox-padding: 16px !default; $chat-messagebox-textarea-min-height: 32px !default; - $chat-messagebox-button-height: 32px !default; - $chat-messagebox-button-width: 24px !default; + $chat-messagebox-button-size: 24px !default; $chat-messagelist-padding: 16px !default; $chat-messagelist-gap: 12px !default; } diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss index 3f64d41d317d..daf44fa247e3 100644 --- a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss @@ -14,8 +14,7 @@ $chat-messagebox-gap, $chat-messagebox-textarea-min-height, $chat-messagebox-textarea-border-radius, - $chat-messagebox-button-height, - $chat-messagebox-button-width + $chat-messagebox-button-size ); @include chat-messagebubble( $chat-bubble-padding, diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss index dd7dd1a6dc62..bb75cee5fec1 100644 --- a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss @@ -8,8 +8,7 @@ $chat-bubble-container-gap: 4px !default; $chat-messagebox-padding: null !default; $chat-messagebox-textarea-min-height: null !default; $chat-messagebox-textarea-border-radius: null !default; -$chat-messagebox-button-height: null !default; -$chat-messagebox-button-width: null !default; +$chat-messagebox-button-size: null !default; $chat-messagebox-gap: 8px !default; $chat-messagelist-padding: null !default; $chat-messagegroup-gap: 4px !default; @@ -27,8 +26,7 @@ $chat-information-font-size: 12px !default; $chat-messagebox-padding: 20px !default; $chat-messagebox-textarea-min-height: 34px !default; $chat-messagebox-textarea-border-radius: 4px !default; - $chat-messagebox-button-height: 34px !default; - $chat-messagebox-button-width: 34px !default; + $chat-messagebox-button-size: 34px !default; $chat-messagelist-padding: 20px !default; $chat-messagelist-gap: 24px !default; } @@ -39,8 +37,7 @@ $chat-information-font-size: 12px !default; $chat-messagebox-padding: 16px !default; $chat-messagebox-textarea-min-height: 28px !default; $chat-messagebox-textarea-border-radius: 4px !default; - $chat-messagebox-button-height: 28px !default; - $chat-messagebox-button-width: 24px !default; + $chat-messagebox-button-size: 24px !default; $chat-messagelist-padding: 16px !default; $chat-messagelist-gap: 12px !default; } diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss index 3f64d41d317d..daf44fa247e3 100644 --- a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss @@ -14,8 +14,7 @@ $chat-messagebox-gap, $chat-messagebox-textarea-min-height, $chat-messagebox-textarea-border-radius, - $chat-messagebox-button-height, - $chat-messagebox-button-width + $chat-messagebox-button-size ); @include chat-messagebubble( $chat-bubble-padding, diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss index e97e83a19f60..e4664e9ff837 100644 --- a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss @@ -8,8 +8,7 @@ $chat-bubble-container-gap: 4px !default; $chat-messagebox-padding: null !default; $chat-messagebox-textarea-min-height: null !default; $chat-messagebox-textarea-border-radius: null !default; -$chat-messagebox-button-height: null !default; -$chat-messagebox-button-width: null !default; +$chat-messagebox-button-size: null !default; $chat-messagebox-gap: 8px !default; $chat-messagelist-padding: null !default; $chat-messagegroup-gap: 4px !default; @@ -27,8 +26,7 @@ $chat-information-font-size: 12px !default; $chat-messagebox-padding: 20px !default; $chat-messagebox-textarea-min-height: 48px !default; $chat-messagebox-textarea-border-radius: 8px !default; - $chat-messagebox-button-height: 48px !default; - $chat-messagebox-button-width: 36px !default; + $chat-messagebox-button-size: 36px !default; $chat-messagelist-padding: 20px !default; $chat-messagelist-gap: 24px !default; } @@ -39,8 +37,7 @@ $chat-information-font-size: 12px !default; $chat-messagebox-padding: 16px !default; $chat-messagebox-textarea-min-height: 32px !default; $chat-messagebox-textarea-border-radius: 4px !default; - $chat-messagebox-button-height: 32px !default; - $chat-messagebox-button-width: 28px !default; + $chat-messagebox-button-size: 28px !default; $chat-messagelist-padding: 16px !default; $chat-messagelist-gap: 12px !default; }