TF-2323 Update contact view for web
(cherry picked from commit 6dd055f9da7b8bb35a7826428d5b9afa3cf65e2d)
This commit is contained in:
hieubt
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
|
|||||||
import 'package:flutter_svg/flutter_svg.dart';
|
import 'package:flutter_svg/flutter_svg.dart';
|
||||||
import 'package:get/get.dart';
|
import 'package:get/get.dart';
|
||||||
import 'package:jmap_dart_client/jmap/mail/email/email_address.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/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/composer/presentation/model/suggestion_email_address.dart';
|
||||||
import 'package:tmail_ui_user/features/contact/presentation/contact_controller.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<ContactController> {
|
class ContactView extends GetWidget<ContactController> {
|
||||||
|
|
||||||
|
final _maxHeight = 656.0;
|
||||||
|
final _maxWidth = 556.0;
|
||||||
|
|
||||||
const ContactView({super.key});
|
const ContactView({super.key});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: Colors.black38,
|
backgroundColor: Colors.black38,
|
||||||
body: GestureDetector(
|
body: PointerInterceptor(
|
||||||
onTap: () => FocusScope.of(context).unfocus(),
|
child: GestureDetector(
|
||||||
child: SafeArea(
|
onTap: () => FocusScope.of(context).unfocus(),
|
||||||
bottom: false,
|
child: SafeArea(
|
||||||
left: false,
|
bottom: false,
|
||||||
right: false,
|
left: false,
|
||||||
top: ContactUtils.supportAppBarTopBorder(context, controller.responsiveUtils),
|
right: false,
|
||||||
child: Container(
|
top: ContactUtils.supportAppBarTopBorder(context, controller.responsiveUtils),
|
||||||
decoration: BoxDecoration(
|
child: Center(
|
||||||
borderRadius: BorderRadius.only(
|
child: Container(
|
||||||
topLeft: Radius.circular(ContactUtils.getRadiusBorderAppBarTop(
|
height: _getHeightContactView(context),
|
||||||
context,
|
width: _getWidthContactView(context),
|
||||||
controller.responsiveUtils)),
|
decoration: BoxDecoration(
|
||||||
topRight: Radius.circular(ContactUtils.getRadiusBorderAppBarTop(
|
borderRadius: _getRadiusContactView(context),
|
||||||
context,
|
color: Colors.white
|
||||||
controller.responsiveUtils))),
|
),
|
||||||
color: Colors.white),
|
child: ClipRRect(
|
||||||
child: ClipRRect(
|
borderRadius: _getRadiusContactView(context),
|
||||||
borderRadius: BorderRadius.only(
|
child: SafeArea(child: Container(
|
||||||
topLeft: Radius.circular(ContactUtils.getRadiusBorderAppBarTop(
|
color: Colors.white,
|
||||||
context,
|
child: Column(children: [
|
||||||
controller.responsiveUtils)),
|
Container(
|
||||||
topRight: Radius.circular(ContactUtils.getRadiusBorderAppBarTop(
|
height: 52,
|
||||||
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(
|
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
child: ListView.separated(
|
padding: ContactUtils.getPaddingAppBar(context, controller.responsiveUtils),
|
||||||
itemCount: controller.listContactSearched.length,
|
child: AppBarContactWidget(
|
||||||
separatorBuilder: (context, index) {
|
onCloseContactView: () => controller.closeContactView(context))
|
||||||
return Padding(
|
),
|
||||||
|
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),
|
padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
|
||||||
child: const Divider(height: 1, color: AppColor.colorDivider),
|
child: const Divider(height: 1, color: AppColor.colorDivider),
|
||||||
);
|
),
|
||||||
},
|
],
|
||||||
itemBuilder: (context, index) {
|
),
|
||||||
final emailAddress = controller.listContactSearched[index];
|
),
|
||||||
final suggestionEmailAddress = _toSuggestionEmailAddress(
|
Expanded(child: Obx(() {
|
||||||
emailAddress,
|
if (controller.listContactSearched.isNotEmpty) {
|
||||||
controller.contactSelected != null ? [controller.contactSelected!] : []
|
if (PlatformInfo.isMobile) {
|
||||||
);
|
return Container(
|
||||||
return ContactSuggestionBoxItem(
|
color: Colors.white,
|
||||||
suggestionEmailAddress,
|
child: ListView.separated(
|
||||||
padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
|
itemCount: controller.listContactSearched.length,
|
||||||
selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
|
separatorBuilder: (context, index) {
|
||||||
);
|
return Padding(
|
||||||
}
|
padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
|
||||||
)
|
child: const Divider(height: 1, color: AppColor.colorDivider),
|
||||||
);
|
);
|
||||||
} else {
|
},
|
||||||
return Container(
|
itemBuilder: (context, index) {
|
||||||
color: Colors.white,
|
final emailAddress = controller.listContactSearched[index];
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
final suggestionEmailAddress = _toSuggestionEmailAddress(
|
||||||
child: ScrollbarListView(
|
emailAddress,
|
||||||
scrollController: controller.scrollListViewController,
|
controller.contactSelected != null ? [controller.contactSelected!] : []
|
||||||
child: ListView.separated(
|
);
|
||||||
itemCount: controller.listContactSearched.length,
|
return ContactSuggestionBoxItem(
|
||||||
controller: controller.scrollListViewController,
|
suggestionEmailAddress,
|
||||||
separatorBuilder: (context, index) {
|
padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
|
||||||
return Padding(
|
selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
|
||||||
padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
|
);
|
||||||
child: const Divider(height: 1, color: AppColor.colorDivider),
|
}
|
||||||
);
|
)
|
||||||
},
|
);
|
||||||
itemBuilder: (context, index) {
|
} else {
|
||||||
final emailAddress = controller.listContactSearched[index];
|
return Container(
|
||||||
final suggestionEmailAddress = _toSuggestionEmailAddress(
|
color: Colors.white,
|
||||||
emailAddress,
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||||
controller.contactSelected != null ? [controller.contactSelected!] : []
|
child: ScrollbarListView(
|
||||||
);
|
scrollController: controller.scrollListViewController,
|
||||||
return ContactSuggestionBoxItem(
|
child: ListView.separated(
|
||||||
suggestionEmailAddress,
|
itemCount: controller.listContactSearched.length,
|
||||||
padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
|
controller: controller.scrollListViewController,
|
||||||
selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
|
separatorBuilder: (context, index) {
|
||||||
);
|
return Padding(
|
||||||
}
|
padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
|
||||||
),
|
child: const Divider(height: 1, color: AppColor.colorDivider),
|
||||||
)
|
);
|
||||||
);
|
},
|
||||||
}
|
itemBuilder: (context, index) {
|
||||||
} else {
|
final emailAddress = controller.listContactSearched[index];
|
||||||
return const SizedBox.shrink();
|
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<EmailAddress> addedEmailAddresses) {
|
SuggestionEmailAddress _toSuggestionEmailAddress(EmailAddress item, List<EmailAddress> addedEmailAddresses) {
|
||||||
if (addedEmailAddresses.contains(item)) {
|
if (addedEmailAddresses.contains(item)) {
|
||||||
return SuggestionEmailAddress(item, state: SuggestionEmailState.duplicated);
|
return SuggestionEmailAddress(item, state: SuggestionEmailState.duplicated);
|
||||||
|
|||||||
Reference in New Issue
Block a user