Skip to content

Commit

Permalink
Merge pull request #10345 from nextcloud/backport/10336/stable27
Browse files Browse the repository at this point in the history 
[stable27] fix(MessagesGroup) move date separator to the parent component level
  • Loading branch information
@nickvergessen
nickvergessen authored Aug 24, 2023
2 parents 7ca950b + 53d67e5 commit 50d6b3b
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 145 deletions.
7 changes: 1 addition & 6 deletions src/components/MessagesList/MessagesGroup/Message/Message.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ the main body of the message as well as a quote.
:data-next-message-id="nextMessageId"
:data-previous-message-id="previousMessageId"
class="message"
:class="{'message__last': isLastMessage,
'message--highlighted': isHighlighted}"
:class="{'message--highlighted': isHighlighted}"
tabindex="0"
@animationend="isHighlighted = false"
@mouseover="handleMouseover"
Expand Down Expand Up @@ -884,10 +883,6 @@ export default {
.message {
position: relative;

&__last {
margin-bottom: 12px;
}

&:hover .normal-message-body,
&:hover .combined-system {
border-radius: 8px;
Expand Down
15 changes: 1 addition & 14 deletions src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ describe('MessagesGroup.vue', () => {
propsData: {
id: 123,
token: TOKEN,
dateSeparator: '<date separator>',
previousMessageId: 90,
nextMessageId: 200,
messages: [{
Expand Down Expand Up @@ -80,9 +79,6 @@ describe('MessagesGroup.vue', () => {
},
})

const dateEl = wrapper.find('.message-group__date-header')
expect(dateEl.text()).toBe('<date separator>')

const avatarEl = wrapper.findComponent({ name: 'AuthorAvatar' })
expect(avatarEl.attributes('authortype')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
expect(avatarEl.attributes('authorid')).toBe('actor-1')
Expand Down Expand Up @@ -150,21 +146,17 @@ describe('MessagesGroup.vue', () => {
propsData: {
id: 123,
token: TOKEN,
dateSeparator: '<date separator>',
previousMessageId: 90,
nextMessageId: 200,
messages: MESSAGES,
},
})

const dateEl = wrapper.find('.message-group__date-header')
expect(dateEl.text()).toBe('<date separator>')

const avatarEl = wrapper.findComponent({ name: 'AuthorAvatar' })
expect(avatarEl.exists()).toBe(false)

const messagesEl = wrapper.findAllComponents({ name: 'Message' })
// TODO: date separator

let message = messagesEl.at(0)
expect(message.props('id')).toBe(MESSAGES[0].id)
expect(message.props('message')).toBe(MESSAGES[0].message)
Expand Down Expand Up @@ -194,7 +186,6 @@ describe('MessagesGroup.vue', () => {
propsData: {
id: 123,
token: TOKEN,
dateSeparator: '<date separator>',
previousMessageId: 90,
nextMessageId: 200,
messages: [{
Expand Down Expand Up @@ -225,9 +216,6 @@ describe('MessagesGroup.vue', () => {
},
})

const dateEl = wrapper.find('.message-group__date-header')
expect(dateEl.text()).toBe('<date separator>')

const avatarEl = wrapper.findComponent({ name: 'AuthorAvatar' })
expect(avatarEl.attributes('authortype')).toBe(ATTENDEE.ACTOR_TYPE.GUESTS)
expect(avatarEl.attributes('authorid')).toBe('actor-1')
Expand Down Expand Up @@ -255,7 +243,6 @@ describe('MessagesGroup.vue', () => {
propsData: {
id: 123,
token: TOKEN,
dateSeparator: '<date separator>',
previousMessageId: 90,
nextMessageId: 200,
messages: [{
Expand Down
72 changes: 19 additions & 53 deletions src/components/MessagesList/MessagesGroup/MessagesGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,26 @@
-->

<template>
<div class="message-group">
<div v-if="dateSeparator"
class="message-group__date-header">
<span class="date"
role="heading"
aria-level="3">{{ dateSeparator }}</span>
</div>
<div class="wrapper">
<div class="messages__avatar">
<AuthorAvatar :author-type="actorType"
:author-id="actorId"
:display-name="actorDisplayName" />
</div>
<ul class="messages">
<li class="messages__author" aria-level="4">
{{ actorDisplayName }}
</li>
<Message v-for="(message, index) of messages"
:key="message.id"
ref="message"
v-bind="message"
:is-temporary="message.timestamp === 0"
:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
:previous-message-id="(index > 0 && messages[index - 1].id) || previousMessageId"
:actor-type="actorType"
:actor-id="actorId" />
</ul>
<div class="wrapper">
<div class="messages__avatar">
<AuthorAvatar :author-type="actorType"
:author-id="actorId"
:display-name="actorDisplayName" />
</div>
<ul class="messages">
<li class="messages__author" aria-level="4">
{{ actorDisplayName }}
</li>
<Message v-for="(message, index) of messages"
:key="message.id"
ref="message"
v-bind="message"
:is-temporary="message.timestamp === 0"
:next-message-id="(messages[index + 1] && messages[index + 1].id) || nextMessageId"
:previous-message-id="(index > 0 && messages[index - 1].id) || previousMessageId"
:actor-type="actorType"
:actor-id="actorId" />
</ul>
</div>
</template>

Expand Down Expand Up @@ -81,13 +73,6 @@ export default {
type: Array,
required: true,
},
/**
* The message date separator.
*/
dateSeparator: {
type: String,
required: true,
},

previousMessageId: {
type: [String, Number],
Expand Down Expand Up @@ -155,25 +140,6 @@ export default {
<style lang="scss" scoped>
@import '../../../assets/variables';

.message-group {
&__date-header {
display: block;
text-align: center;
padding-top: 20px;
position: relative;
margin: 20px 0;
.date {
margin-right: $clickable-area * 2;
content: attr(data-date);
padding: 4px 12px;
left: 50%;
color: var(--color-text-maxcontrast);
background-color: var(--color-background-dark);
border-radius: var(--border-radius-pill);
}
}
}

.wrapper {
max-width: $messages-list-max-width;
display: flex;
Expand Down
84 changes: 25 additions & 59 deletions src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,36 +20,28 @@
-->

<template>
<div class="message-group">
<div v-if="dateSeparator"
class="message-group__date-header">
<span class="date"
role="heading"
aria-level="3">{{ dateSeparator }}</span>
</div>
<div class="wrapper wrapper--system">
<div v-for="messagesCollapsed in messagesGroupedBySystemMessage"
:key="messagesCollapsed.id"
class="message-group__system">
<ul v-if="messagesCollapsed.messages?.length > 1"
class="messages messages--header">
<Message v-bind="createCombinedSystemMessage(messagesCollapsed)"
is-combined-system-message
:is-combined-system-message-collapsed="messagesCollapsed.collapsed"
:next-message-id="getNextMessageId(messagesCollapsed.messages.at(-1))"
:previous-message-id="getPrevMessageId(messagesCollapsed.messages.at(0))"
@toggle-combined-system-message="toggleCollapsed(messagesCollapsed)" />
</ul>
<ul v-show="messagesCollapsed.messages?.length === 1 || !messagesCollapsed.collapsed"
class="messages"
:class="{'messages--collapsed': messagesCollapsed.messages?.length > 1}">
<Message v-for="message in messagesCollapsed.messages"
:key="message.id"
v-bind="message"
:next-message-id="getNextMessageId(message)"
:previous-message-id="getPrevMessageId(message)" />
</ul>
</div>
<div class="wrapper wrapper--system">
<div v-for="messagesCollapsed in messagesGroupedBySystemMessage"
:key="messagesCollapsed.id"
class="messages-group__system">
<ul v-if="messagesCollapsed.messages?.length > 1"
class="messages messages--header">
<Message v-bind="createCombinedSystemMessage(messagesCollapsed)"
is-combined-system-message
:is-combined-system-message-collapsed="messagesCollapsed.collapsed"
:next-message-id="getNextMessageId(messagesCollapsed.messages.at(-1))"
:previous-message-id="getPrevMessageId(messagesCollapsed.messages.at(0))"
@toggle-combined-system-message="toggleCollapsed(messagesCollapsed)" />
</ul>
<ul v-show="messagesCollapsed.messages?.length === 1 || !messagesCollapsed.collapsed"
class="messages"
:class="{'messages--collapsed': messagesCollapsed.messages?.length > 1}">
<Message v-for="message in messagesCollapsed.messages"
:key="message.id"
v-bind="message"
:next-message-id="getNextMessageId(message)"
:previous-message-id="getPrevMessageId(message)" />
</ul>
</div>
</div>
</template>
Expand Down Expand Up @@ -99,13 +91,6 @@ export default {
type: Array,
required: true,
},
/**
* The message date separator.
*/
dateSeparator: {
type: String,
required: true,
},

previousMessageId: {
type: [String, Number],
Expand Down Expand Up @@ -282,28 +267,9 @@ export default {
<style lang="scss" scoped>
@import '../../../assets/variables';

.message-group {
&__date-header {
display: block;
text-align: center;
padding-top: 20px;
position: relative;
margin: 20px 0;
.date {
margin-right: $clickable-area * 2;
content: attr(data-date);
padding: 4px 12px;
left: 50%;
color: var(--color-text-maxcontrast);
background-color: var(--color-background-dark);
border-radius: var(--border-radius-pill);
}
}

&__system {
display: flex;
flex-direction: column;
}
.messages-group__system {
display: flex;
flex-direction: column;
}

.wrapper {
Expand Down
9 changes: 6 additions & 3 deletions src/components/MessagesList/MessagesList.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,19 +215,22 @@ describe('MessagesList.vue', () => {
// using attributes to access v-bind props
expect(group.attributes('actorid')).toBe('alice')
expect(group.attributes('actortype')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
expect(group.attributes('dateseparator')).toBe('2 days ago, May 9, 2020')

group = groups.at(1)
expect(group.props('messages')).toStrictEqual([messages[1]])
expect(group.attributes('actorid')).toBe('alice')
expect(group.attributes('actortype')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
expect(group.attributes('dateseparator')).toBe('Yesterday, May 10, 2020')

group = groups.at(2)
expect(group.props('messages')).toStrictEqual([messages[2]])
expect(group.attributes('actorid')).toBe('alice')
expect(group.attributes('actortype')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
expect(group.attributes('dateseparator')).toBe('Today, May 11, 2020')

const dateSeparators = wrapper.findAll('.messages-group__date')
expect(dateSeparators).toHaveLength(3)
expect(dateSeparators.at(0).text()).toBe('2 days ago, May 9, 2020')
expect(dateSeparators.at(1).text()).toBe('Yesterday, May 10, 2020')
expect(dateSeparators.at(2).text()).toBe('Today, May 11, 2020')

expect(messagesListMock).toHaveBeenCalledWith(TOKEN)
})
Expand Down
51 changes: 41 additions & 10 deletions src/components/MessagesList/MessagesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,24 @@ get the messagesList array and loop through the list to generate the messages.
:class="{'scroller--chatScrolledToBottom': isChatScrolledToBottom}"
@scroll="debounceHandleScroll">
<div v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
<component :is="messagesGroupComponent(item)"
v-for="item of messagesGroupedByAuthor"
:key="item.id"
ref="messagesGroup"
v-bind="item.messages"
:token="token"
:messages="item.messages"
:date-separator="item.dateSeparator"
:previous-message-id="item.previousMessageId"
:next-message-id="item.nextMessageId" />

<template v-for="item of messagesGroupedByAuthor">
<div v-if="item.dateSeparator" :key="`date_${item.id}`" class="messages-group__date">
<span class="messages-group__date-text" role="heading" aria-level="3">
{{ item.dateSeparator }}
</span>
</div>
<component :is="messagesGroupComponent(item)"
:key="item.id"
ref="messagesGroup"
class="messages-group"
v-bind="item.messages"
:token="token"
:messages="item.messages"
:previous-message-id="item.previousMessageId"
:next-message-id="item.nextMessageId" />
</template>

<template v-if="showLoadingAnimation">
<LoadingPlaceholder type="messages"
:count="15" />
Expand Down Expand Up @@ -1155,4 +1163,27 @@ export default {
}
}

.messages-group {
&__date {
display: block;
text-align: center;
padding-top: 20px;
position: relative;
margin: 20px 0;
}

&__date-text {
margin-right: $clickable-area * 2;
content: attr(data-date);
padding: 4px 12px;
left: 50%;
color: var(--color-text-maxcontrast);
background-color: var(--color-background-dark);
border-radius: var(--border-radius-pill);
}

&:last-child {
margin-bottom: 16px;
}
}
</style>

0 comments on commit 50d6b3b

Please sign in to comment.