Closed juuso-vaadin closed 3 years ago
The same feature could also be used to distinguish “system messages” from messages from end users.
Agreed. I think this could be called something like "source" or "origin". We should still separate "me" and "system" so that they can be handled separately, as both can have separate visuals and separate features (delete, edit..)
Thoughts on how this could be implemented. Names can be debated:
I can write the CSS for that on Wednesday.
Semi-related: we have a PR for 'system' messages here:
Just CSS though.
My initial thought was to add support for setting a theme
attribute value for individual message components. Basically the same as what Jens suggested, but avoiding a new concept of “origin”.
And apparently Jonte had a similar idea, since me already wrote the CSS like that.
We're indeed planning to implement this with the theme variant mechanism, which enables users to provide also custom attributes for custom theming per message. One challenge there is that the Flow's HasTheme
interface can't be applied for the non-component MessageListItem
class. We'll just add some of the HasTheme
API to MessageListItem
and live with the fact that it's not fully compatible with the Flow component theme APIs.
The theme variant for own messages would be called outbound
.
Steps:
<vaadin-message-list>
: messageList.items = [{text: "Hello", theme: "outbound foo bar"}]
. The theme will be simply propagated to the message element: <vaadin-message theme="outbound foo bar">
.addThemeNames
and removeThemeNames
in MessageListItem
, copied from HasTheme
interface.addThemeNames("outbound")
when generating the message item that is sent by the local user.At this point the developers can target own messages for styling.
MessageListItem
instead of limiting to the theme variant case. E.g. to disable the default outbound variant and add a custom inbound variant:
collaborationMessageList.setMessageConfigurator((item, user) -> {
item.removeThemeNames("outbound");
if (!user.equals(localUser)) {
item.addThemeNames("inbound");
}
});
outbound
theme for Lumo and Material (and potentially other variants like filled
), add type-safe Flow theme variant APIs such as item.addThemeVariants(MessageVariant.LUMO_OUTBOUND)
.We concluded with @anezthes that we should not set any theme variant to own messages by default. Highlighting your own messages looks good only with a theme that has "bubbles" around the content, like in the screenshot in this ticket. Our message components are similar to Slack and Discord, where there's also no highlight for own messages.
Any custom theme variant can still be added to own messages with the new message configurator API:
collaborationMessageList.setMessageConfigurator((message, user) -> {
if (user.equals(localUser)) {
message.addThemeNames("outbound");
}
});
The issue is resolved with the following PRs:
I opened a new ticket for providing Lumo theme variants out of the box: https://github.com/vaadin/web-components/issues/1994
Is your feature request related to a use case? Please describe. In vaadin-message-list, I would like to be able to style my own messages to be different from other messages.
Describe the solution you'd like There should be an easy way to apply custom styling to certain messages. This could be done by introducing an attribute to vaadin-message.
Additional context