Skip to content

Commit

Permalink
Improve various UX/UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@sherlockvn @hoangdat
sherlockvn authored and hoangdat committed Jun 20, 2023
1 parent 62dd087 commit c151eb1
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 69 deletions.
2 changes: 1 addition & 1 deletion assets/l10n/intl_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2608,7 +2608,7 @@
"max": {}
}
},
"makeThisGroupPrivate": "Make this group private",
"makeThisGroupPublic": "Make this group public",
"groupPrivateDescription": "This group will only be visible to those who are invited. From the group settings, you can change this at any time.",
"enableE2EEncryption": "Enable end-to-end encryption",
"owner": "Owner",
Expand Down
48 changes: 24 additions & 24 deletions lib/config/routes.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,47 +82,47 @@ class AppRoutes {
VWidget(
path: '/stories/create',
widget: const AddStoryPage(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: '/stories/:roomid',
widget: const StoryPage(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
stackedRoutes: [
VWidget(
path: 'share',
widget: const AddStoryPage(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
],
),
VWidget(
path: '/spaces/:roomid',
widget: const ChatDetails(),
stackedRoutes: _chatDetailsRoutes,
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidgetWithDependency(
path: '/rooms/:roomid',
di: SendImageDi(),
widget: const Chat(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
stackedRoutes: [
VWidget(
path: 'encryption',
widget: const ChatEncryptionSettings(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: 'invite',
widget: const InvitationSelection(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: 'details',
widget: const ChatDetails(),
stackedRoutes: _chatDetailsRoutes,
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
],
),
Expand All @@ -135,26 +135,26 @@ class AppRoutes {
VWidget(
path: '/archive',
widget: const Archive(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
stackedRoutes: [
VWidget(
path: ':roomid',
widget: const Chat(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
],
),
VWidgetWithDependency(
di: ContactDI(),
path: '/newprivatechat',
widget: const NewPrivateChat(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidgetWithDependency(
di: ContactDI(),
path: '/newgroup',
widget: const NewGroup(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
],
)
Expand Down Expand Up @@ -362,27 +362,27 @@ class AppRoutes {
VWidget(
path: 'notifications',
widget: const SettingsNotifications(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: 'style',
widget: const SettingsStyle(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: 'devices',
widget: const DevicesSettings(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: 'chat',
widget: const SettingsChat(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
stackedRoutes: [
VWidget(
path: 'emotes',
widget: const EmotesSettings(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
],
),
Expand Down Expand Up @@ -418,29 +418,29 @@ class AppRoutes {
VWidget(
path: 'security',
widget: const SettingsSecurity(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
stackedRoutes: [
VWidget(
path: 'stories',
widget: const SettingsStories(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: 'ignorelist',
widget: const SettingsIgnoreList(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
VWidget(
path: '3pid',
widget: const Settings3Pid(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
],
),
VWidget(
path: 'logs',
widget: const LogViewer(),
buildTransition: _rightToLeftTransition,
buildTransition: rightToLeftTransition,
),
];

Expand All @@ -462,11 +462,11 @@ class AppRoutes {
return _buildSlideTransition(animation, secondaryAnimation, child, SlideTransitionType.leftToRight);
}

SlideTransition _rightToLeftTransition(animation, secondaryAnimation, child) {
static SlideTransition rightToLeftTransition(animation, secondaryAnimation, child) {
return _buildSlideTransition(animation, secondaryAnimation, child, SlideTransitionType.rightToLeft);
}

SlideTransition _buildSlideTransition(
static SlideTransition _buildSlideTransition(
Animation animation,
Animation secondaryAnimation,
Widget child,
Expand Down
43 changes: 36 additions & 7 deletions lib/pages/new_group/new_group.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'dart:async';

import 'package:dartz/dartz.dart' hide State;
import 'package:fluffychat/app_state/failure.dart';
import 'package:fluffychat/config/routes.dart';
import 'package:fluffychat/domain/app_state/contact/get_contacts_success.dart';
import 'package:fluffychat/presentation/model/presentation_contact.dart';
import 'package:fluffychat/mixin/comparable_presentation_contact_mixin.dart';
Expand All @@ -27,14 +28,19 @@ class NewGroupController extends State<NewGroup> with ComparablePresentationCont
final fetchContactsController = FetchContactsController();
final contactStreamController = StreamController<Either<Failure, GetContactsSuccess>>();
final groupNameTextEditingController = TextEditingController();
final groupchatInfoScrollController = ScrollController();

final selectedContactsMapNotifier = ValueNotifier<Map<PresentationContact, bool>>({});
final haveSelectedContactsNotifier = ValueNotifier(false);
final haveGroupNameNotifier = ValueNotifier(false);
final isEnableEEEncryptionNotifier = ValueNotifier(true);

final groupNameFocusNode = FocusNode();

String groupName = "";
bool isGroupPrivate = false;
bool isGroupPublic = false;

static const maxScrollOffsetAllowedInPixel = 380.0;

@override
void initState() {
Expand All @@ -45,6 +51,13 @@ class NewGroupController extends State<NewGroup> with ComparablePresentationCont
listenSearchContacts();
listenGroupNameChanged();
fetchContactsController.fetchCurrentTomContacts();
groupchatInfoScrollController.addListener(() {
if (groupchatInfoScrollController.offset > maxScrollOffsetAllowedInPixel) {
groupchatInfoScrollController.jumpTo(
maxScrollOffsetAllowedInPixel,
);
}
});
}

@override
Expand Down Expand Up @@ -114,19 +127,35 @@ class NewGroupController extends State<NewGroup> with ComparablePresentationCont
}

void moveToNewGroupInfoScreen() async {
await showDialog(
useSafeArea: false,
groupNameFocusNode.unfocus();
await showGeneralDialog(
pageBuilder: (context, animation, secondaryAnimation) {
return const SizedBox.shrink();
},
context: context,
useRootNavigator: false,
builder: (context) {
return NewGroupChatInfo(
contactsList: getAllContactsGroupChat(),
newGroupController: this,
barrierColor: Colors.white,
transitionBuilder: (context, animation1, animation2, widget) {
return AppRoutes.rightToLeftTransition(
animation1,
animation2,
NewGroupChatInfo(
contactsList: getAllContactsGroupChat(),
newGroupController: this,
)
);
},
);
}

void autoScrollWhenExpandParticipants() {
groupchatInfoScrollController.animateTo(
MediaQuery.of(context).size.height,
duration: const Duration(milliseconds: 800),
curve: Curves.easeIn,
);
}

@override
Widget build(BuildContext context) => NewGroupView(this);
}
72 changes: 48 additions & 24 deletions lib/pages/new_group/new_group_chat_info.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:io';

import 'package:fluffychat/presentation/model/presentation_contact.dart';
import 'package:fluffychat/pages/new_group/new_group.dart';
import 'package:fluffychat/pages/new_group/new_group_info_controller.dart';
Expand Down Expand Up @@ -27,28 +29,49 @@ class NewGroupChatInfo extends StatelessWidget {
return Scaffold(
appBar: _buildAppBar(context),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
child: Column(
children: [
_buildChangeProfileWidget(context),
const SizedBox(height: 16.0,),
Text(L10n.of(context)!.addAPhoto,
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
),
Text(L10n.of(context)!.maxImageSize(5),
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: LinagoraRefColors.material().neutral[40],
),),
const SizedBox(height: 32,),
_buildGroupNameTextFieid(context),
const SizedBox(height: 16,),
_buildSettings(context),
Expanded(
child: ExpansionParticipantsList(contactsList: contactsList,),
),
],
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
controller: newGroupController.groupchatInfoScrollController,
child: LayoutBuilder(
builder: (context, constraint) {
return ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height - MediaQuery.of(context).viewInsets.bottom
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: _buildChangeProfileWidget(context)),
const SizedBox(height: 16.0),
Text(L10n.of(context)!.addAPhoto,
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
),
Text(L10n.of(context)!.maxImageSize(5),
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: LinagoraRefColors.material().neutral[40],
)),
const SizedBox(height: 32),
_buildGroupNameTextFieid(context),
const SizedBox(height: 16),
_buildSettings(context),
Expanded(
child: ExpansionParticipantsList(
newGroupController: newGroupController,
contactsList: contactsList,
),
),
],
),
),
);
}
),
),
),
floatingActionButton: ValueListenableBuilder<bool>(
Expand Down Expand Up @@ -136,6 +159,7 @@ class NewGroupChatInfo extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextField(
controller: newGroupController.groupNameTextEditingController,
focusNode: newGroupController.groupNameFocusNode,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).colorScheme.shadow),
Expand Down Expand Up @@ -165,11 +189,11 @@ class NewGroupChatInfo extends StatelessWidget {
SettingTile(
key: UniqueKey(),
leadingIcon: Icons.back_hand_outlined,
settingTitle: L10n.of(context)!.makeThisGroupPrivate,
settingTitle: L10n.of(context)!.makeThisGroupPublic,
settingDescription: L10n.of(context)!.groupPrivateDescription,
onSwitchButtonChanged: (valueChanged)
=> newGroupController.onGroupPrivacyChanged(valueChanged),
defaultSwitchValue: newGroupController.isGroupPrivate,
defaultSwitchValue: newGroupController.isGroupPublic,
),
ValueListenableBuilder<bool>(
valueListenable: newGroupController.isEnableEEEncryptionNotifier,
Expand Down
Loading

0 comments on commit c151eb1

Please sign in to comment.