TF-3002 [WEB] Apply new design for SearchFilterButton
This commit is contained in:
dab246
+133
@@ -0,0 +1,133 @@
|
||||
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/views/button/tmail_button_widget.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:jmap_dart_client/jmap/core/user_name.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_receive_time_type.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_sort_order_type.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/search_filter_button_style.dart';
|
||||
|
||||
typedef OnSelectSearchFilterAction = Function(
|
||||
BuildContext context,
|
||||
QuickSearchFilter searchFilter,
|
||||
{RelativeRect? buttonPosition});
|
||||
|
||||
class SearchFilterButton extends StatelessWidget {
|
||||
|
||||
final QuickSearchFilter searchFilter;
|
||||
final bool isSelected;
|
||||
final ImagePaths imagePaths;
|
||||
final EmailReceiveTimeType? receiveTimeType;
|
||||
final EmailSortOrderType? sortOrderType;
|
||||
final DateTime? startDate;
|
||||
final DateTime? endDate;
|
||||
final Set<String>? listAddressOfFrom;
|
||||
final UserName? userName;
|
||||
final Color? backgroundColor;
|
||||
final OnSelectSearchFilterAction? onSelectSearchFilterAction;
|
||||
|
||||
const SearchFilterButton({
|
||||
super.key,
|
||||
required this.searchFilter,
|
||||
required this.imagePaths,
|
||||
this.isSelected = false,
|
||||
this.receiveTimeType,
|
||||
this.sortOrderType,
|
||||
this.startDate,
|
||||
this.endDate,
|
||||
this.listAddressOfFrom,
|
||||
this.userName,
|
||||
this.backgroundColor,
|
||||
this.onSelectSearchFilterAction,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final childItem = Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: SearchFilterButtonStyle.borderRadius,
|
||||
color: backgroundColor ?? searchFilter.getBackgroundColor(isFilterSelected: isSelected)),
|
||||
padding: SearchFilterButtonStyle.buttonPadding,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SvgPicture.asset(
|
||||
searchFilter.getIcon(imagePaths, isSelected: isSelected),
|
||||
width: SearchFilterButtonStyle.iconSize,
|
||||
height: SearchFilterButtonStyle.iconSize,
|
||||
colorFilter: searchFilter.getIconColor(isSelected: isSelected).asFilter(),
|
||||
fit: BoxFit.fill),
|
||||
const SizedBox(width: SearchFilterButtonStyle.spaceSize),
|
||||
Text(
|
||||
searchFilter.getTitle(
|
||||
context,
|
||||
receiveTimeType: receiveTimeType,
|
||||
startDate: startDate,
|
||||
endDate: startDate,
|
||||
sortOrderType: sortOrderType,
|
||||
listAddressOfFrom: listAddressOfFrom,
|
||||
userName: userName),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: SearchFilterButtonStyle.titleStyle,
|
||||
),
|
||||
if (searchFilter.isArrowDownIconSupported())
|
||||
Padding(
|
||||
padding: SearchFilterButtonStyle.elementPadding,
|
||||
child: SvgPicture.asset(
|
||||
imagePaths.icDropDown,
|
||||
width: SearchFilterButtonStyle.iconSize,
|
||||
height: SearchFilterButtonStyle.iconSize,
|
||||
colorFilter: AppColor.colorTextBody.asFilter(),
|
||||
fit: BoxFit.fill),
|
||||
),
|
||||
if (isSelected)
|
||||
TMailButtonWidget.fromIcon(
|
||||
icon: imagePaths.icDeleteSelection,
|
||||
iconSize: SearchFilterButtonStyle.deleteIconSize,
|
||||
iconColor: AppColor.colorTextBody,
|
||||
padding: EdgeInsets.zero,
|
||||
backgroundColor: Colors.transparent,
|
||||
margin: SearchFilterButtonStyle.elementPadding,
|
||||
),
|
||||
]
|
||||
)
|
||||
);
|
||||
|
||||
if (onSelectSearchFilterAction != null) {
|
||||
return Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
onTap: searchFilter.isOnTapWithPositionActionSupported()
|
||||
? null
|
||||
: () => _onTapAction(context),
|
||||
onTapDown: searchFilter.isOnTapWithPositionActionSupported()
|
||||
? (details) => _onTapDownAction(context, details)
|
||||
: null,
|
||||
borderRadius: SearchFilterButtonStyle.borderRadius,
|
||||
child: childItem),
|
||||
);
|
||||
} else {
|
||||
return childItem;
|
||||
}
|
||||
}
|
||||
|
||||
void _onTapAction(BuildContext context) {
|
||||
onSelectSearchFilterAction?.call(context, searchFilter);
|
||||
}
|
||||
|
||||
void _onTapDownAction(BuildContext context, TapDownDetails details) {
|
||||
final screenSize = MediaQuery.sizeOf(context);
|
||||
final offset = details.globalPosition;
|
||||
final position = RelativeRect.fromLTRB(
|
||||
offset.dx,
|
||||
offset.dy,
|
||||
screenSize.width - offset.dx,
|
||||
screenSize.height - offset.dy);
|
||||
|
||||
onSelectSearchFilterAction?.call(context, searchFilter, buttonPosition: position);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/utils/style_utils.dart';
|
||||
import 'package:core/presentation/views/button/icon_button_web.dart';
|
||||
import 'package:core/presentation/views/quick_search/quick_search_input_form.dart';
|
||||
import 'package:core/utils/direction_utils.dart';
|
||||
@@ -23,6 +22,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/ad
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/quick_search/contact_quick_search_item.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/quick_search/email_quick_search_item_tile_widget.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/quick_search/recent_search_item_tile_widget.dart';
|
||||
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/search_filters/search_filter_button.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
|
||||
class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
|
||||
@@ -65,9 +65,13 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
|
||||
borderRadius: BorderRadius.all(Radius.circular(16)),
|
||||
),
|
||||
debounceDuration: const Duration(milliseconds: 300),
|
||||
listActionButton: QuickSearchFilter.values,
|
||||
listActionButton: const [
|
||||
QuickSearchFilter.hasAttachment,
|
||||
QuickSearchFilter.last7Days,
|
||||
QuickSearchFilter.fromMe,
|
||||
],
|
||||
actionButtonBuilder: (context, filterAction) {
|
||||
if (filterAction is QuickSearchFilter && filterAction != QuickSearchFilter.sortBy) {
|
||||
if (filterAction is QuickSearchFilter) {
|
||||
return buildListButtonForQuickSearchForm(context, filterAction);
|
||||
} else {
|
||||
return const SizedBox.shrink();
|
||||
@@ -217,34 +221,15 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildListButtonForQuickSearchForm(BuildContext context, QuickSearchFilter filter) {
|
||||
Widget buildListButtonForQuickSearchForm(BuildContext context, QuickSearchFilter searchFilter) {
|
||||
return Obx(() {
|
||||
final isFilterSelected = filter.isApplied(_searchController.listFilterOnSuggestionForm);
|
||||
final isSelected = searchFilter.isApplied(_searchController.listFilterOnSuggestionForm);
|
||||
|
||||
return Chip(
|
||||
labelPadding: const EdgeInsetsDirectional.only(
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
end: 10,
|
||||
),
|
||||
label: Text(
|
||||
filter.getName(context),
|
||||
maxLines: 1,
|
||||
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||
style: filter.getTextStyle(isFilterSelected: isFilterSelected),
|
||||
),
|
||||
avatar: SvgPicture.asset(
|
||||
filter.getIcon(_imagePaths, isFilterSelected: isFilterSelected),
|
||||
width: 16,
|
||||
height: 16,
|
||||
fit: BoxFit.fill),
|
||||
labelStyle: filter.getTextStyle(isFilterSelected: isFilterSelected),
|
||||
backgroundColor: filter.getBackgroundColor(isFilterSelected: isFilterSelected),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(10)),
|
||||
side: BorderSide(color: filter.getBackgroundColor(isFilterSelected: isFilterSelected)),
|
||||
),
|
||||
return SearchFilterButton(
|
||||
searchFilter: searchFilter,
|
||||
imagePaths: _imagePaths,
|
||||
isSelected: isSelected,
|
||||
backgroundColor: searchFilter.getSuggestionBackgroundColor(isFilterSelected: isSelected),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user