TW-816: update new group chat info to have better UX

linagora · Oct 26, 2023 · d2f9516 · d2f9516
1 parent 41081b0
commit d2f9516
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 19 deletions.
diff --git a/lib/pages/new_group/new_group_chat_info.dart b/lib/pages/new_group/new_group_chat_info.dart
@@ -30,18 +30,13 @@ class NewGroupChatInfo extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: _buildAppBar(context),
-      body: Padding(
-        padding: NewGroupChatInfoStyle.padding,
-        child: LayoutBuilder(
-          builder: (context, constraint) {
-            return ConstrainedBox(
-              constraints: BoxConstraints(
-                maxHeight: MediaQuery.of(context).size.height -
-                    MediaQuery.of(context).viewInsets.bottom,
-              ),
-              child: IntrinsicHeight(
+      body: NestedScrollView(
+        headerSliverBuilder: (context, innerBoxIsScrolled) {
+          return [
+            SliverOverlapAbsorber(
+              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
+              sliver: SliverToBoxAdapter(
                 child: Column(
-                  mainAxisSize: MainAxisSize.min,
                   children: [
                     Padding(
                       padding: NewGroupChatInfoStyle.profilePadding,
@@ -78,17 +73,32 @@ class NewGroupChatInfo extends StatelessWidget {
                     const SizedBox(height: 32),
                     _buildGroupNameTextField(context),
                     const SizedBox(height: 16),
-                    Expanded(
-                      child: ExpansionParticipantsList(
-                        newGroupController: newGroupController,
-                        contactsList: contactsList,
-                      ),
+                    _EncryptionSettingTile(
+                      enableEncryptionNotifier:
+                          newGroupController.enableEncryptionNotifier,
+                      onChanged: (value) {
+                        newGroupController.toggleEnableEncryption();
+                      },
                     ),
                   ],
                 ),
               ),
-            );
-          },
+            ),
+          ];
+        },
+        body: Padding(
+          padding: NewGroupChatInfoStyle.padding,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Expanded(
+                child: ExpansionParticipantsList(
+                  newGroupController: newGroupController,
+                  contactsList: contactsList,
+                ),
+              ),
+            ],
+          ),
         ),
       ),
       floatingActionButton: ValueListenableBuilder<bool>(
@@ -320,3 +330,96 @@ class _AvatarForWebBuilder extends StatelessWidget {
     );
   }
 }
+
+class _EncryptionSettingTile extends StatelessWidget {
+  final ValueNotifier<bool> enableEncryptionNotifier;
+
+  final ValueChanged<bool?>? onChanged;
+
+  const _EncryptionSettingTile({
+    required this.enableEncryptionNotifier,
+    this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: NewGroupChatInfoStyle.screenPadding,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Padding(
+            padding: NewGroupChatInfoStyle.topScreenPadding,
+            child: Icon(
+              Icons.lock,
+            ),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Padding(
+                  padding: NewGroupChatInfoStyle.topScreenPadding,
+                  child: Text(
+                    L10n.of(context)!.enableEncryption,
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                ),
+                const SizedBox(height: 4.0),
+                ValueListenableBuilder<bool>(
+                  valueListenable: enableEncryptionNotifier,
+                  builder: (context, isEnable, child) {
+                    return Column(
+                      children: [
+                        Text(
+                          L10n.of(context)!.encryptionMessage,
+                          style: Theme.of(context)
+                              .textTheme
+                              .bodyMedium
+                              ?.copyWith(
+                                color: LinagoraRefColors.material().neutral[40],
+                              ),
+                        ),
+                        AnimatedSize(
+                          alignment: Alignment.topCenter,
+                          duration: const Duration(milliseconds: 50),
+                          child: isEnable
+                              ? Text(
+                                  L10n.of(context)!.encryptionWarning,
+                                  style: Theme.of(context)
+                                      .textTheme
+                                      .bodyMedium
+                                      ?.copyWith(
+                                        color:
+                                            Theme.of(context).colorScheme.error,
+                                      ),
+                                )
+                              : const SizedBox.shrink(),
+                        ),
+                      ],
+                    );
+                  },
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(
+            width: 12,
+          ),
+          ValueListenableBuilder<bool>(
+            valueListenable: enableEncryptionNotifier,
+            builder: (context, isEnable, child) {
+              return Checkbox(
+                value: isEnable,
+                onChanged: (value) => onChanged?.call(value),
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/pages/new_group/new_group_chat_info_style.dart b/lib/pages/new_group/new_group_chat_info_style.dart
@@ -34,4 +34,10 @@ class NewGroupChatInfoStyle {
 
   static const EdgeInsetsDirectional profilePadding =
       EdgeInsetsDirectional.only(top: 16.0);
+
+  static const EdgeInsetsDirectional screenPadding =
+      EdgeInsetsDirectional.only(start: 8.0, bottom: 8.0, end: 4.0);
+
+  static const EdgeInsetsDirectional topScreenPadding =
+      EdgeInsetsDirectional.only(top: 8.0);
 }
diff --git a/lib/pages/new_group/widget/selected_participants_list.dart b/lib/pages/new_group/widget/selected_participants_list.dart
@@ -141,7 +141,7 @@ class _SelectedParticipantsListState extends State<SelectedParticipantsList> {
                       ),
                     ],
                   ),
-                )
+                ),
               ],
             );
           },
-Original file line number
+Diff line change
@@ Expand Up @@
                           ),
                         ],
                       ),
-                    )
+                    ),
                   ],
                 );
               },
@@ Expand Down @@