From fd58ee51a9d660ea2ce878d90993d0f5d6ad3320 Mon Sep 17 00:00:00 2001 From: sherlock Date: Thu, 26 Oct 2023 11:52:28 +0700 Subject: [PATCH] TW-816: update new group chat info to have better UX --- lib/pages/new_group/new_group_chat_info.dart | 139 +++++++++++++++--- .../new_group/new_group_chat_info_style.dart | 6 + 2 files changed, 127 insertions(+), 18 deletions(-) diff --git a/lib/pages/new_group/new_group_chat_info.dart b/lib/pages/new_group/new_group_chat_info.dart index 2f42acc98c..9bf0b33853 100644 --- 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( @@ -320,3 +330,96 @@ class _AvatarForWebBuilder extends StatelessWidget { ); } } + +class _EncryptionSettingTile extends StatelessWidget { + final ValueNotifier enableEncryptionNotifier; + + final ValueChanged? 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( + 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( + 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 index c85676d2d8..967613e12a 100644 --- 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); }