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

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

Merged
merged 2 commits into from
Sep 18, 2024
Merged

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

merged 2 commits into from
Sep 18, 2024

Conversation

KhaledNjim
Copy link
Contributor

@KhaledNjim KhaledNjim commented Jul 15, 2024 •
edited
Loading

Ticket

#1902

Figma

Impact description

chat list items design updated

Test recommendations

test on all supported platforms with different sized screens

Resolved

-Web:
image

2024-07-23.16-46-24.mp4
  • Android:

image

  • IOS:

@KhaledNjim KhaledNjim self-assigned this Jul 15, 2024
@KhaledNjim KhaledNjim linked an issue Jul 15, 2024 that may be closed by this pull request
Update chat list item UI [part 2] #1902
Closed
11 tasks
@github-actions GitHub Actions
Copy link

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

@sherlockvn
Copy link
Collaborator

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
Copy link
Collaborator

If you want a pair. please ping me

@KhaledNjim KhaledNjim changed the title [WIP] TW-1902 update chat list item ui TW-1902 update chat list item ui (Part 2) Jul 23, 2024
@Te-Z
Copy link
Contributor

Te-Z commented Jul 24, 2024

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

image

@Te-Z
Copy link
Contributor

Te-Z commented Jul 24, 2024

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

image

@sherlockvn
Copy link
Collaborator

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 KhaledNjim force-pushed the TW-1902_chatlist_item_design_update branch from ddf08d0 to 279417c Compare August 23, 2024 10:40
@sherlockvn
Copy link
Collaborator

sherlockvn commented Aug 26, 2024 •
edited
Loading

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
Copy link
Collaborator

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

@KhaledNjim
Copy link
Contributor Author

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

i cant reproduce this can you provide more infos

@sherlockvn
Copy link
Collaborator

sherlockvn commented Aug 27, 2024 •
edited
Loading

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

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

RPReplay_Final1724749890.MP4

@KhaledNjim
Copy link
Contributor Author

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
Copy link
Contributor Author

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
hoangdat reviewed Sep 11, 2024
View reviewed changes
lib/pages/chat_list/chat_list_item.dart Outdated
Comment on lines 146 to 161
mainAxisAlignment: MainAxisAlignment.center,
children: [
ChatListItemTitle(room: room),
ChatListItemTitle(
room: room,
textStyle: LinagoraTextStyle.material().bodyMedium2,
),
Copy link
Member

Choose a reason for hiding this comment

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

Overflow error
image

hoangdat
hoangdat reviewed Sep 11, 2024
View reviewed changes
lib/pages/chat_list/chat_list_item_style.dart Outdated
Comment on lines 30 to 34
static const EdgeInsets paddingConversation = EdgeInsets.fromLTRB(
8,
8,
8,
0,
Copy link
Member

Choose a reason for hiding this comment

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

Wrong padding for chat list item
telegram-cloud-photo-size-5-6271625590989766557-y

Copy link
Member

Choose a reason for hiding this comment

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

  • avatar must be in the center of chat list item

hoangdat
hoangdat reviewed Sep 11, 2024
View reviewed changes
lib/pages/chat_list/chat_list_item.dart Outdated
ChatListItemTitle(room: room),
ChatListItemTitle(
room: room,
textStyle: LinagoraTextStyle.material().bodyMedium2,
Copy link
Member

@hoangdat hoangdat Sep 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

why not use: Theme.of(context).textTheme.bodyMedium?

Copy link
Member

Choose a reason for hiding this comment

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

Screenshot 2024-09-11 at 11 43 48

@nqhhdev
Copy link
Member

nqhhdev commented Sep 13, 2024 •
edited
Loading

Design:

Screenshot 2024-09-13 at 17 29 46

Your code:

Simulator Screenshot - iPhone 15 - 2024-09-13 at 17 26 17

  • padding only 8px for weight and height

@hoangdat
Copy link
Member

hoangdat commented Sep 13, 2024 •
edited by KhaledNjim
Loading

  • please show me screenshot in Chat screen

@KhaledNjim
Copy link
Contributor Author

  • please show me screenshot in Chat screen

mobile

image

Web

image

@KhaledNjim
Copy link
Contributor Author

Design:

Screenshot 2024-09-13 at 17 29 46 Your code:

Simulator Screenshot - iPhone 15 - 2024-09-13 at 17 26 17

  • 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

image

Code

image

@nqhhdev
Copy link
Member

nqhhdev commented Sep 16, 2024

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
Copy link
Member

nqhhdev commented Sep 16, 2024

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

@nqhhdev
Copy link
Member

nqhhdev commented Sep 16, 2024 •
edited
Loading

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

Simulator.Screen.Recording.-.iPhone.15.-.2024-09-16.at.09.22.42.mp4

@nqhhdev
Copy link
Member

nqhhdev commented Sep 16, 2024 •
edited
Loading

Pls check hover and padding on web

Screenshot 2024-09-16 at 10 35 59

Design

Screenshot 2024-09-16 at 10 36 57

@nqhhdev
Copy link
Member

nqhhdev commented Sep 16, 2024 •
edited
Loading

  • Missing for remove All CHATS in web
  • Missing hint text in search text field
Screenshot 2024-09-16 at 10 38 08

Design

Screenshot 2024-09-16 at 10 36 57

@nqhhdev
Copy link
Member

nqhhdev commented Sep 16, 2024

Pls check it

Screenshot 2024-09-16 at 10 41 30

@nqhhdev
Copy link
Member

nqhhdev commented Sep 16, 2024

  • QA for Design team:

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

  • Missing new UI for contact on web/tablet version

@hoangdat
Copy link
Member

WEB

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

@nqhhdev nqhhdev force-pushed the TW-1902_chatlist_item_design_update branch from 8ae36ed to c942a15 Compare September 17, 2024 07:34
@hoangdat
Copy link
Member

  • still not remove category in chat list

@KhaledNjim @nqhhdev
TW-1902 update chat list item ui
0051826 
TW-1902 update icons, text style

TW-1920 add delivery state for chatlist items

TW-1902 added image preview in chat_list

TW-1902 added video preview for chat list items

TW-1902 fixed bottom navigation avatar sync
@nqhhdev nqhhdev force-pushed the TW-1902_chatlist_item_design_update branch from c942a15 to 0051826 Compare September 17, 2024 09:15
@hoangdat hoangdat merged commit 5fae280 into main Sep 18, 2024
7 checks passed
@hoangdat hoangdat deleted the TW-1902_chatlist_item_design_update branch September 18, 2024 06:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Te-Z Te-Z Te-Z left review comments

@hoangdat hoangdat hoangdat approved these changes

@nqhhdev nqhhdev nqhhdev approved these changes

@sherlockvn sherlockvn Awaiting requested review from sherlockvn sherlockvn is a code owner

@dab246 dab246 Awaiting requested review from dab246 dab246 is a code owner

@hieutbui hieutbui Awaiting requested review from hieutbui hieutbui is a code owner

@tddang-linagora tddang-linagora Awaiting requested review from tddang-linagora tddang-linagora is a code owner

Assignees

@KhaledNjim KhaledNjim

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Update chat list item UI [part 2]
5 participants
@KhaledNjim @sherlockvn @Te-Z @hoangdat @nqhhdev