TW-1902 update chat list item ui (Part 2)

[KhaledNjim]

Ticket

https://github.com/linagora/twake-on-matrix/issues/1902

Figma

Impact description

chat list items design updated

Test recommendations

test on all supported platforms with different sized screens

Resolved

-Web:

https://github.com/user-attachments/assets/b09910bf-b906-4cbe-8f64-94232c80f9d2

• Android:

• IOS:

[github-actions[bot]]

This PR has been deployed to https://linagora.github.io/twake-on-matrix/1949

[sherlockvn]

For preview image in chat list latest message, you have to create a function like the function calcLocalizedBody and modify it in the file chat_list_item_subtitle.dart because the function calcLocalizedBody is used in many places. the thumbnail of image and its information you can easily created from MxcImage. and be careful because it has many kind of events in matrix.

[sherlockvn]

If you want a pair. please ping me

[Te-Z]

We should have the @ icon when the user is tagged in a room

[Te-Z]

I think there's too much space between items compared to the design (screenshot from web, but please check on mobile also)

[sherlockvn]

it works well in iOS device, one small thing, can you make the splash full item or at least make it center ? it looks better IMO

https://github.com/user-attachments/assets/cce1d3d8-fa55-4f0a-8fd3-856aeca82d0e

[sherlockvn]

it works well in iOS device, one small thing, can you make the splash full item or at least make it center ? it looks better IMO

RPReplay_Final1724405603.MP4

@KhaledNjim, can you do this one, also video preview the design has been updated, you can do it in the part III i think

https://www.figma.com/design/uLw3iWnOEGaRlJnfPz4Pv0/Twake-%5BMatrix%5D?node-id=27307-2606&t=dkheZEAJVIB3yuyz-4

[sherlockvn]

i run it in my device, but the avatar is not synchronized

[KhaledNjim]

i run it in my device, but the avatar is not synchronized

i cant reproduce this can you provide more infos

[sherlockvn]

i run it in my device, but the avatar is not synchronized

i cant reproduce this can you provide more infos

i have multiple accounts, and when i terminated my app, reopen it again, you will see

https://github.com/user-attachments/assets/7b65d704-2c18-4196-ad9a-7af65c7cb1e8

[KhaledNjim]

it works well in iOS device, one small thing, can you make the splash full item or at least make it center ? it looks better IMO

RPReplay_Final1724405603.MP4

splashFix.webm

[KhaledNjim]

it works well in iOS device, one small thing, can you make the splash full item or at least make it center ? it looks better IMO RPReplay_Final1724405603.MP4

@KhaledNjim, can you do this one, also video preview the design has been updated, you can do it in the part III i think

https://www.figma.com/design/uLw3iWnOEGaRlJnfPz4Pv0/Twake-%5BMatrix%5D?node-id=27307-2606&t=dkheZEAJVIB3yuyz-4

i added video preview

[hoangdat]

• [x] after app terminated, account's avatar in the bottom bar is wrong

[KhaledNjim]

• [x] after app terminated, account's avatar in the bottom bar is wrong

Fixed

bottomAvatarSync.webm

[nqhhdev]

Design:

Your code:

• padding only 8px for weight and height

[hoangdat]

• [x] please show me screenshot in Chat screen

[KhaledNjim]

• [ ] please show me screenshot in Chat screen

mobile

Web

[KhaledNjim]

Design:

Your code:

• padding only 8px for weight and height

In the example, the item is centered because it only has two lines. For long messages or group chats, it has 8px padding.

Design

Code

[nqhhdev]

In the example, the item is centered because it only has two lines. For long messages or group chats, it has 8px padding.

Hi @KhaledNjim, The padding is huge, think about it. Can you align it to the Avatar?

[nqhhdev]

One more: In main branch updated flutter version is 3.24.0 so pls update your branch

[nqhhdev]

When I'm using to hover in chat list item, UI/UX is pretty bad because of the huge white space!

https://github.com/user-attachments/assets/05f33148-c3cd-4c1a-a681-9b4ea203dcef

[nqhhdev]

Pls check hover and padding on web

Design

[nqhhdev]

• Missing for remove All CHATS in web
• Missing hint text in search text field

Design

[nqhhdev]

Pls check it

[nqhhdev]

• QA for Design team:

• Missing new UI for chat list on web/tablet version

• Missing new UI for contact on web/tablet version

[hoangdat]

WEB

• [ ] padding for divider
• [ ] padding for hover block
• [ ] title of item is not fixed when item has 2 lines

[hoangdat]

• [ ] still not remove category in chat list