Chat: implement empty list view with design (#28009)

DevExpress · Sep 10, 2024 · 5c86f71 · 5c86f71
1 parent 2df3c50
commit 5c86f71
Show file tree

Hide file tree

Showing 14 changed files with 378 additions and 22 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss
@@ -1,3 +1,5 @@
+@use "../../../icons" as *;
+
 .dx-chat-message-list {
   flex-grow: 1;
   overflow: hidden;
@@ -7,3 +9,20 @@
     flex-direction: column;
   }
 }
+
+.dx-chat-message-list-empty {
+  .dx-chat-empty-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+  }
+
+  .dx-chat-empty-image {
+    @include dx-icon(chat);
+
+    border-radius: 999em;
+  }
+}
+
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,7 +1,49 @@
+@use "sass:math";
+
 @mixin chat-messagelist($padding) {
   .dx-chat-message-list {
     .dx-scrollable-content {
       padding: $padding;
     }
   }
 }
+
+@mixin chat-messagelist-empty(
+  $messagelist-empty-icon-box-size,
+  $messagelist-empty-icon-size,
+  $messagelist-empty-icon-margin-bottom,
+  $messagelist-empty-row-gap,
+  $messagelist-empty-icon-color,
+  $messagelist-empty-icon-background-color,
+  $messagelist-empty-message-font-size,
+  $messagelist-empty-message-color,
+  $messagelist-empty-prompt-font-size,
+  $messagelist-empty-prompt-color,
+) {
+  .dx-chat-message-list-empty {
+    .dx-chat-empty-view {
+      row-gap: $messagelist-empty-row-gap;
+    }
+
+    .dx-chat-empty-image {
+      color: $messagelist-empty-icon-color;
+      background-color: $messagelist-empty-icon-background-color;
+      padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2);
+      margin-bottom: $messagelist-empty-icon-margin-bottom;
+
+      &::before {
+        font-size: $messagelist-empty-icon-size;
+      }
+    }
+
+    .dx-chat-empty-message {
+      font-size: $messagelist-empty-message-font-size;
+      color: $messagelist-empty-message-color;
+    }
+
+    .dx-chat-empty-prompt {
+      font-size: $messagelist-empty-prompt-font-size;
+      color: $messagelist-empty-prompt-color;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -12,16 +12,29 @@ $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
+$chat-messagelist-empty-icon-color: null !default;
+$chat-messagelist-empty-icon-background-color: null !default;
+$chat-messagelist-empty-message-color: $base-text-color !default;
+$chat-messagelist-empty-prompt-color: null !default;
+
 @if $mode == "light" {
   $chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
   $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default; // #EBF3FC
   $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default; // #F5F5F5
   $chat-information-color: darken($base-bg, 56.08) !default; // #707070
+
+  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default; // #B3B3B3
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default; // #F5F5F5
+  $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default; // #616161
 }
 
 @else if $mode == "dark" {
   $chat-avatar-background-color: lighten($base-bg, 16.08) !default; // #525252
   $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default; // #082338
   $chat-bubble-background-color-secondary: lighten($base-bg, 7.84) !default; // #3D3D3D
   $chat-information-color: lighten($base-bg, 43.92) !default; // #999
+
+  $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default; // #6B6B6B
+  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3D3D3D
+  $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default; // #ADADAD
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -35,4 +35,16 @@
   $chat-information-color,
   $chat-information-gap
 );
+@include chat-messagelist-empty(
+  $chat-messagelist-empty-icon-box-size,
+  $chat-messagelist-empty-icon-size,
+  $chat-messagelist-empty-icon-margin-bottom,
+  $chat-messagelist-empty-row-gap,
+  $chat-messagelist-empty-icon-color,
+  $chat-messagelist-empty-icon-background-color,
+  $chat-messagelist-empty-message-font-size,
+  $chat-messagelist-empty-message-color,
+  $chat-messagelist-empty-prompt-font-size,
+  $chat-messagelist-empty-prompt-color,
+);
 @include chat-messagelist($chat-messagelist-padding);
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -21,12 +21,26 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
 
+$chat-messagelist-empty-icon-box-size: null !default;
+$chat-messagelist-empty-icon-size: null !default;
+$chat-messagelist-empty-icon-margin-bottom: null !default;
+$chat-messagelist-empty-row-gap: null !default;
+$chat-messagelist-empty-message-font-size: null !default;
+$chat-messagelist-empty-prompt-font-size: null !default;
+
 @if $size == "default" {
   $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;
   $chat-bubble-padding: 8px 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagelist-padding: 0 20px !default;
   $chat-messagegroup-padding: 24px !default;
+
+  $chat-messagelist-empty-icon-box-size: 64px !default;;
+  $chat-messagelist-empty-icon-size: 40px !default;
+  $chat-messagelist-empty-icon-margin-bottom: 12px !default;
+  $chat-messagelist-empty-row-gap: 4px !default;
+  $chat-messagelist-empty-message-font-size: 18px !default;
+  $chat-messagelist-empty-prompt-font-size: 14px !default;
 }
 
 @else if $size == "compact" {
@@ -35,4 +49,11 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagelist-padding: 0 16px !default;
   $chat-messagegroup-padding: 12px !default;
+
+  $chat-messagelist-empty-icon-box-size: 48px !default;;
+  $chat-messagelist-empty-icon-size: 32px !default;
+  $chat-messagelist-empty-icon-margin-bottom: 14px !default;
+  $chat-messagelist-empty-row-gap: 2px !default;
+  $chat-messagelist-empty-message-font-size: 14px !default;
+  $chat-messagelist-empty-prompt-font-size: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -12,16 +12,31 @@ $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
+$chat-messagelist-empty-icon-color: null !default;
+$chat-messagelist-empty-icon-background-color: null !default;
+$chat-messagelist-empty-message-color: null !default;
+$chat-messagelist-empty-prompt-color: null !default;
+
 @if $color == "light" {
   $chat-avatar-background-color: darken($base-bg, 13.33) !default; // #DDDDDD
   $chat-bubble-background-color-primary: rgba(darken(saturate($base-accent, 0.32), 5.10), 0.1) !default; // #2D6DA31A
   $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default; // #F5F5F5
   $chat-information-color: darken($base-bg, 41.57) !default; // #959595
+
+  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 46.67) !default; // #AAAAAA
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; // #EBEBEB 
+  $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default; // #222222
+  $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default; // #959595
 }
 
 @else if $color == "dark" {
   $chat-avatar-background-color: lighten($base-bg, 13.73) !default; // #4D4D4D
   $chat-bubble-background-color-primary: rgba(darken(saturate($base-accent, 0.07), 5.10), 0.1) !default; // #1997C61A
   $chat-bubble-background-color-secondary: lighten($base-bg, 3.92) !default; // #343434
   $chat-information-color: lighten($base-bg, 32.55) !default; // #7D7D7D
+
+  $chat-messagelist-empty-icon-color: darken(#dedede, 37.25) !default; // #7F7F7F
+  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3E3E3E
+  $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default; // #FFFFFF
+  $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default; // #7D7D7D
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -35,4 +35,16 @@
   $chat-information-color,
   $chat-information-gap
 );
+@include chat-messagelist-empty(
+  $chat-messagelist-empty-icon-box-size,
+  $chat-messagelist-empty-icon-size,
+  $chat-messagelist-empty-icon-margin-bottom,
+  $chat-messagelist-empty-row-gap,
+  $chat-messagelist-empty-icon-color,
+  $chat-messagelist-empty-icon-background-color,
+  $chat-messagelist-empty-message-font-size,
+  $chat-messagelist-empty-message-color,
+  $chat-messagelist-empty-prompt-font-size,
+  $chat-messagelist-empty-prompt-color,
+);
 @include chat-messagelist($chat-messagelist-padding);
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -22,16 +22,37 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
 
+$chat-messagelist-empty-icon-box-size: null !default;
+$chat-messagelist-empty-icon-size: null !default;
+$chat-messagelist-empty-icon-margin-bottom: null !default;
+$chat-messagelist-empty-row-gap: null !default;
+$chat-messagelist-empty-message-font-size: null !default;
+$chat-messagelist-empty-prompt-font-size: null !default;
+
 @if $size == "default" {
   $chat-bubble-padding: 8px 12px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagelist-padding: 0 20px !default;
   $chat-messagegroup-padding: 24px !default;
+
+  $chat-messagelist-empty-icon-box-size: 64px !default;;
+  $chat-messagelist-empty-icon-size: 40px !default;
+  $chat-messagelist-empty-icon-margin-bottom: 12px !default;
+  $chat-messagelist-empty-row-gap: 4px !default;
+  $chat-messagelist-empty-message-font-size: 18px !default;
+  $chat-messagelist-empty-prompt-font-size: 14px !default;
 }
 
 @else if $size == "compact" {
   $chat-bubble-padding: 6px 8px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagelist-padding: 0 16px !default;
   $chat-messagegroup-padding: 12px !default;
+
+  $chat-messagelist-empty-icon-box-size: 48px !default;;
+  $chat-messagelist-empty-icon-size: 32px !default;
+  $chat-messagelist-empty-icon-margin-bottom: 14px !default;
+  $chat-messagelist-empty-row-gap: 2px !default;
+  $chat-messagelist-empty-message-font-size: 14px !default;
+  $chat-messagelist-empty-prompt-font-size: 12px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -12,6 +12,11 @@ $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
+$chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
+$chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
+$chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
+$chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !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

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -35,4 +35,16 @@
   $chat-information-color,
   $chat-information-gap
 );
+@include chat-messagelist-empty(
+  $chat-messagelist-empty-icon-box-size,
+  $chat-messagelist-empty-icon-size,
+  $chat-messagelist-empty-icon-margin-bottom,
+  $chat-messagelist-empty-row-gap,
+  $chat-messagelist-empty-icon-color,
+  $chat-messagelist-empty-icon-background-color,
+  $chat-messagelist-empty-message-font-size,
+  $chat-messagelist-empty-message-color,
+  $chat-messagelist-empty-prompt-font-size,
+  $chat-messagelist-empty-prompt-color,
+);
 @include chat-messagelist($chat-messagelist-padding);
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -20,13 +20,27 @@ $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
 
+$chat-messagelist-empty-icon-box-size: null !default;
+$chat-messagelist-empty-icon-size: null !default;
+$chat-messagelist-empty-icon-margin-bottom: null !default;
+$chat-messagelist-empty-row-gap: null !default;
+$chat-messagelist-empty-message-font-size: null !default;
+$chat-messagelist-empty-prompt-font-size: null !default;
+
 @if $size == "default" {
   $chat-messagebox-buton-gap: 10px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 8px 16px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagelist-padding: 0 20px !default;
   $chat-messagegroup-padding: 24px !default;
+
+  $chat-messagelist-empty-icon-box-size: 64px !default;;
+  $chat-messagelist-empty-icon-size: 40px !default;
+  $chat-messagelist-empty-icon-margin-bottom: 12px !default;
+  $chat-messagelist-empty-row-gap: 4px !default;
+  $chat-messagelist-empty-message-font-size: 18px !default;
+  $chat-messagelist-empty-prompt-font-size: 14px !default;
 }
 
 @else if $size == "compact" {
@@ -36,4 +50,11 @@ $chat-information-font-size: 12px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagelist-padding: 0 16px !default;
   $chat-messagegroup-padding: 12px !default;
+
+  $chat-messagelist-empty-icon-box-size: 48px !default;;
+  $chat-messagelist-empty-icon-size: 32px !default;
+  $chat-messagelist-empty-icon-margin-bottom: 14px !default;
+  $chat-messagelist-empty-row-gap: 2px !default;
+  $chat-messagelist-empty-message-font-size: 14px !default;
+  $chat-messagelist-empty-prompt-font-size: 12px !default;
 }