diff --git a/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart b/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart new file mode 100644 index 000000000..0457b033b --- /dev/null +++ b/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart @@ -0,0 +1,39 @@ +import 'package:dropdown_button2/dropdown_button2.dart'; +import 'package:flutter/material.dart'; + +class DateSelectionDropdownButtonStyles { + static const double height = 44.0; + static const double borderWidth = 0.5; + static const double dropdownMaxHeight = 200.0; + static const double scrollbarThickness = 6.0; + static const double checkedIconSize = 20.0; + + static const int dropdownElevation = 4; + + static const Offset dropdownOffset = Offset(0.0, -8.0); + + static const EdgeInsetsGeometry padding = EdgeInsets.only( + left: 12, + right: 10 + ); + + static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(10)); + + static const Radius scrollbarRadius = Radius.circular(40); + + static const BoxDecoration dropdownDecoration = BoxDecoration( + borderRadius: borderRadius, + color: Colors.white, + ); + + static const TextStyle selectedValueTexStyle = TextStyle( + fontSize: 16, + fontWeight: FontWeight.w400, + color: Colors.black, + ); + + static const MenuItemStyleData menuItemStyleData = MenuItemStyleData( + height: height, + padding: EdgeInsets.symmetric(horizontal: 12), + ); +} \ No newline at end of file diff --git a/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart b/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart new file mode 100644 index 000000000..ed470794a --- /dev/null +++ b/lib/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart @@ -0,0 +1,24 @@ +import 'package:flutter/material.dart'; + +class DateSelectionFieldStyles { + static const double height = 44.0; + static const double titleWidth = 112.0; + static const double titleSpace = 12.0; + static const double titleSpaceMobile = 8.0; + static const double icCalendarSize = 24.0; + static const double icCalenderSpace = 10.0; + static const double borderWidthMobile = 0.5; + static const double radius = 12.0; + + static const EdgeInsetsGeometry padding = EdgeInsets.symmetric( + vertical: 8.0 + ); + static const EdgeInsetsGeometry paddingMobile = EdgeInsets.symmetric( + vertical: 7.0 + ); + static const EdgeInsetsGeometry inputFieldMobilePadding = EdgeInsets.symmetric( + horizontal: 12.0 + ); + + static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(12)); +} \ No newline at end of file diff --git a/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_dropdown_button.dart b/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_dropdown_button.dart new file mode 100644 index 000000000..4d60c80f4 --- /dev/null +++ b/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_dropdown_button.dart @@ -0,0 +1,139 @@ +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:dropdown_button2/dropdown_button2.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:pointer_interceptor/pointer_interceptor.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/styles/date_selection_field/date_selection_dropdown_button_styles.dart'; + +typedef OnRecoveryTimeSelected = void Function(EmailRecoveryTimeType recoveryTime); + +class DateSelectionDropDownButton extends StatelessWidget { + + final ImagePaths imagePaths; + final List items; + final DateTime? startDate; + final DateTime? endDate; + final EmailRecoveryTimeType? recoveryTimeSelected; + final OnRecoveryTimeSelected? onRecoveryTimeSelected; + + const DateSelectionDropDownButton({ + super.key, + required this.imagePaths, + required this.items, + this.startDate, + this.endDate, + this.recoveryTimeSelected, + this.onRecoveryTimeSelected, + }); + + @override + Widget build(BuildContext context) { + return DropdownButtonHideUnderline( + child: PointerInterceptor( + child: DropdownButton2( + isExpanded: true, + items: items + .map((item) => _buildItemMenu(context, item)) + .toList(), + value: recoveryTimeSelected, + customButton: Container( + height: DateSelectionDropdownButtonStyles.height, + decoration: BoxDecoration( + borderRadius: DateSelectionDropdownButtonStyles.borderRadius, + border: Border.all( + color: AppColor.colorInputBorderCreateMailbox, + width: DateSelectionDropdownButtonStyles.borderWidth, + ), + color: AppColor.colorInputBackgroundCreateMailbox + ), + padding: DateSelectionDropdownButtonStyles.padding, + child: Row( + children: [ + Expanded( + child: Text( + recoveryTimeSelected?.getTitle(context, startDate: startDate, endDate: endDate) ?? '', + style: DateSelectionDropdownButtonStyles.selectedValueTexStyle, + maxLines: 1, + softWrap: CommonTextStyle.defaultSoftWrap, + overflow: CommonTextStyle.defaultTextOverFlow, + ) + ), + SvgPicture.asset(imagePaths.icDropDown) + ] + ), + ), + onChanged: (value) { + if (value != null) { + onRecoveryTimeSelected?.call(value); + } + }, + buttonStyleData: ButtonStyleData( + height: DateSelectionDropdownButtonStyles.height, + padding: DateSelectionDropdownButtonStyles.padding, + decoration: BoxDecoration( + borderRadius: DateSelectionDropdownButtonStyles.borderRadius, + border: Border.all( + color: AppColor.colorInputBorderCreateMailbox, + width: DateSelectionDropdownButtonStyles.borderWidth, + ), + color: AppColor.colorInputBackgroundCreateMailbox + ) + ), + dropdownStyleData: DropdownStyleData( + maxHeight: DateSelectionDropdownButtonStyles.dropdownMaxHeight, + decoration: DateSelectionDropdownButtonStyles.dropdownDecoration, + elevation: DateSelectionDropdownButtonStyles.dropdownElevation, + offset: DateSelectionDropdownButtonStyles.dropdownOffset, + scrollbarTheme: ScrollbarThemeData( + radius: DateSelectionDropdownButtonStyles.scrollbarRadius, + thickness: MaterialStateProperty.all(DateSelectionDropdownButtonStyles.scrollbarThickness), + thumbVisibility: MaterialStateProperty.all(true), + ), + ), + iconStyleData: IconStyleData( + icon: SvgPicture.asset(imagePaths.icDropDown), + ), + menuItemStyleData: DateSelectionDropdownButtonStyles.menuItemStyleData + ), + ), + ); + } + + DropdownMenuItem _buildItemMenu( + BuildContext context, + EmailRecoveryTimeType recoveryTime + ) { + return DropdownMenuItem( + value: recoveryTime, + child: PointerInterceptor( + child: Container( + color: Colors.transparent, + height: DateSelectionDropdownButtonStyles.height, + child: Row( + children: [ + Expanded( + child: Text( + recoveryTime.getTitle(context), + style: DateSelectionDropdownButtonStyles.selectedValueTexStyle, + maxLines: 1, + softWrap: CommonTextStyle.defaultSoftWrap, + overflow: CommonTextStyle.defaultTextOverFlow, + ) + ), + if (recoveryTime == recoveryTimeSelected) + SvgPicture.asset( + imagePaths.icChecked, + width: DateSelectionDropdownButtonStyles.checkedIconSize, + height: DateSelectionDropdownButtonStyles.checkedIconSize, + fit: BoxFit.fill + ) + ] + ), + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_field_mobile_widget.dart b/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_field_mobile_widget.dart new file mode 100644 index 000000000..dae80f145 --- /dev/null +++ b/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_field_mobile_widget.dart @@ -0,0 +1,85 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart'; + +class DateSelectionFieldMobileWidget extends StatelessWidget { + final EmailRecoveryField field; + final EmailRecoveryTimeType recoveryTimeSelected; + final ImagePaths imagePaths; + final VoidCallback? onTap; + final DateTime? startDate; + final DateTime? endDate; + + const DateSelectionFieldMobileWidget({ + super.key, + required this.field, + required this.recoveryTimeSelected, + required this.imagePaths, + this.onTap, + this.startDate, + this.endDate, + }); + + @override + Widget build(BuildContext context) { + return Padding( + padding: DateSelectionFieldStyles.paddingMobile, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + field.getTitle(context), + style: field.getTitleTextStyle(), + ), + const SizedBox(height: DateSelectionFieldStyles.titleSpaceMobile), + Container( + width: double.infinity, + height: DateSelectionFieldStyles.height, + decoration: const ShapeDecoration( + color: AppColor.loginTextFieldBackgroundColor, + shape: RoundedRectangleBorder( + side: BorderSide( + width: DateSelectionFieldStyles.borderWidthMobile, + color: AppColor.colorInputBorderCreateMailbox + ), + borderRadius: DateSelectionFieldStyles.borderRadius + ) + ), + child: Material( + color: Colors.transparent, + child: InkWell( + radius: DateSelectionFieldStyles.radius, + onTap: onTap, + child: Padding( + padding: DateSelectionFieldStyles.inputFieldMobilePadding, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + recoveryTimeSelected.getTitle( + context, + startDate: startDate, + endDate: endDate + ), + style: field.getHintTextStyle(), + ), + SvgPicture.asset( + imagePaths.icCalendar, + width: DateSelectionFieldStyles.icCalendarSize, + height: DateSelectionFieldStyles.icCalendarSize, + ) + ], + ), + ), + ), + ), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_field_web_widget.dart b/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_field_web_widget.dart new file mode 100644 index 000000000..d5e8acd02 --- /dev/null +++ b/lib/features/email_recovery/presentation/widgets/date_selection_field/date_selection_field_web_widget.dart @@ -0,0 +1,77 @@ +import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/utils/responsive_utils.dart'; +import 'package:core/presentation/views/button/icon_button_web.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_time_type.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/styles/date_selection_field/date_selection_field_styles.dart'; +import 'package:tmail_ui_user/features/email_recovery/presentation/widgets/date_selection_field/date_selection_dropdown_button.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class DateSelectionFieldWebWidget extends StatelessWidget { + final EmailRecoveryField field; + final ResponsiveUtils responsiveUtils; + final ImagePaths imagePaths; + final DateTime? startDate; + final DateTime? endDate; + final EmailRecoveryTimeType? recoveryTimeSelected; + final OnRecoveryTimeSelected? onRecoveryTimeSelected; + final VoidCallback? onTapCalendar; + + const DateSelectionFieldWebWidget({ + super.key, + required this.field, + required this.responsiveUtils, + required this.imagePaths, + this.startDate, + this.endDate, + this.recoveryTimeSelected, + this.onRecoveryTimeSelected, + this.onTapCalendar, + }); + + @override + Widget build(BuildContext context) { + return Padding( + padding: DateSelectionFieldStyles.padding, + child: SizedBox( + height: DateSelectionFieldStyles.height, + child: Row( + children: [ + SizedBox( + width: DateSelectionFieldStyles.titleWidth, + child: Text( + field.getTitle(context), + style: field.getTitleTextStyle(), + ), + ), + const SizedBox(width: DateSelectionFieldStyles.titleSpace), + Expanded( + child: DateSelectionDropDownButton( + imagePaths: imagePaths, + startDate: startDate, + endDate: endDate, + recoveryTimeSelected: recoveryTimeSelected, + onRecoveryTimeSelected: onRecoveryTimeSelected, + items: field.getSupportedTimeTypes(), + ), + ), + const SizedBox(width: DateSelectionFieldStyles.icCalenderSpace), + buildIconWeb( + icon: SvgPicture.asset( + imagePaths.icCalendarSB, + width: DateSelectionFieldStyles.icCalendarSize, + height: DateSelectionFieldStyles.icCalendarSize, + fit: BoxFit.fill, + ), + tooltip: AppLocalizations.of(context).selectDate, + iconPadding: EdgeInsets.zero, + onTap: onTapCalendar + ) + ], + ), + ), + ); + } +} \ No newline at end of file