From 6fdc1aa91ef314e3fb4146b6ee6dc97e991a88f5 Mon Sep 17 00:00:00 2001 From: hieubt Date: Mon, 30 Oct 2023 11:06:53 +0700 Subject: [PATCH] TF-1155 Add tag item for web (cherry picked from commit d061ee52f096d91fbea6dc65ebdbccbb081db3ab) --- .../autocomplete_tag_item_web_style.dart | 26 ++++ .../autocomplete_tag_item_widget_web.dart | 122 ++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 lib/features/mailbox_dashboard/presentation/styles/autocomplete_tag_item_web_style.dart create mode 100644 lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart diff --git a/lib/features/mailbox_dashboard/presentation/styles/autocomplete_tag_item_web_style.dart b/lib/features/mailbox_dashboard/presentation/styles/autocomplete_tag_item_web_style.dart new file mode 100644 index 000000000..4b92ba103 --- /dev/null +++ b/lib/features/mailbox_dashboard/presentation/styles/autocomplete_tag_item_web_style.dart @@ -0,0 +1,26 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class AutoCompleteTagItemWebStyle { + static const double paddingTop = 6.0; + static const double paddingEnd = 40.0; + static const double labelPaddingHorizontal = 4.0; + static const EdgeInsetsGeometry collapsedPadding = EdgeInsetsDirectional.symmetric(vertical: 5, horizontal: 8); + + static const EdgeInsetsGeometry marginCollapsed = EdgeInsets.only(top: 8.0); + + static const BorderRadius shapeBorderRadius = BorderRadius.all(Radius.circular(10.0)); + + static const Color collapsedBackgroundColor = AppColor.colorEmailAddressTag; + + static const TextStyle labelTextStyle = TextStyle( + color: Colors.black, + fontSize: 17, + fontWeight: FontWeight.w400 + ); + static const TextStyle collapsedTextStyle = TextStyle( + color: Colors.black, + fontSize: 17, + fontWeight: FontWeight.w400 + ); +} \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart new file mode 100644 index 000000000..7e92066f6 --- /dev/null +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart @@ -0,0 +1,122 @@ + +import 'package:core/core.dart'; +import 'package:core/utils/direction_utils.dart'; +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:model/extensions/email_address_extension.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/autocomplete_tag_item_web_style.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/avatar_tag_item_widget.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart'; + +class AutoCompleteTagItemWidgetWeb extends StatelessWidget { + + final bool isCollapsed; + final bool isLatestTagFocused; + final bool isLatestEmail; + final AdvancedSearchFilterField field; + final EmailAddress currentEmailAddress; + final List currentListEmailAddress; + final List collapsedListEmailAddress; + final OnDeleteTagAction? onDeleteTagAction; + final OnShowFullListEmailAddressAction? onShowFullAction; + + final _imagePaths = Get.find(); + + AutoCompleteTagItemWidgetWeb({ + Key? key, + required this.field, + required this.currentEmailAddress, + required this.currentListEmailAddress, + required this.collapsedListEmailAddress, + this.isCollapsed = false, + this.isLatestTagFocused = false, + this.isLatestEmail = false, + this.onDeleteTagAction, + this.onShowFullAction, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Stack( + alignment: AlignmentDirectional.centerEnd, + children: [ + Padding( + padding: EdgeInsetsDirectional.only( + top: AutoCompleteTagItemWebStyle.paddingTop, + end: isCollapsed ? AutoCompleteTagItemWebStyle.paddingEnd : 0, + ), + child: InkWell( + onTap: () => isCollapsed + ? null + : onShowFullAction?.call(field), + child: MouseRegion( + cursor: SystemMouseCursors.grab, + child: Chip( + labelPadding: EdgeInsetsDirectional.symmetric( + horizontal: AutoCompleteTagItemWebStyle.labelPaddingHorizontal, + vertical: DirectionUtils.isDirectionRTLByHasAnyRtl(currentEmailAddress.asString()) ? 0 : 2 + ), + label: Text( + currentEmailAddress.asString(), + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + softWrap: CommonTextStyle.defaultSoftWrap, + ), + deleteIcon: SvgPicture.asset( + _imagePaths.icClose, + fit: BoxFit.fill, + ), + labelStyle: AutoCompleteTagItemWebStyle.labelTextStyle, + backgroundColor: _getTagBackgroundColor(), + shape: RoundedRectangleBorder( + borderRadius: AutoCompleteTagItemWebStyle.shapeBorderRadius, + side: _getTagBorderSide(), + ), + avatar: currentEmailAddress.emailAddress.isNotEmpty + ? AvatarTagItemWidget(tagName: currentEmailAddress.emailAddress) + : null, + onDeleted: () => onDeleteTagAction?.call(currentEmailAddress), + ), + ), + ), + ), + if (isCollapsed) + TMailButtonWidget.fromText( + margin: AutoCompleteTagItemWebStyle.marginCollapsed, + text: '+${currentListEmailAddress.length - collapsedListEmailAddress.length}', + onTapActionCallback: () => onShowFullAction?.call(field), + borderRadius: 10, + textStyle: AutoCompleteTagItemWebStyle.collapsedTextStyle, + padding: AutoCompleteTagItemWebStyle.collapsedPadding, + backgroundColor: AutoCompleteTagItemWebStyle.collapsedBackgroundColor, + ) + ], + ); + } + + Color _getTagBackgroundColor() { + if (isLatestTagFocused && isLatestEmail) { + return AppColor.colorItemRecipientSelected; + } else if (GetUtils.isEmail(currentEmailAddress.emailAddress)) { + return AppColor.colorEmailAddressTag; + } else { + return Colors.white; + } + } + + BorderSide _getTagBorderSide() { + if (isLatestTagFocused && isLatestEmail) { + return const BorderSide(width: 1, color: AppColor.primaryColor); + } else if (GetUtils.isEmail(currentEmailAddress.emailAddress)) { + return BorderSide.none; + } else { + return const BorderSide( + width: 1, + color: AppColor.colorBorderEmailAddressInvalid + ); + } + } +}