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

TW-816: [Mobile] change the UI for create new group chat #838

Merged
merged 3 commits into from
Oct 26, 2023
+307 −78
Merged

TW-816: [Mobile] change the UI for create new group chat #838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5b90242
TW-816: upgrade selected participants order to have better UX
sherlockvn Oct 26, 2023
41081b0
TW-816: update selected participants to have chips
sherlockvn Oct 26, 2023
d2f9516
TW-816: update new group chat info to have better UX
sherlockvn Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions assets/l10n/intl_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -808,7 +808,7 @@
"type": "text",
"placeholders": {}
},
"enableEncryption": "Enable encryption",
"enableEncryption": "Enable end-to-end encryption",
"@enableEncryption": {
"type": "text",
"placeholders": {}
Expand Down Expand Up @@ -2746,5 +2746,9 @@
"pasteImageFailed": "Paste image failed",
"copyImageFailed": "Copy image failed",
"fileFormatNotSupported": "File format not supported",
"copyImageSuccess": "Image copied to clipboard"
"copyImageSuccess": "Image copied to clipboard",
"encryptionMessage": "This feature protects your messages from being read by others, but also prevents them from being backed up on our servers. You can't disable this later.",
"encryptionWarning": "You might lose your messages if you access Twake app on the another device.",
"selectedUsers": "Selected users",
"clearAllSelected": "Clear all selected"
}
8 changes: 5 additions & 3 deletions lib/pages/new_group/contacts_selection_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,6 @@ class ContactsSelectionView extends StatelessWidget {
),
body: Column(
children: [
SelectedParticipantsList(
contactsSelectionController: controller,
),
Expanded(
child: ValueListenableBuilder<bool>(
valueListenable: controller
Expand All @@ -60,6 +57,11 @@ class ContactsSelectionView extends StatelessWidget {
onRefresh: controller.fetchContacts,
onLoading: controller.loadMoreContacts,
slivers: [
SliverToBoxAdapter(
child: SelectedParticipantsList(
contactsSelectionController: controller,
),
),
ContactsSelectionList(
contactsNotifier: controller.contactsNotifier!,
selectedContactsMapNotifier:
Expand Down
7 changes: 6 additions & 1 deletion lib/pages/new_group/new_group.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ class NewGroupController extends ContactsSelectionController<NewGroup>
final haveGroupNameNotifier = ValueNotifier(false);
final groupNameFocusNode = FocusNode();
StreamSubscription? createNewGroupChatInteractorStreamSubscription;
final enableEncryptionNotifier = ValueNotifier(false);

String groupName = "";

Expand Down Expand Up @@ -153,7 +154,7 @@ class NewGroupController extends ContactsSelectionController<NewGroup>
.map((contact) => contact.matrixId)
.whereNotNull()
.toList(),
enableEncryption: true,
enableEncryption: enableEncryptionNotifier.value,
urlAvatar: urlAvatar,
),
);
Expand Down Expand Up @@ -372,6 +373,10 @@ class NewGroupController extends ContactsSelectionController<NewGroup>
false;
}

void toggleEnableEncryption() {
enableEncryptionNotifier.value = !enableEncryptionNotifier.value;
}

@override
Widget build(BuildContext context) => ContactsSelectionView(this);
}
139 changes: 121 additions & 18 deletions lib/pages/new_group/new_group_chat_info.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>(
Expand Down Expand Up @@ -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),
);
},
),
],
),
);
}
}
6 changes: 6 additions & 0 deletions lib/pages/new_group/new_group_chat_info_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
22 changes: 19 additions & 3 deletions lib/pages/new_group/selected_contacts_map_change_notifier.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,24 @@ import 'package:fluffychat/presentation/model/presentation_contact.dart';
import 'package:flutter/widgets.dart';

class SelectedContactsMapChangeNotifier extends ChangeNotifier {
final Map<PresentationContact, ValueNotifier<bool>> selectedContactsMap = {};
final selectedContactsMap = <PresentationContact, ValueNotifier<bool>>{};
final haveSelectedContactsNotifier = ValueNotifier(false);
Set<PresentationContact> _selectedContactsList = {};

Iterable<PresentationContact> get contactsList => selectedContactsMap.keys
.where((contact) => selectedContactsMap[contact]?.value ?? false);
Iterable<PresentationContact> get contactsList {
return _selectedContactsList;
}

void onContactTileTap(BuildContext context, PresentationContact contact) {
final oldVal = selectedContactsMap[contact]?.value ?? false;
final newVal = !oldVal;
selectedContactsMap.putIfAbsent(contact, () => ValueNotifier(newVal));
selectedContactsMap[contact]!.value = newVal;
if (newVal) {
_selectedContactsList.add(contact);
} else {
_selectedContactsList.remove(contact);
}
notifyListeners();
haveSelectedContactsNotifier.value = contactsList.isNotEmpty;
}
Expand All @@ -26,6 +33,15 @@ class SelectedContactsMapChangeNotifier extends ChangeNotifier {
if (selectedContactsMap.containsKey(contact)) {
selectedContactsMap[contact]!.value = false;
}
_selectedContactsList.remove(contact);
notifyListeners();
}

void unselectAllContacts() {
for (final contact in selectedContactsMap.keys) {
selectedContactsMap[contact]!.value = false;
}
_selectedContactsList = {};
notifyListeners();
}

Expand Down
Loading