Chat / Message List Design

Flow
1

Hi Guys,

does anyone manged to get the Messagelist re-disgned so the own messages are on the right and the other messages on the left, like its familar with whats app etc?

Implement Chat for your Flow app | Vaadin

Message List component | Vaadin components

Tried to change it via CSS bud couldn find a working solution, anything blocks it changinge the style

2

Ok did it by myself without using the Components. Using plain Components works :slight_smile:

image
image1083×607 21.5 KB

3

Just out of curiosity, how did you try changing it with css? (Because I should be doable)

4

I have discarded it unfortuanlety. I think some other element prevent it to appear. How should it work? I will try find the css one moment

5

Here is an early version my tries:

public ChatLayout() {
    MessageList list = new MessageList();
    MessageInput input = new MessageInput();
    input.addSubmitListener(submitEvent -> {
        MessageListItem newMessage = new MessageListItem(
                submitEvent.getValue(), Instant.now(), "Milla Sting");
        newMessage.setUserColorIndex(3);
        newMessage.addClassName("my-message"); // Eigene Nachricht rechts
        List<MessageListItem> items = new ArrayList<>(list.getItems());
        items.add(newMessage);
        list.setItems(items);
    });
    input.getStyle().setWidth("100%");

    MessageListItem message1 = new MessageListItem(
            "Nature does not hurry, yet everything gets accomplished.",
            LocalDateTime.now().minusDays(1).toInstant(ZoneOffset.UTC),
            "Matt Mambo");
    message1.setUserColorIndex(1);
    message1.addClassName("other-message"); // Nachricht links

    MessageListItem message2 = new MessageListItem(
            "Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.",
            LocalDateTime.now().minusMinutes(55).toInstant(ZoneOffset.UTC),
            "Linsey Listy", "");
    message2.setUserColorIndex(2);
    message2.addClassName("other-message"); // Nachricht links

    list.setItems(message1, message2);

    VerticalLayout chatLayout = new VerticalLayout(list, input);
    chatLayout.setHeight("500px");
    chatLayout.setWidth("400px");
    chatLayout.expand(list);
    add(chatLayout);
}

vaadin-message-list {
    overflow-y: auto;
    padding: 10px;
    background-color: #f0f0f0;
}

.other-message {
    align-self: flex-start;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    margin: 5px 0;
    max-width: 70%;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.my-message {
    align-self: flex-end;
    background-color: #DCF8C6;
    border-radius: 8px;
    padding: 10px;
    margin: 5px 0;
    max-width: 70%;
    text-align: right;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

vaadin-message-input {
    border-top: 1px solid #ddd;
    padding: 10px;
}
6

Well, the only real problem I see with that code is that align-self cannot have any effect because the list layout is not a flexbox.

So if you do

vaadin-message-list::part(list) {
  display: flex;
  flex-flow: column nowrap;
}

That should make it work.