Skip to content

Commit

Permalink
Chat: get rid of using bubble-first and bubble-last classes for styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@EugeniyKiyashko
EugeniyKiyashko committed Sep 3, 2024
1 parent 531f561 commit d8974f9
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 152 deletions.
86 changes: 35 additions & 51 deletions packages/devextreme-scss/scss/widgets/base/chat/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,48 @@ $chat-text-area-height: 40px;
padding: 24px 0;
}

.dx-chat-message-bubble-container {
display: flex;
flex-direction: column;
row-gap: 4px;
max-width: 90%;
}

.dx-chat-message-group-alignment-start {
justify-items: start;
grid-template-columns: 44px 1fr;
grid-column: 2;

.dx-chat-message-bubble {
border-bottom-left-radius: 0;
border-top-left-radius: 0;

&:first-child {
border-top-left-radius: $chat-bubble-border-radius;
}

&:last-child {
border-bottom-left-radius: $chat-bubble-border-radius;
}
}
}

.dx-chat-message-group-alignment-end {
justify-items: end;

.dx-chat-message-bubble {
background-color: $chat-bubble-background-color-primary;
border-bottom-right-radius: 0;
border-top-right-radius: 0;

&:first-child {
border-top-right-radius: $chat-bubble-border-radius;
}

&:last-child {
border-bottom-right-radius: $chat-bubble-border-radius;
}
}
}

.dx-chat-message-group-information {
Expand Down Expand Up @@ -84,61 +119,10 @@ $chat-text-area-height: 40px;

.dx-chat-message-bubble {
padding: 8px 12px;
max-width: 90%;
border-radius: $chat-bubble-border-radius;
background-color: $chat-bubble-background-color-secondary;
}

.dx-chat-message-group-alignment-start .dx-chat-message-bubble.dx-chat-message-bubble-first {
border-bottom-left-radius: 0;
}

.dx-chat-message-group-alignment-start .dx-chat-message-bubble.dx-chat-message-bubble-last {
border-top-left-radius: 0;
}

.dx-chat-message-group-alignment-start .dx-chat-message-bubble-first.dx-chat-message-bubble-last {
border-bottom-left-radius: $chat-bubble-border-radius;
border-top-left-radius: $chat-bubble-border-radius;
}

.dx-chat-message-group-alignment-start .dx-chat-message-bubble:not(
.dx-chat-message-bubble-first.dx-chat-message-bubble-last,
.dx-chat-message-bubble-first,
.dx-chat-message-bubble-last) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}

.dx-chat-message-group-alignment-end .dx-chat-message-bubble.dx-chat-message-bubble-first {
border-bottom-right-radius: 0;
}

.dx-chat-message-group-alignment-end .dx-chat-message-bubble.dx-chat-message-bubble-last {
border-top-right-radius: 0;
}

.dx-chat-message-group-alignment-end .dx-chat-message-bubble-first.dx-chat-message-bubble-last {
border-bottom-right-radius: $chat-bubble-border-radius;
border-top-right-radius: $chat-bubble-border-radius;
}

.dx-chat-message-group-alignment-end .dx-chat-message-bubble:not(
.dx-chat-message-bubble-first.dx-chat-message-bubble-last,
.dx-chat-message-bubble-first,
.dx-chat-message-bubble-last) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}

.dx-chat-message-group-alignment-start .dx-chat-message-bubble {
grid-column: 2;
}

.dx-chat-message-group-alignment-end .dx-chat-message-bubble {
background-color: $chat-bubble-background-color-primary;
}

.dx-chat-message-box {
display: flex;
align-items: center;
Expand Down
41 changes: 13 additions & 28 deletions packages/devextreme/js/__internal/ui/chat/chat_message_group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ const CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS = 'dx-chat-message-group-alignment-
const CHAT_MESSAGE_GROUP_INFORMATION_CLASS = 'dx-chat-message-group-information';
const CHAT_MESSAGE_TIME_CLASS = 'dx-chat-message-time';
const CHAT_MESSAGE_AUTHOR_NAME_CLASS = 'dx-chat-message-author-name';
const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble';
const CHAT_MESSAGE_BUBBLE_FIRST_CLASS = 'dx-chat-message-bubble-first';
const CHAT_MESSAGE_BUBBLE_LAST_CLASS = 'dx-chat-message-bubble-last';
const CHAT_MESSAGE_BUBBLE_CONTAINER_CLASS = 'dx-chat-message-bubble-container';

export type MessageGroupAlignment = 'start' | 'end';

Expand All @@ -28,6 +26,8 @@ export interface MessageGroupOptions extends WidgetOptions<MessageGroup> {
class MessageGroup extends Widget<MessageGroupOptions> {
_avatar?: Avatar;

_$messageBubbleContainer!: dxElementWrapper;

_getDefaultOptions(): MessageGroupOptions {
return {
...super._getDefaultOptions(),
Expand Down Expand Up @@ -84,31 +84,24 @@ class MessageGroup extends Widget<MessageGroupOptions> {
});
}

_renderMessageBubble(message: Message, index: number, length: number): void {
_renderMessageBubble(message: Message): void {
const $bubble = $('<div>');

const isFirst = index === 0;
const isLast = index === length - 1;

if (isFirst) {
$bubble.addClass(CHAT_MESSAGE_BUBBLE_FIRST_CLASS);
}

if (isLast) {
$bubble.addClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS);
}

$bubble.appendTo(this.element());

this._createComponent($bubble, MessageBubble, {
text: message.text,
});

this._$messageBubbleContainer.append($bubble);
}

_renderMessageBubbles(items: Message[]): void {
items.forEach((message, index) => {
this._renderMessageBubble(message, index, items.length);
this._$messageBubbleContainer = $('<div>').addClass(CHAT_MESSAGE_BUBBLE_CONTAINER_CLASS);

items.forEach((message) => {
this._renderMessageBubble(message);
});

this._$messageBubbleContainer.appendTo(this.element());
}

_renderName(name: string, $element: dxElementWrapper): void {
Expand Down Expand Up @@ -147,13 +140,6 @@ class MessageGroup extends Widget<MessageGroupOptions> {
$information.appendTo(this.element());
}

_updateLastBubbleClasses(): void {
const $bubbles = $(this.element()).find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);
const $lastBubble = $bubbles.eq($bubbles.length - 1);

$lastBubble.removeClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS);
}

_optionChanged(args: Record<string, unknown>): void {
const { name } = args;

Expand All @@ -174,8 +160,7 @@ class MessageGroup extends Widget<MessageGroupOptions> {

this._setOptionWithoutOptionChange('items', newItems);

this._updateLastBubbleClasses();
this._renderMessageBubble(message, newItems.length - 1, newItems.length);
this._renderMessageBubble(message);
}
}

Expand Down
73 changes: 0 additions & 73 deletions ...ges/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ const CHAT_MESSAGE_GROUP_INFORMATION_CLASS = 'dx-chat-message-group-information'
const CHAT_MESSAGE_TIME_CLASS = 'dx-chat-message-time';
const CHAT_MESSAGE_AUTHOR_NAME_CLASS = 'dx-chat-message-author-name';
const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble';
const CHAT_MESSAGE_BUBBLE_FIRST_CLASS = 'dx-chat-message-bubble-first';
const CHAT_MESSAGE_BUBBLE_LAST_CLASS = 'dx-chat-message-bubble-last';

const moduleConfig = {
beforeEach: function() {
Expand Down Expand Up @@ -219,76 +217,5 @@ QUnit.module('MessageGroup', moduleConfig, () => {

assert.strictEqual($messageBubble.length, 4);
});

QUnit.test('single message should have additional classes', function(assert) {
this.reinit({
items: [{}],
});

const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);

assert.strictEqual($messageBubble.length, 1);
assert.strictEqual($messageBubble.hasClass(CHAT_MESSAGE_BUBBLE_FIRST_CLASS), true);
assert.strictEqual($messageBubble.hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), true);
});

QUnit.test('first message bubble should have additional class', function(assert) {
this.reinit({
items: [{}, {}],
});

const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);

assert.strictEqual($messageBubble.eq(0).hasClass(CHAT_MESSAGE_BUBBLE_FIRST_CLASS), true);
assert.strictEqual($messageBubble.eq(0).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), false);
});

QUnit.test('last message bubble should have additional class', function(assert) {
this.reinit({
items: [{}, {}],
});

const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);

assert.strictEqual($messageBubble.eq(1).hasClass(CHAT_MESSAGE_BUBBLE_FIRST_CLASS), false);
assert.strictEqual($messageBubble.eq(1).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), true);
});

QUnit.test('middle message bubbles should not have additional classes', function(assert) {
this.reinit({
items: [{}, {}, {}, {}],
});

const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);

assert.strictEqual($messageBubble.eq(1).hasClass(CHAT_MESSAGE_BUBBLE_FIRST_CLASS), false);
assert.strictEqual($messageBubble.eq(1).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), false);

assert.strictEqual($messageBubble.eq(2).hasClass(CHAT_MESSAGE_BUBBLE_FIRST_CLASS), false);
assert.strictEqual($messageBubble.eq(2).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), false);
});

QUnit.test('last class should be deleted from last bubble after renderMessage', function(assert) {
this.reinit({
items: [{}, {}, {}],
});

let $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);

assert.strictEqual($messageBubble.eq(2).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), true);

const newMessage = {
author: { id: 'MikeID' },
timestamp: Date.now(),
text: 'NEW MESSAGE',
};

this.instance.renderMessage(newMessage);

$messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`);

assert.strictEqual($messageBubble.eq(2).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), false);
assert.strictEqual($messageBubble.eq(3).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), true);
});
});
});

0 comments on commit d8974f9

Please sign in to comment.