eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-750 Fix padding overflow for autocomplete advanced search

Browse Source
This commit is contained in:
dab246
2022-07-25 14:04:03 +07:00
committed by Dat H. Pham
parent 8e71d8d8e6
commit c8b94f9e8e
2 changed files with 88 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/responsive_utils.dart
+3 -1
View File
@@ -129,7 +129,9 @@ class ResponsiveUtils {
if (BuildUtils.isWeb) { if (BuildUtils.isWeb) {
return isTabletLarge(context); return isTabletLarge(context);
} else { } else {
return isLandscapeTablet(context); return !isLandscapeMobile(context) && (isLandscapeTablet(context) ||
isTabletLarge(context) ||
isDesktop(context));
} }
} }
} }
lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_auto_complete_email_adress.dart
+85 -39
View File
@@ -37,6 +37,7 @@ class _TextFieldAutoCompleteEmailAddressState
extends State<TextFieldAutoCompleteEmailAddress> { extends State<TextFieldAutoCompleteEmailAddress> {
final double _distanceToField = 380; final double _distanceToField = 380;
final ImagePaths _imagePaths = Get.find<ImagePaths>(); final ImagePaths _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
late CustomController _controller; late CustomController _controller;
@override @override
@@ -57,26 +58,33 @@ class _TextFieldAutoCompleteEmailAddressState
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Autocomplete<EmailAddress>( return Autocomplete<EmailAddress>(
optionsViewBuilder: (context, onSelected, options) { optionsViewBuilder: (context, onSelected, listEmailAddress) {
return Container( return Container(
margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 4.0), margin: const EdgeInsets.only(
child: Align( top: BuildUtils.isWeb ? 5 : 8,
alignment: Alignment.topLeft, bottom: 16),
child: Material( height: maxHeightSuggestionBox,
elevation: 4.0, width: maxWidthSuggestionBox,
child: ConstrainedBox( alignment: Alignment.topLeft,
constraints: child: Card(
const BoxConstraints(maxHeight: 200, maxWidth: 200), elevation: 20,
color: Colors.transparent,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
alignment: Alignment.topCenter,
height: maxHeightSuggestionBox,
width: maxWidthSuggestionBox,
color: Colors.white,
child: ListView.builder( child: ListView.builder(
shrinkWrap: true, shrinkWrap: true,
itemCount: options.length, padding: EdgeInsets.zero,
itemCount: listEmailAddress.length,
itemBuilder: (BuildContext context, int index) { itemBuilder: (BuildContext context, int index) {
final dynamic option = options.elementAt(index); final emailAddress = listEmailAddress.elementAt(index);
return GestureDetector( return GestureDetector(
onTap: () { onTap: () => onSelected(emailAddress),
onSelected(option); child: _buildSuggestionItem(context, emailAddress),
},
child: _buildSuggestionItem(context, option),
); );
}, },
), ),
@@ -166,9 +174,10 @@ class _TextFieldAutoCompleteEmailAddressState
BuildContext context, BuildContext context,
EmailAddress emailAddress, EmailAddress emailAddress,
) { ) {
return Row( return Container(
mainAxisSize: MainAxisSize.min, color: Colors.white,
children: [ padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
child: Row(children: [
Container( Container(
width: 40, width: 40,
height: 40, height: 40,
@@ -177,7 +186,8 @@ class _TextFieldAutoCompleteEmailAddressState
shape: BoxShape.circle, shape: BoxShape.circle,
color: AppColor.avatarColor, color: AppColor.avatarColor,
border: Border.all( border: Border.all(
color: AppColor.colorShadowBgContentEmail, width: 1.0)), color: AppColor.colorShadowBgContentEmail,
width: 1.0)),
child: Text( child: Text(
emailAddress.asString().isNotEmpty emailAddress.asString().isNotEmpty
? emailAddress.asString()[0].toUpperCase() ? emailAddress.asString()[0].toUpperCase()
@@ -186,28 +196,32 @@ class _TextFieldAutoCompleteEmailAddressState
color: Colors.black, color: Colors.black,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w600))), fontWeight: FontWeight.w600))),
Column( Expanded(child: Padding(
mainAxisSize: MainAxisSize.min, padding: const EdgeInsets.only(left: 10),
children: [ child: Column(
Text(emailAddress.asString(), crossAxisAlignment: CrossAxisAlignment.start,
maxLines: 1, children: [
overflow: kIsWeb ? null : TextOverflow.ellipsis, Text(
style: const TextStyle( emailAddress.asString(),
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal)),
if (emailAddress.displayName.isNotEmpty &&
emailAddress.emailAddress.isNotEmpty)
Text(emailAddress.emailAddress,
maxLines: 1, maxLines: 1,
overflow: kIsWeb ? null : TextOverflow.ellipsis, overflow: CommonTextStyle.defaultTextOverFlow,
style: const TextStyle( style: const TextStyle(
color: AppColor.colorHintSearchBar, color: Colors.black,
fontSize: 13, fontSize: 16, fontWeight:
fontWeight: FontWeight.normal)) FontWeight.normal)),
], if (emailAddress.displayName.isNotEmpty &&
) emailAddress.emailAddress.isNotEmpty)
], Text(
emailAddress.emailAddress,
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
style: const TextStyle(
color: AppColor.colorHintSearchBar,
fontSize: 13,
fontWeight: FontWeight.normal))
]),
)),
]),
); );
} }
@@ -284,6 +298,38 @@ class _TextFieldAutoCompleteEmailAddressState
return 0; return 0;
} }
double get maxHeightSuggestionBox {
if (BuildUtils.isWeb) {
return 250;
} else {
if (_responsiveUtils.isLandscapeMobile(context)) {
return 180;
} else {
return 250;
}
}
}
double get maxWidthSuggestionBox {
if (BuildUtils.isWeb) {
if (_responsiveUtils.isTabletLarge(context)) {
return 300;
} else {
return 400;
}
} else {
if (_responsiveUtils.isLandscapeMobile(context)) {
return 400;
} else if (_responsiveUtils.isLandscapeTablet(context) ||
_responsiveUtils.isTabletLarge(context) ||
_responsiveUtils.isDesktop(context)) {
return 300;
} else {
return 350;
}
}
}
@override @override
void dispose() { void dispose() {
super.dispose(); super.dispose();