From 1fad23bc91acd36a6bb101eca997415fe53e4a41 Mon Sep 17 00:00:00 2001 From: hieubt Date: Sun, 26 Nov 2023 13:45:33 +0700 Subject: [PATCH] TF-2323 Update contact view for web (cherry picked from commit 6dd055f9da7b8bb35a7826428d5b9afa3cf65e2d) --- .../contact/presentation/contact_view.dart | 325 +++++++++++------- 1 file changed, 204 insertions(+), 121 deletions(-) diff --git a/lib/features/contact/presentation/contact_view.dart b/lib/features/contact/presentation/contact_view.dart index 74f51eea2..18974a40c 100644 --- a/lib/features/contact/presentation/contact_view.dart +++ b/lib/features/contact/presentation/contact_view.dart @@ -5,6 +5,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; +import 'package:pointer_interceptor/pointer_interceptor.dart'; import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart'; import 'package:tmail_ui_user/features/contact/presentation/contact_controller.dart'; @@ -16,142 +17,224 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class ContactView extends GetWidget { + final _maxHeight = 656.0; + final _maxWidth = 556.0; + const ContactView({super.key}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black38, - body: GestureDetector( - onTap: () => FocusScope.of(context).unfocus(), - child: SafeArea( - bottom: false, - left: false, - right: false, - top: ContactUtils.supportAppBarTopBorder(context, controller.responsiveUtils), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.only( - topLeft: Radius.circular(ContactUtils.getRadiusBorderAppBarTop( - context, - controller.responsiveUtils)), - topRight: Radius.circular(ContactUtils.getRadiusBorderAppBarTop( - context, - controller.responsiveUtils))), - color: Colors.white), - child: ClipRRect( - borderRadius: BorderRadius.only( - topLeft: Radius.circular(ContactUtils.getRadiusBorderAppBarTop( - context, - controller.responsiveUtils)), - topRight: Radius.circular(ContactUtils.getRadiusBorderAppBarTop( - context, - controller.responsiveUtils))), - child: SafeArea(child: Container( - color: Colors.white, - child: Column(children: [ - Container( - height: 52, - color: Colors.white, - padding: ContactUtils.getPaddingAppBar(context, controller.responsiveUtils), - child: AppBarContactWidget( - onCloseContactView: () => controller.closeContactView(context)) - ), - const Divider(color: AppColor.colorDividerComposer, height: 1), - SearchAppBarWidget( - imagePaths: controller.imagePaths, - searchQuery: controller.searchQuery.value, - searchFocusNode: controller.textInputSearchFocus, - searchInputController: controller.textInputSearchController, - hasBackButton: false, - hasSearchButton: true, - padding: EdgeInsets.zero, - heightSearchBar: 44, - margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils), - decoration: const BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(10)), - color: AppColor.colorBgSearchBar), - iconClearText: SvgPicture.asset( - controller.imagePaths.icClearTextSearch, - width: 18, - height: 18, - fit: BoxFit.fill), - hintText: AppLocalizations.of(context).hintSearchInputContact, - onClearTextSearchAction: controller.clearAllTextInputSearchForm, - onTextChangeSearchAction: controller.onTextSearchChange, - onSearchTextAction: controller.onSearchTextAction, - ), - Expanded(child: Obx(() { - if (controller.listContactSearched.isNotEmpty) { - if (PlatformInfo.isMobile) { - return Container( + body: PointerInterceptor( + child: GestureDetector( + onTap: () => FocusScope.of(context).unfocus(), + child: SafeArea( + bottom: false, + left: false, + right: false, + top: ContactUtils.supportAppBarTopBorder(context, controller.responsiveUtils), + child: Center( + child: Container( + height: _getHeightContactView(context), + width: _getWidthContactView(context), + decoration: BoxDecoration( + borderRadius: _getRadiusContactView(context), + color: Colors.white + ), + child: ClipRRect( + borderRadius: _getRadiusContactView(context), + child: SafeArea(child: Container( + color: Colors.white, + child: Column(children: [ + Container( + height: 52, color: Colors.white, - child: ListView.separated( - itemCount: controller.listContactSearched.length, - separatorBuilder: (context, index) { - return Padding( + padding: ContactUtils.getPaddingAppBar(context, controller.responsiveUtils), + child: AppBarContactWidget( + onCloseContactView: () => controller.closeContactView(context)) + ), + const Divider(color: AppColor.colorDividerComposer, height: 1), + SearchAppBarWidget( + imagePaths: controller.imagePaths, + searchQuery: controller.searchQuery.value, + searchFocusNode: controller.textInputSearchFocus, + searchInputController: controller.textInputSearchController, + hasBackButton: false, + hasSearchButton: true, + padding: EdgeInsets.zero, + heightSearchBar: 44, + margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils), + decoration: const BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: AppColor.colorBgSearchBar), + iconClearText: SvgPicture.asset( + controller.imagePaths.icClearTextSearch, + width: 18, + height: 18, + fit: BoxFit.fill), + hintText: AppLocalizations.of(context).hintSearchInputContact, + onClearTextSearchAction: controller.clearAllTextInputSearchForm, + onTextChangeSearchAction: controller.onTextSearchChange, + onSearchTextAction: controller.onSearchTextAction, + ), + if (PlatformInfo.isWeb && !controller.responsiveUtils.isMobile(context)) + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4), + child: Column( + children: [ + Obx(() => ContactSuggestionBoxItem( + controller.getFromMeSuggestion(context), + padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils), + selectedContactCallbackAction: (contact) { + controller.selectContact(context, contact); + }, + )), + Padding( padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils), child: const Divider(height: 1, color: AppColor.colorDivider), - ); - }, - itemBuilder: (context, index) { - final emailAddress = controller.listContactSearched[index]; - final suggestionEmailAddress = _toSuggestionEmailAddress( - emailAddress, - controller.contactSelected != null ? [controller.contactSelected!] : [] - ); - return ContactSuggestionBoxItem( - suggestionEmailAddress, - padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils), - selectedContactCallbackAction: (contact) => controller.selectContact(context, contact), - ); - } - ) - ); - } else { - return Container( - color: Colors.white, - padding: const EdgeInsets.symmetric(horizontal: 4), - child: ScrollbarListView( - scrollController: controller.scrollListViewController, - child: ListView.separated( - itemCount: controller.listContactSearched.length, - controller: controller.scrollListViewController, - separatorBuilder: (context, index) { - return Padding( - padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils), - child: const Divider(height: 1, color: AppColor.colorDivider), - ); - }, - itemBuilder: (context, index) { - final emailAddress = controller.listContactSearched[index]; - final suggestionEmailAddress = _toSuggestionEmailAddress( - emailAddress, - controller.contactSelected != null ? [controller.contactSelected!] : [] - ); - return ContactSuggestionBoxItem( - suggestionEmailAddress, - padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils), - selectedContactCallbackAction: (contact) => controller.selectContact(context, contact), - ); - } - ), - ) - ); - } - } else { - return const SizedBox.shrink(); - } - })), - ]), - )) - ) + ), + ], + ), + ), + Expanded(child: Obx(() { + if (controller.listContactSearched.isNotEmpty) { + if (PlatformInfo.isMobile) { + return Container( + color: Colors.white, + child: ListView.separated( + itemCount: controller.listContactSearched.length, + separatorBuilder: (context, index) { + return Padding( + padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils), + child: const Divider(height: 1, color: AppColor.colorDivider), + ); + }, + itemBuilder: (context, index) { + final emailAddress = controller.listContactSearched[index]; + final suggestionEmailAddress = _toSuggestionEmailAddress( + emailAddress, + controller.contactSelected != null ? [controller.contactSelected!] : [] + ); + return ContactSuggestionBoxItem( + suggestionEmailAddress, + padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils), + selectedContactCallbackAction: (contact) => controller.selectContact(context, contact), + ); + } + ) + ); + } else { + return Container( + color: Colors.white, + padding: const EdgeInsets.symmetric(horizontal: 4), + child: ScrollbarListView( + scrollController: controller.scrollListViewController, + child: ListView.separated( + itemCount: controller.listContactSearched.length, + controller: controller.scrollListViewController, + separatorBuilder: (context, index) { + return Padding( + padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils), + child: const Divider(height: 1, color: AppColor.colorDivider), + ); + }, + itemBuilder: (context, index) { + final emailAddress = controller.listContactSearched[index]; + final suggestionEmailAddress = _toSuggestionEmailAddress( + emailAddress, + controller.contactSelected != null ? [controller.contactSelected!] : [] + ); + return ContactSuggestionBoxItem( + suggestionEmailAddress, + padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils), + selectedContactCallbackAction: (contact) => controller.selectContact(context, contact), + ); + } + ), + ) + ); + } + } else { + return const SizedBox.shrink(); + } + })), + ]), + )) + ) + ), + ), ), ), ) ); } + BorderRadius _getRadiusContactView(BuildContext context) { + if (PlatformInfo.isMobile && controller.responsiveUtils.isLandscapeMobile(context)) { + return BorderRadius.zero; + } else if (controller.responsiveUtils.isMobile(context)) { + return BorderRadius.only( + topRight: Radius.circular( + ContactUtils.getRadiusBorderAppBarTop( + context, + controller.responsiveUtils + ) + ), + topLeft: Radius.circular( + ContactUtils.getRadiusBorderAppBarTop( + context, + controller.responsiveUtils + ) + ) + ); + } else { + return const BorderRadius.all(Radius.circular(16)); + } + } + + double _getHeightContactView(BuildContext context) { + if (PlatformInfo.isWeb) { + if (controller.responsiveUtils.isMobile(context)) { + return double.infinity; + } else { + if (controller.responsiveUtils.getSizeScreenHeight(context) > _maxHeight) { + return _maxHeight; + } else { + return double.infinity; + } + } + } else { + if (controller.responsiveUtils.isLandscapeMobile(context) || + controller.responsiveUtils.isPortraitMobile(context)) { + return double.infinity; + } else { + if (controller.responsiveUtils.getSizeScreenHeight(context) > _maxHeight) { + return _maxHeight; + } else { + return double.infinity; + } + } + } + } + + double _getWidthContactView(BuildContext context) { + if (PlatformInfo.isWeb) { + if (controller.responsiveUtils.isMobile(context)) { + return double.infinity; + } else { + return _maxWidth; + } + } else { + if (controller.responsiveUtils.isLandscapeMobile(context) || + controller.responsiveUtils.isPortraitMobile(context)) { + return double.infinity; + } else { + return _maxWidth; + } + } + } + SuggestionEmailAddress _toSuggestionEmailAddress(EmailAddress item, List addedEmailAddresses) { if (addedEmailAddresses.contains(item)) { return SuggestionEmailAddress(item, state: SuggestionEmailState.duplicated);