Chat - remove avatar for typingIndicator and column gap when avatar i…

…s not shown (#28397)
DevExpress · Nov 20, 2024 · 1a7142e · 1a7142e
1 parent 827ff1b
commit 1a7142e
Show file tree

Hide file tree

Showing 44 changed files with 3 additions and 43 deletions.
diff --git a/.../tests/chat/etalons/Avatar with showAvatar set to false (fluent-blue-light).png b/.../tests/chat/etalons/Avatar with showAvatar set to false (fluent-blue-light).png
diff --git a/...reme/tests/chat/etalons/Avatar with showAvatar set to false (generic-light).png b/...reme/tests/chat/etalons/Avatar with showAvatar set to false (generic-light).png
diff --git a/...ests/chat/etalons/Avatar with showAvatar set to false (material-blue-light).png b/...ests/chat/etalons/Avatar with showAvatar set to false (material-blue-light).png
diff --git a/...extreme/tests/chat/etalons/Typing indicator with 1 user (fluent-blue-light).png b/...extreme/tests/chat/etalons/Typing indicator with 1 user (fluent-blue-light).png
diff --git a/...-devextreme/tests/chat/etalons/Typing indicator with 1 user (generic-light).png b/...-devextreme/tests/chat/etalons/Typing indicator with 1 user (generic-light).png
diff --git a/...treme/tests/chat/etalons/Typing indicator with 1 user (material-blue-light).png b/...treme/tests/chat/etalons/Typing indicator with 1 user (material-blue-light).png
diff --git a/...xtreme/tests/chat/etalons/Typing indicator with 2 users (fluent-blue-light).png b/...xtreme/tests/chat/etalons/Typing indicator with 2 users (fluent-blue-light).png
diff --git a/...devextreme/tests/chat/etalons/Typing indicator with 2 users (generic-light).png b/...devextreme/tests/chat/etalons/Typing indicator with 2 users (generic-light).png
diff --git a/...reme/tests/chat/etalons/Typing indicator with 2 users (material-blue-light).png b/...reme/tests/chat/etalons/Typing indicator with 2 users (material-blue-light).png
diff --git a/...xtreme/tests/chat/etalons/Typing indicator with 3 users (fluent-blue-light).png b/...xtreme/tests/chat/etalons/Typing indicator with 3 users (fluent-blue-light).png
diff --git a/...devextreme/tests/chat/etalons/Typing indicator with 3 users (generic-light).png b/...devextreme/tests/chat/etalons/Typing indicator with 3 users (generic-light).png
diff --git a/...reme/tests/chat/etalons/Typing indicator with 3 users (material-blue-light).png b/...reme/tests/chat/etalons/Typing indicator with 3 users (material-blue-light).png
diff --git a/...xtreme/tests/chat/etalons/Typing indicator with 4 users (fluent-blue-light).png b/...xtreme/tests/chat/etalons/Typing indicator with 4 users (fluent-blue-light).png
diff --git a/...devextreme/tests/chat/etalons/Typing indicator with 4 users (generic-light).png b/...devextreme/tests/chat/etalons/Typing indicator with 4 users (generic-light).png
diff --git a/...reme/tests/chat/etalons/Typing indicator with 4 users (material-blue-light).png b/...reme/tests/chat/etalons/Typing indicator with 4 users (material-blue-light).png
diff --git a/...tests/chat/etalons/Typing indicator with a lot of items (fluent-blue-light).png b/...tests/chat/etalons/Typing indicator with a lot of items (fluent-blue-light).png
diff --git a/...eme/tests/chat/etalons/Typing indicator with a lot of items (generic-light).png b/...eme/tests/chat/etalons/Typing indicator with a lot of items (generic-light).png
diff --git a/...sts/chat/etalons/Typing indicator with a lot of items (material-blue-light).png b/...sts/chat/etalons/Typing indicator with a lot of items (material-blue-light).png
diff --git a/...treme/tests/chat/etalons/Typing indicator with emptyview (fluent-blue-dark).png b/...treme/tests/chat/etalons/Typing indicator with emptyview (fluent-blue-dark).png
diff --git a/...reme/tests/chat/etalons/Typing indicator with emptyview (fluent-blue-light).png b/...reme/tests/chat/etalons/Typing indicator with emptyview (fluent-blue-light).png
diff --git a/...ts/chat/etalons/Typing indicator with emptyview (fluent-blue-light-compact).png b/...ts/chat/etalons/Typing indicator with emptyview (fluent-blue-light-compact).png
diff --git a/...evextreme/tests/chat/etalons/Typing indicator with emptyview (generic-dark).png b/...evextreme/tests/chat/etalons/Typing indicator with emptyview (generic-dark).png
diff --git a/...vextreme/tests/chat/etalons/Typing indicator with emptyview (generic-light).png b/...vextreme/tests/chat/etalons/Typing indicator with emptyview (generic-light).png
diff --git a/.../tests/chat/etalons/Typing indicator with emptyview (generic-light-compact).png b/.../tests/chat/etalons/Typing indicator with emptyview (generic-light-compact).png
diff --git a/...eme/tests/chat/etalons/Typing indicator with emptyview (material-blue-dark).png b/...eme/tests/chat/etalons/Typing indicator with emptyview (material-blue-dark).png
diff --git a/...me/tests/chat/etalons/Typing indicator with emptyview (material-blue-light).png b/...me/tests/chat/etalons/Typing indicator with emptyview (material-blue-light).png
diff --git a/.../chat/etalons/Typing indicator with emptyview (material-blue-light-compact).png b/.../chat/etalons/Typing indicator with emptyview (material-blue-light-compact).png
diff --git a/...reme/tests/chat/etalons/Typing indicator with long name (fluent-blue-light).png b/...reme/tests/chat/etalons/Typing indicator with long name (fluent-blue-light).png
diff --git a/...vextreme/tests/chat/etalons/Typing indicator with long name (generic-light).png b/...vextreme/tests/chat/etalons/Typing indicator with long name (generic-light).png
diff --git a/...me/tests/chat/etalons/Typing indicator with long name (material-blue-light).png b/...me/tests/chat/etalons/Typing indicator with long name (material-blue-light).png
diff --git a/...xtreme/tests/chat/etalons/Typing indicator without name (fluent-blue-light).png b/...xtreme/tests/chat/etalons/Typing indicator without name (fluent-blue-light).png
diff --git a/...devextreme/tests/chat/etalons/Typing indicator without name (generic-light).png b/...devextreme/tests/chat/etalons/Typing indicator without name (generic-light).png
diff --git a/...reme/tests/chat/etalons/Typing indicator without name (material-blue-light).png b/...reme/tests/chat/etalons/Typing indicator without name (material-blue-light).png
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
@@ -22,6 +22,9 @@
 
   .dx-chat-messagegroup-alignment-start {
     grid-template-columns: $messagegroup-start-template;
+  }
+
+  .dx-chat-messagegroup-alignment-start:has(.dx-avatar) {
     column-gap: $messagegroup-start-gap;
   }
 

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss
@@ -2,7 +2,6 @@
   $template,
   $padding,
   $row-gap,
-  $column-gap,
   $font-size,
   $color,
   $bubble-padding-block,
@@ -20,7 +19,6 @@
     grid-template-columns: $template;
     padding-bottom: $padding;
     row-gap: $row-gap;
-    column-gap: $column-gap;
   }
 
   .dx-chat-typingindicator-text {

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -73,7 +73,6 @@
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
   $chat-typingindicator-row-gap,
-  $chat-typingindicator-column-gap,
   $chat-typingindicator-font-size,
   $chat-typingindicator-color,
   $chat-typingindicator-bubble-padding-block,

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -42,7 +42,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
 $chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
-$chat-typingindicator-column-gap: $chat-messagegroup-alignment-start-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
 $chat-typingindicator-bubble-padding-inline: null !default;

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -75,7 +75,6 @@
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
   $chat-typingindicator-row-gap,
-  $chat-typingindicator-column-gap,
   $chat-typingindicator-font-size,
   $chat-typingindicator-color,
   $chat-typingindicator-bubble-padding-block,

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -42,7 +42,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
 $chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
-$chat-typingindicator-column-gap: $chat-messagegroup-alignment-start-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
 $chat-typingindicator-bubble-padding-inline: null !default;

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -74,7 +74,6 @@
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
   $chat-typingindicator-row-gap,
-  $chat-typingindicator-column-gap,
   $chat-typingindicator-font-size,
   $chat-typingindicator-color,
   $chat-typingindicator-bubble-padding-block,

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -40,7 +40,6 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
 $chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
-$chat-typingindicator-column-gap: $chat-messagegroup-alignment-start-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
 $chat-typingindicator-bubble-padding-inline: null !default;

diff --git a/packages/devextreme/js/__internal/ui/chat/typingindicator.ts b/packages/devextreme/js/__internal/ui/chat/typingindicator.ts
@@ -6,8 +6,6 @@ import type { User } from '@js/ui/chat';
 import DOMComponent from '@ts/core/widget/dom_component';
 import type { OptionChanged } from '@ts/core/widget/types';
 
-import Avatar from './avatar';
-
 const CHAT_TYPINGINDICATOR_CLASS = 'dx-chat-typingindicator';
 const CHAT_TYPINGINDICATOR_CONTENT_CLASS = 'dx-chat-typingindicator-content';
 const CHAT_TYPINGINDICATOR_TEXT_CLASS = 'dx-chat-typingindicator-text';
@@ -48,7 +46,6 @@ class TypingIndicator extends DOMComponent<TypingIndicator, Properties> {
 
   _renderContent(): void {
     this._renderContentElement();
-    this._renderAvatar();
     this._renderTextElement();
     this._updateText();
     this._renderBubble();
@@ -60,14 +57,6 @@ class TypingIndicator extends DOMComponent<TypingIndicator, Properties> {
       .appendTo(this.element());
   }
 
-  _renderAvatar(): void {
-    if (this._$content) {
-      const $avatar = $('<div>').appendTo(this._$content);
-
-      this._createComponent($avatar, Avatar, { name: '' });
-    }
-  }
-
   _renderTextElement(): void {
     if (this._$content) {
       this._$text = $('<div>')

diff --git a/.../devextreme/testing/tests/DevExpress.ui.widgets/chatParts/typingIndicator.markup.tests.js b/.../devextreme/testing/tests/DevExpress.ui.widgets/chatParts/typingIndicator.markup.tests.js
@@ -7,8 +7,6 @@ const CHAT_TYPINGINDICATOR_TEXT_CLASS = 'dx-chat-typingindicator-text';
 const CHAT_TYPINGINDICATOR_BUBBLE_CLASS = 'dx-chat-typingindicator-bubble';
 const CHAT_TYPINGINDICATOR_CIRCLE_CLASS = 'dx-chat-typingindicator-circle';
 
-const AVATAR_CLASS = 'dx-avatar';
-
 const moduleConfig = {
     beforeEach: function() {
         const init = (options = {}) => {
@@ -34,12 +32,6 @@ QUnit.module('TypingIndicator', moduleConfig, () => {
     });
 
     QUnit.module('Render', () => {
-        QUnit.test('root element should contain avatar element', function(assert) {
-            const $avatar = this.$element.find(`.${AVATAR_CLASS}`);
-
-            assert.strictEqual($avatar.length, 1);
-        });
-
         QUnit.test('root element should contain text element', function(assert) {
             const $text = this.$element.find(`.${CHAT_TYPINGINDICATOR_TEXT_CLASS}`);
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/typingIndicator.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/typingIndicator.tests.js
@@ -1,27 +1,22 @@
 import $ from 'jquery';
 
 import TypingIndicator from '__internal/ui/chat/typingindicator';
-import Avatar from '__internal/ui/chat/avatar';
 
 const CHAT_TYPINGINDICATOR_TEXT_CLASS = 'dx-chat-typingindicator-text';
 const CHAT_TYPINGINDICATOR_BUBBLE_CLASS = 'dx-chat-typingindicator-bubble';
 const CHAT_TYPINGINDICATOR_CIRCLE_CLASS = 'dx-chat-typingindicator-circle';
 
-const AVATAR_CLASS = 'dx-avatar';
-
 const moduleConfig = {
     beforeEach: function() {
         const init = (options = {}) => {
             this.instance = new TypingIndicator($('#component'), options);
 
             this.$element = $(this.instance.$element());
 
-            this.getAvatarElement = () => this.$element.find(`.${AVATAR_CLASS}`);
             this.getTextElement = () => this.$element.find(`.${CHAT_TYPINGINDICATOR_TEXT_CLASS}`);
             this.getBubbleElement = () => this.$element.find(`.${CHAT_TYPINGINDICATOR_BUBBLE_CLASS}`);
             this.getCircleElement = () => this.$element.find(`.${CHAT_TYPINGINDICATOR_CIRCLE_CLASS}`);
 
-            this.$avatar = this.getAvatarElement();
             this.$text = this.getTextElement();
             this.$bubble = this.getBubbleElement();
             this.$circles = this.getCircleElement();
@@ -38,16 +33,6 @@ const moduleConfig = {
 };
 
 QUnit.module('TypingIndicator', moduleConfig, () => {
-    QUnit.module('Avatar integration', () => {
-        QUnit.test('should have correct name option', function(assert) {
-            this.reinit({ typingUsers: [{}] });
-
-            const avatar = Avatar.getInstance(this.$avatar);
-
-            assert.strictEqual(avatar.option('name'), '');
-        });
-    });
-
     QUnit.module('Render', () => {
         QUnit.test('should be initialized with correct type', function(assert) {
             assert.ok(this.instance instanceof TypingIndicator);
@@ -111,7 +96,6 @@ QUnit.module('TypingIndicator', moduleConfig, () => {
 
                 this.instance.option({ typingUsers: [{ name: 'Alice' }] });
 
-                assert.strictEqual(this.getAvatarElement().length, 1, 'Avatar is rendered');
                 assert.strictEqual(this.getTextElement().length, 1, 'Text is rendered');
                 assert.strictEqual(this.getBubbleElement().length, 1, 'Bubble is rendered');
                 assert.strictEqual(this.getCircleElement().length, 3, 'Circles are rendered');