[WIP]TW-2042 Update contacts screen ui #2057

KhaledNjim · 2024-09-23T09:01:44Z

Ticket

#2042

Resolved

Attach screenshots or videos demonstrating the changes

Web:
Android:
IOS:

github-actions · 2024-09-23T09:10:52Z

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

hoangdat · 2024-10-01T03:57:05Z

still not see the screenshot of contacts which load from address book @KhaledNjim

hoangdat · 2024-10-01T04:25:40Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

+            color: LinagoraStateLayer(LinagoraSysColors.material().surfaceTint)
+                .opacityLayer3,


IMO, it is surface color ( ref from chat list item)

Please create a util class to make us reuse it.

This is the color for the seperator between items, its the same as in chat list
contact list

chat list

hoangdat · 2024-10-01T04:29:20Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

+                const SizedBox(
+                  width: 12.0,
                ),


it should be 8

hoangdat · 2024-10-01T04:44:45Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

+                                      contactDisplayName: contact.displayName,
+                                      highlightKeyword: highlightKeyword,
+                                      style: LinagoraTextStyle.material()
+                                          .bodyMedium2


you use it exactly, but when I run in web app, the weight of this text is not precise

and color is not true too.

hoangdat · 2024-10-01T04:48:47Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

+                              .textTheme
+                              .bodyMedium
+                              ?.copyWith(
+                                color: LinagoraRefColors.material().neutral[60],


wrong color

hoangdat · 2024-10-01T04:48:58Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

+                              .textTheme
+                              .bodyMedium
+                              ?.copyWith(
+                                color: LinagoraRefColors.material().neutral[60],


hoangdat · 2024-10-01T04:54:02Z

lib/pages/contacts_tab/contacts_appbar_style.dart


  static EdgeInsetsDirectional appbarPadding =
      const EdgeInsetsDirectional.symmetric(
    horizontal: 16.0,
  );

  static EdgeInsetsDirectional contentPadding = EdgeInsetsDirectional.zero;
+  static const double textStyleHeight = 24 / 17;


what is it? can you explain it?

The default height of the text( 17 is this case) will be multiplied by this, to make the height of the text 24

nqhhdev · 2024-10-01T05:49:14Z

Wrong hint text

nqhhdev · 2024-10-01T05:52:09Z

Missing padding

KhaledNjim · 2024-10-01T08:59:33Z

still not see the screenshot of contacts which load from address book @KhaledNjim

The contacts at the bottom are from my phonebook

2042_phoneBook.webm

nqhhdev · 2024-10-01T10:02:57Z

Need to move hover style, divider style, selected background to system design

hoangdat · 2024-10-03T01:52:46Z

please apply also system-design to this PR @KhaledNjim

hoangdat · 2024-10-04T03:29:00Z

please keep align to this in top. we should not keep it in center because if we have only 2 lines, blink blink will occur

dab246 · 2024-10-04T07:00:52Z

lib/pages/contacts_tab/contacts_tab_body_view.dart

 import 'package:linagora_design_flutter/linagora_design_flutter.dart';
 import 'package:matrix/matrix.dart';

 class ContactsTabBodyView extends StatelessWidget {
  final ContactsTabController controller;
+  final bool enableFriendsInvite = false;


If it doesn't change use const for it.

dab246 · 2024-10-04T10:34:04Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

-                  size: 48.0,
+    return TwakeListItem(
+      child: Padding(
+        padding: const EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0),


Suggested change

padding: const EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0),

padding: const EdgeInsetsDirectional.only(start: 8.0, top: 8.0, bottom: 8.0),

dab246 · 2024-10-04T10:38:05Z

lib/pages/new_private_chat/widget/expansion_contact_list_tile.dart

+              : null,
+          builder: (context, snapshot) {
+            return Row(
+              crossAxisAlignment: CrossAxisAlignment.center,


CrossAxisAlignment.center is the default value so we don't need to set it again.

dab246 · 2024-10-04T10:39:58Z

lib/pages/search/search_text_field.dart

@@ -23,7 +23,7 @@ class SearchTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
-      borderRadius: BorderRadius.circular(16.0),
+      borderRadius: BorderRadius.circular(24.0),


Suggested change

borderRadius: BorderRadius.circular(24.0),

borderRadius: const BorderRadius.all(Radius.circular(24.0)),

dab246 · 2024-10-04T10:41:00Z

lib/widgets/sliver_expandable_list.dart

+      itemBuilder: (context, index) {
+        return widget.itemBuilder(context, index);
      },


Suggested change

itemBuilder: (context, index) {

return widget.itemBuilder(context, index);

},

itemBuilder: widget.itemBuilder,

KhaledNjim requested review from sherlockvn, hoangdat, dab246, nqhhdev, hieutbui, tddang-linagora and Te-Z as code owners September 23, 2024 09:01

KhaledNjim temporarily deployed to PR-2057 September 23, 2024 09:01 — with GitHub Actions Inactive

KhaledNjim temporarily deployed to PR-2057 September 23, 2024 23:14 — with GitHub Actions Inactive

KhaledNjim temporarily deployed to PR-2057 September 30, 2024 00:34 — with GitHub Actions Inactive

KhaledNjim changed the title ~~[WIP]TW-2042 Update contacts screen ui~~ TW-2042 Update contacts screen ui Sep 30, 2024

KhaledNjim added 4 commits September 30, 2024 01:42

TW-2042 Update contacts appBar for mobile

77b5dfb

TW-2042 Update contacts app bar for web

edbc7f7

TW-2042 added invite freind button

b8c2f51

TW-2042 Update contact list item

99f30bc

KhaledNjim force-pushed the TW-2042_update_contacts_ui branch from eea142a to 99f30bc Compare September 30, 2024 00:43

KhaledNjim temporarily deployed to PR-2057 September 30, 2024 00:43 — with GitHub Actions Inactive

hoangdat reviewed Oct 1, 2024

View reviewed changes

fixup! TW-2042 Update contact list item

6561b83

KhaledNjim temporarily deployed to PR-2057 October 1, 2024 13:08 — with GitHub Actions Inactive

KhaledNjim changed the title ~~TW-2042 Update contacts screen ui~~ [WIP]TW-2042 Update contacts screen ui Oct 4, 2024

TW-2042 refactor to use system design items

ccaeee3

KhaledNjim deployed to PR-2057 October 4, 2024 01:07 — with GitHub Actions View deployment

dab246 reviewed Oct 4, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP]TW-2042 Update contacts screen ui #2057

[WIP]TW-2042 Update contacts screen ui #2057

KhaledNjim commented Sep 23, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024

hoangdat commented Oct 1, 2024 •

edited by KhaledNjim

Loading

hoangdat Oct 1, 2024

KhaledNjim Oct 1, 2024

hoangdat Oct 1, 2024

KhaledNjim Oct 1, 2024

hoangdat Oct 1, 2024

hoangdat Oct 1, 2024

KhaledNjim Oct 1, 2024

hoangdat Oct 1, 2024

KhaledNjim Oct 1, 2024

hoangdat Oct 1, 2024

KhaledNjim Oct 1, 2024

hoangdat Oct 1, 2024

KhaledNjim Oct 1, 2024

nqhhdev commented Oct 1, 2024

nqhhdev commented Oct 1, 2024

KhaledNjim commented Oct 1, 2024

nqhhdev commented Oct 1, 2024

hoangdat commented Oct 3, 2024

hoangdat commented Oct 4, 2024 •

edited

Loading

dab246 Oct 4, 2024

dab246 Oct 4, 2024

dab246 Oct 4, 2024

dab246 Oct 4, 2024

dab246 Oct 4, 2024

		color: LinagoraStateLayer(LinagoraSysColors.material().surfaceTint)
		.opacityLayer3,

	padding: const EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0),
	padding: const EdgeInsetsDirectional.only(start: 8.0, top: 8.0, bottom: 8.0),

	borderRadius: BorderRadius.circular(24.0),
	borderRadius: const BorderRadius.all(Radius.circular(24.0)),

[WIP]TW-2042 Update contacts screen ui #2057

Are you sure you want to change the base?

[WIP]TW-2042 Update contacts screen ui #2057

Conversation

KhaledNjim commented Sep 23, 2024 • edited Loading

Ticket

Resolved

github-actions bot commented Sep 23, 2024

hoangdat commented Oct 1, 2024 • edited by KhaledNjim Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nqhhdev commented Oct 1, 2024

nqhhdev commented Oct 1, 2024

KhaledNjim commented Oct 1, 2024

nqhhdev commented Oct 1, 2024

hoangdat commented Oct 3, 2024

hoangdat commented Oct 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KhaledNjim commented Sep 23, 2024 •

edited

Loading

hoangdat commented Oct 1, 2024 •

edited by KhaledNjim

Loading

hoangdat commented Oct 4, 2024 •

edited

Loading