Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(chat): Conversation avatar for mention chips #9383

Merged
merged 3 commits into from
May 1, 2023
Merged

fix(chat): Conversation avatar for mention chips #9383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7890767
fix(chat): Use the conversation avatar for mention chips
nickvergessen Apr 26, 2023
e909e4c
fix(chat): Fix missing avatar icon for mention bubbles in chat input
nickvergessen Apr 26, 2023
25ffdcb
fix(chat): Render groups with mention chips
nickvergessen Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions css/icons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,12 @@
* .app-Talk rules above.
* "forced-white" needs to be included in the class name as the Avatar does
* not accept several classes. */
.mention-bubble__icon.icon-group-forced-white,
.tribute-container .icon-group-forced-white {
background-image: url(../img/icon-contacts-white.svg);
}

.mention-bubble__icon.icon-user-forced-white,
.tribute-container .icon-user-forced-white {
background-image: url(../img/icon-user-white.svg)
}
Comment on lines +74 to 82
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: Not a part of this PR

mention-bubble__icon is some internal class from @nextcloud/vue lib and not a part of public API. As this file with libraries overrides became bigger and bigger, I'd think about more safe alternative.

Expand Down
2 changes: 1 addition & 1 deletion src/components/MessagesList/MessagesGroup/Message/Message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,7 +519,7 @@ export default {
Object.keys(this.messageParameters).forEach(function(p) {
const type = this.messageParameters[p].type
const mimetype = this.messageParameters[p].mimetype
if (type === 'user' || type === 'call' || type === 'guest' || type === 'group') {
if (type === 'user' || type === 'call' || type === 'guest' || type === 'user-group' || type === 'group') {
richParameters[p] = {
component: Mention,
props: this.messageParameters[p],
Expand Down
15 changes: 13 additions & 2 deletions src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="mention">
<NcUserBubble v-if="isMentionToAll"
:display-name="name"
:avatar-image="'icon-group-forced-white'"
:avatar-image="avatarUrl"
:primary="true" />
<NcUserBubble v-else-if="isGroupMention"
:display-name="name"
Expand All @@ -41,6 +41,8 @@

<script>

import { generateOcsUrl } from '@nextcloud/router'

import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'

export default {
Expand Down Expand Up @@ -70,7 +72,7 @@ export default {
return this.type === 'call'
},
isGroupMention() {
return this.type === 'group'
return this.type === 'user-group' || this.type === 'group'
},
isMentionToGuest() {
return this.type === 'guest'
Expand All @@ -88,6 +90,15 @@ export default {
return this.$store.getters.getActorType() === 'users'
&& this.id === this.$store.getters.getUserId()
},
isDarkTheme() {
return window.getComputedStyle(document.body)
.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
},
Comment on lines +93 to +96
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: This should not be computed effect

  • It's not computed by design, there is no reactive dependencies in the computing
  • A little bit more memory (it creates Watcher for reactivity and etc here)
  • Each Mention instance creates and compute it's own copy of isDarkTheme

Proposal: make a constant outside of this component (just outside of component definition export default {} in this module or in a some common for reuse).

avatarUrl() {
return generateOcsUrl('apps/spreed/api/v1/room/{token}/avatar' + (this.darkTheme ? '/dark' : ''), {
token: this.id,
})
},
ShGKme marked this conversation as resolved.
Show resolved Hide resolved
},
}
</script>
Expand Down