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.

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

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

Merged

Conversation

nickvergessen
Copy link
Member

☑️ Resolves

🖼️ Screenshots

🏚️ Before 🏡 After
Groups show in bold Groups show as mention
At-all shows group icon At-all shows conversation avatar
Chat input shows no icon Chat inpt shows avatar or group icon
grafik Bildschirmfoto vom 2023-04-26 14-00-04

🚧 Tasks

🏁 Checklist

Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
Comment on lines +93 to +96
isDarkTheme() {
return window.getComputedStyle(document.body)
.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
},
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).

Comment on lines +74 to 82
.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)
}
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.

Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

Tested and works fine on @nextcloud/vue@master.

But there are some non-bloking comments above.

image

@nickvergessen nickvergessen merged commit 9ee3bc4 into master May 1, 2023
@nickvergessen nickvergessen deleted the bugfix/9188/conversation-avatar-for-mention-chips branch May 1, 2023 12:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use the conversationIcon component in mentions
3 participants