diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 1b219867c..7f5ef0877 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -260,12 +260,14 @@ extension AppColor on Color { static const gray424244 = Color(0xFF424244); static const redFF3347 = Color(0xFFFF3347); static const gray686E76 = Color(0xFF686E76); + static const lightGrayEBEDF0 = Color(0xFFEBEDF0); static const textSecondary = Color(0xFF1C1B1F); static const profileMenuDivider = Color(0xFF1D192B); static const popupMenuItemHovered = Color(0xFFF8F8F8); static const secondaryContrastText = Color(0xFFFFFFFF); static const primaryLinShare = Color(0xFF007AFF); static const lightGrayEAEDF2 = Color(0xFFEAEDF2); + static const lightIconTertiary = Color(0xFFB8C1CC); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/views/button/tmail_button_widget.dart b/core/lib/presentation/views/button/tmail_button_widget.dart index 67e5afdde..bfda1558c 100644 --- a/core/lib/presentation/views/button/tmail_button_widget.dart +++ b/core/lib/presentation/views/button/tmail_button_widget.dart @@ -44,6 +44,7 @@ class TMailButtonWidget extends StatelessWidget { final Color? hoverColor; final TextOverflow? textOverflow; final Alignment? alignment; + final bool isTextExpanded; const TMailButtonWidget({ super.key, @@ -81,6 +82,7 @@ class TMailButtonWidget extends StatelessWidget { this.hoverColor, this.textOverflow, this.alignment, + this.isTextExpanded = false, }); factory TMailButtonWidget.fromIcon({ @@ -163,6 +165,7 @@ class TMailButtonWidget extends StatelessWidget { Color? hoverColor, TextOverflow? textOverflow, Alignment? alignment, + bool isTextExpanded = false, }) { return TMailButtonWidget( key: key, @@ -189,48 +192,63 @@ class TMailButtonWidget extends StatelessWidget { hoverColor: hoverColor, textOverflow: textOverflow, alignment: alignment, + isTextExpanded: isTextExpanded, ); } @override Widget build(BuildContext context) { Widget childWidget; + Widget? textWidget; + Widget? iconWidget; + Widget? trailingIconWidget; + if (text.isNotEmpty) { + textWidget = Text( + text, + textAlign: textAlign, + style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( + fontSize: 12, + color: AppColor.colorTextButtonHeaderThread, + ), + maxLines: maxLines, + overflow: textOverflow ?? + (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), + softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, + ); + } + + if (icon != null) { + iconWidget = SvgPicture.asset( + icon!, + width: iconSize, + height: iconSize, + fit: BoxFit.fill, + colorFilter: iconColor?.asFilter(), + ); + } + + if (trailingIcon != null) { + trailingIconWidget = Padding( + padding: EdgeInsetsDirectional.only(top: iconSpace), + child: SvgPicture.asset( + trailingIcon!, + width: trailingIconSize, + height: trailingIconSize, + fit: BoxFit.fill, + colorFilter: trailingIconColor?.asFilter(), + ), + ); + } if (icon != null && text.isNotEmpty) { if (verticalDirection) { childWidget = Column( mainAxisSize: mainAxisSize, children: [ - SvgPicture.asset( - icon!, - width: iconSize, - height: iconSize, - fit: BoxFit.fill, - colorFilter: iconColor?.asFilter() - ), + iconWidget!, SizedBox(height: iconSpace), - Text( - text, - textAlign: textAlign, - style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 12, - color: AppColor.colorTextButtonHeaderThread - ), - maxLines: maxLines, - overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), - softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, - ), - if (trailingIcon != null) - Padding( - padding: EdgeInsetsDirectional.only(top: iconSpace), - child: SvgPicture.asset( - trailingIcon!, - width: trailingIconSize, - height: trailingIconSize, - fit: BoxFit.fill, - colorFilter: trailingIconColor?.asFilter() - ), - ), + textWidget!, + if (trailingIcon != null) trailingIconWidget!, ] ); } else { @@ -239,51 +257,15 @@ class TMailButtonWidget extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: mainAxisSize, children: [ - SvgPicture.asset( - icon!, - width: iconSize, - height: iconSize, - fit: BoxFit.fill, - colorFilter: iconColor?.asFilter() - ), + iconWidget!, SizedBox(width: iconSpace), if (flexibleText) - Flexible( - child: Text( - text, - textAlign: textAlign, - style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 12, - color: AppColor.colorTextButtonHeaderThread - ), - maxLines: maxLines, - overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), - softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, - ), - ) + Flexible(child: textWidget!) + else if (isTextExpanded) + Expanded(child: textWidget!) else - Text( - text, - textAlign: textAlign, - style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 12, - color: AppColor.colorTextButtonHeaderThread - ), - maxLines: maxLines, - overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), - softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, - ), - if (trailingIcon != null) - Padding( - padding: EdgeInsetsDirectional.only(start: iconSpace), - child: SvgPicture.asset( - trailingIcon!, - width: trailingIconSize, - height: trailingIconSize, - fit: BoxFit.fill, - colorFilter: trailingIconColor?.asFilter() - ), - ), + textWidget!, + if (trailingIcon != null) trailingIconWidget!, ] ); } else { @@ -292,40 +274,14 @@ class TMailButtonWidget extends StatelessWidget { mainAxisSize: mainAxisSize, children: [ if (flexibleText) - Flexible( - child: Text( - text, - textAlign: textAlign, - style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 12, - color: AppColor.colorTextButtonHeaderThread - ), - maxLines: maxLines, - overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), - softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, - ), - ) + Flexible(child: textWidget!) + else if (isTextExpanded) + Expanded(child: textWidget!) else - Text( - text, - textAlign: textAlign, - style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 12, - color: AppColor.colorTextButtonHeaderThread - ), - maxLines: maxLines, - overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), - softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, - ), + textWidget!, SizedBox(width: iconSpace), if (!isLoading) - SvgPicture.asset( - icon!, - width: iconSize, - height: iconSize, - fit: BoxFit.fill, - colorFilter: iconColor?.asFilter() - ) + iconWidget! else SizedBox( width: iconSize, @@ -340,25 +296,9 @@ class TMailButtonWidget extends StatelessWidget { } } } else if (icon != null) { - childWidget = SvgPicture.asset( - icon!, - width: iconSize, - height: iconSize, - fit: BoxFit.fill, - colorFilter: iconColor?.asFilter() - ); + childWidget = iconWidget!; } else { - childWidget = Text( - text, - textAlign: textAlign, - style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 12, - color: AppColor.colorTextButtonHeaderThread - ), - maxLines: maxLines, - overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null), - softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null, - ); + childWidget = textWidget!; } return TMailContainerWidget( diff --git a/lib/features/base/widget/tmail_drop_down_widget.dart b/lib/features/base/widget/tmail_drop_down_widget.dart new file mode 100644 index 000000000..3aa82a9ee --- /dev/null +++ b/lib/features/base/widget/tmail_drop_down_widget.dart @@ -0,0 +1,47 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; +import 'package:flutter/material.dart'; + +class TMailDropDownWidget extends StatelessWidget { + + final String text; + final String dropDownIcon; + final VoidCallback onTap; + final double? width; + final Color? backgroundColor; + + const TMailDropDownWidget({ + super.key, + required this.text, + required this.dropDownIcon, + required this.onTap, + this.width, + this.backgroundColor, + }); + + @override + Widget build(BuildContext context) { + return TMailButtonWidget( + text: text, + icon: dropDownIcon, + iconAlignment: TextDirection.rtl, + width: width, + height: 40, + borderRadius: 10, + backgroundColor: backgroundColor ?? Colors.transparent, + iconSize: 20, + iconColor: AppColor.lightIconTertiary, + padding: const EdgeInsetsDirectional.only( + start: 12, + end: 8, + top: 8, + bottom: 8, + ), + textStyle: ThemeUtils.textStyleBodyBody3(color: Colors.black), + border: Border.all(width: 1, color: AppColor.m3Neutral90), + isTextExpanded: true, + onTapActionCallback: onTap, + ); + } +} diff --git a/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart b/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart index acd66db89..569f23965 100644 --- a/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart +++ b/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart @@ -22,28 +22,40 @@ class SettingDetailViewBuilder extends StatelessWidget { @override Widget build(BuildContext context) { - return Scaffold( - backgroundColor: SettingsUtils.getBackgroundColor(context, responsiveUtils), - body: GestureDetector( - onTap: onTapGestureDetector, - child: Container( - width: double.infinity, - height: double.infinity, - color: SettingsUtils.getContentBackgroundColor( - context, - responsiveUtils, - backgroundColor: backgroundColor, - ), - decoration: SettingsUtils.getBoxDecorationForContent( - context, - responsiveUtils, - backgroundColor: backgroundColor, - ), - margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils), - padding: padding, - child: child, - ), + Widget containerWidget = Container( + width: double.infinity, + height: double.infinity, + color: SettingsUtils.getContentBackgroundColor( + context, + responsiveUtils, + backgroundColor: backgroundColor, ), + decoration: SettingsUtils.getBoxDecorationForContent( + context, + responsiveUtils, + backgroundColor: backgroundColor, + ), + margin: SettingsUtils.getMarginSettingDetailsView( + context, + responsiveUtils, + ), + padding: padding, + child: child, + ); + + if (onTapGestureDetector != null) { + containerWidget = GestureDetector( + onTap: onTapGestureDetector, + child: containerWidget, + ); + } + + return Scaffold( + backgroundColor: SettingsUtils.getBackgroundColor( + context, + responsiveUtils, + ), + body: containerWidget, ); } } \ No newline at end of file diff --git a/lib/features/manage_account/presentation/language_and_region/language_and_region_controller.dart b/lib/features/manage_account/presentation/language_and_region/language_and_region_controller.dart index 069183396..b3706d158 100644 --- a/lib/features/manage_account/presentation/language_and_region/language_and_region_controller.dart +++ b/lib/features/manage_account/presentation/language_and_region/language_and_region_controller.dart @@ -21,7 +21,6 @@ class LanguageAndRegionController extends BaseController { final listSupportedLanguages = [].obs; final languageSelected = LocalizationService.defaultLocale.obs; - final isLanguageMenuOverlayOpen = RxBool(false); final manageAccountDashBoardController = Get.find(); @@ -57,7 +56,6 @@ class LanguageAndRegionController extends BaseController { } void selectLanguage(Locale? selectedLocale) { - isLanguageMenuOverlayOpen.value = false; languageSelected.value = selectedLocale ?? LocalizationService.defaultLocale; _saveLanguage(languageSelected.value); } @@ -77,8 +75,4 @@ class LanguageAndRegionController extends BaseController { localeCurrent, )); } - - void toggleLanguageMenuOverlay() { - isLanguageMenuOverlayOpen.toggle(); - } } \ No newline at end of file diff --git a/lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart b/lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart index 3ba0f903b..02b8535a2 100644 --- a/lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart +++ b/lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart @@ -1,10 +1,11 @@ -import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; import 'package:flutter/material.dart'; import 'package:flutter_portal/flutter_portal.dart'; import 'package:get/get.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart'; @@ -17,27 +18,42 @@ class LanguageAndRegionView extends GetWidget { return Portal( child: SettingDetailViewBuilder( responsiveUtils: controller.responsiveUtils, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (controller.responsiveUtils.isWebDesktop(context)) - ...[ - const SettingHeaderWidget(menuItem: AccountMenuItem.languageAndRegion), - const Divider(height: 1, color: AppColor.colorDividerHeaderSetting), - ] - else - const SettingExplanationWidget(menuItem: AccountMenuItem.languageAndRegion), - Expanded( - child: Padding( - padding: const EdgeInsetsDirectional.only( - start: 16, - top: 24, - end: 16, + child: Container( + color: SettingsUtils.getContentBackgroundColor( + context, + controller.responsiveUtils, + ), + decoration: SettingsUtils.getBoxDecorationForContent( + context, + controller.responsiveUtils, + ), + width: double.infinity, + padding: controller.responsiveUtils.isDesktop(context) + ? const EdgeInsets.symmetric(vertical: 30, horizontal: 22) + : null, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (controller.responsiveUtils.isWebDesktop(context)) + SettingHeaderWidget( + menuItem: AccountMenuItem.languageAndRegion, + textStyle: ThemeUtils.textStyleInter600().copyWith( + color: Colors.black.withOpacity(0.9), + ), + padding: EdgeInsets.zero, + ) + else + const SettingExplanationWidget( + menuItem: AccountMenuItem.languageAndRegion, + ), + const Expanded( + child: Padding( + padding: EdgeInsets.only(top: 39), + child: ChangeLanguageButtonWidget(), ), - child: ChangeLanguageButtonWidget(), ), - ), - ], + ], + ), ), ), ); diff --git a/lib/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.dart b/lib/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.dart index f75bb0556..3f71e29b1 100644 --- a/lib/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.dart +++ b/lib/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.dart @@ -2,131 +2,130 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; -import 'package:core/presentation/utils/style_utils.dart'; import 'package:core/presentation/utils/theme_utils.dart'; -import 'package:core/presentation/views/responsive/responsive_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter_portal/flutter_portal.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/base/widget/tmail_drop_down_widget.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/extensions/locale_extension.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; -class ChangeLanguageButtonWidget extends StatelessWidget { +class ChangeLanguageButtonWidget extends StatefulWidget { - final _controller = Get.find(); + const ChangeLanguageButtonWidget({Key? key}) : super(key: key); + + @override + State createState() => _ChangeLanguageButtonWidgetState(); +} + +class _ChangeLanguageButtonWidgetState extends State { + + final _languageAndRegionController = Get.find(); final _responsiveUtils = Get.find(); final _imagePaths = Get.find(); - ChangeLanguageButtonWidget({Key? key}) : super(key: key); + final ValueNotifier _languageMenuIsVisibleNotifier = + ValueNotifier(false); @override Widget build(BuildContext context) { - return LayoutBuilder(builder: (context, constraints) { - return ResponsiveWidget( - responsiveUtils: _responsiveUtils, - mobile: Scaffold( - body: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - _buildTitleLanguageWidget(context), - const SizedBox(height: 8), - _buildLanguageMenu(context, constraints.maxWidth) - ] - ) - ), - desktop: Column( + if (_responsiveUtils.isDesktop(context)) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + _buildTitleLanguageWidget(context), + const SizedBox(height: 15), + SizedBox( + width: 385, + child: _buildLanguageMenu(context, 385), + ), + ], + ); + } else { + return Scaffold( + body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildTitleLanguageWidget(context), const SizedBox(height: 8), - SizedBox( - width: constraints.maxWidth / 2, - child: _buildLanguageMenu(context, constraints.maxWidth / 2) - ), - ] - ) + _buildLanguageMenu(context, double.infinity), + ], + ), ); - }); + } } Widget _buildTitleLanguageWidget(BuildContext context) { return Text( AppLocalizations.of(context).language, - style: ThemeUtils.defaultTextStyleInterFont.copyWith( + style: ThemeUtils.textStyleInter400.copyWith( fontSize: 14, - fontWeight: FontWeight.normal, - color: AppColor.colorContentEmail - ) + height: 21.01 / 14, + letterSpacing: -0.15, + color: AppColor.gray424244.withOpacity(0.64), + ), ); } Widget _buildLanguageMenu(BuildContext context, double maxWidth) { - return Obx(() => PortalTarget( - visible: _controller.isLanguageMenuOverlayOpen.isTrue, - portalFollower: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () => _controller.toggleLanguageMenuOverlay() - ), - child: PortalTarget( - anchor: const Aligned( - follower: Alignment.topRight, - target: Alignment.bottomRight, - widthFactor: 1, - backup: Aligned( - follower: Alignment.topRight, - target: Alignment.bottomRight, - widthFactor: 1, + return ValueListenableBuilder( + valueListenable: _languageMenuIsVisibleNotifier, + builder: (context, isVisible, child) { + return PortalTarget( + visible: isVisible, + portalFollower: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: () => _toggleLanguageMenuOverlay(false), ), - ), - portalFollower: Obx(() => LanguageRegionOverlay( - listSupportedLanguages: _controller.listSupportedLanguages, - localeSelected: _controller.languageSelected.value, - maxWidth: maxWidth, - onSelectLanguageAction: _controller.selectLanguage, - )), - visible: _controller.isLanguageMenuOverlayOpen.isTrue, - child: _buildDropDownMenuButton(context, maxWidth) - ) - )); - } - - Widget _buildDropDownMenuButton(BuildContext context, double maxWidth) { - return Material( - color: Colors.transparent, - child: InkWell( - onTap: () => _controller.toggleLanguageMenuOverlay(), - borderRadius: const BorderRadius.all(Radius.circular(10)), - child: Container( - height: 44, - width: maxWidth, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all( - color: AppColor.colorInputBorderCreateMailbox, - width: 0.5, - ), - color: AppColor.colorItemSelected, - ), - padding: const EdgeInsetsDirectional.only(start: 12, end: 10), - child: Row(children: [ - Expanded(child: Text( - _controller.languageSelected.value.getLanguageNameByCurrentLocale(context), - style: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 16, - fontWeight: FontWeight.normal, - color: Colors.black + child: PortalTarget( + anchor: const Aligned( + follower: Alignment.topRight, + target: Alignment.bottomRight, + widthFactor: 1, + backup: Aligned( + follower: Alignment.topRight, + target: Alignment.bottomRight, + widthFactor: 1, ), - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, + ), + portalFollower: Obx(() => LanguageRegionOverlay( + imagePaths: _imagePaths, + responsiveUtils: _responsiveUtils, + listSupportedLanguages: _languageAndRegionController.listSupportedLanguages, + localeSelected: _languageAndRegionController.languageSelected.value, + maxWidth: maxWidth, + onSelectLanguageAction: (language) { + _toggleLanguageMenuOverlay(false); + _languageAndRegionController.selectLanguage(language); + }, )), - SvgPicture.asset(_imagePaths.icDropDown) - ]), - ), - ), + visible: isVisible, + child: TMailDropDownWidget( + text: _languageAndRegionController + .languageSelected + .value + .getLanguageNameByCurrentLocale(context), + dropDownIcon: _imagePaths.icDropDown, + backgroundColor: isVisible + ? AppColor.lightGrayEBEDF0.withOpacity(0.6) + : null, + onTap: () => _toggleLanguageMenuOverlay(true), + ) + ) + ); + } ); } + + void _toggleLanguageMenuOverlay(bool visible) { + _languageMenuIsVisibleNotifier.value = visible; + } + + @override + void dispose() { + _languageMenuIsVisibleNotifier.dispose(); + super.dispose(); + } } \ No newline at end of file diff --git a/lib/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart b/lib/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart index ae0196077..50eaf29c8 100644 --- a/lib/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart +++ b/lib/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart @@ -1,22 +1,22 @@ - -import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:flutter/material.dart'; -import 'package:get/get.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart'; class LanguageRegionOverlay extends StatelessWidget { + final ImagePaths imagePaths; + final ResponsiveUtils responsiveUtils; final List listSupportedLanguages; final Locale localeSelected; final double? maxWidth; final OnSelectLanguageAction onSelectLanguageAction; - final _responsiveUtils = Get.find(); - - LanguageRegionOverlay({ + const LanguageRegionOverlay({ Key? key, + required this.imagePaths, required this.listSupportedLanguages, + required this.responsiveUtils, required this.localeSelected, required this.onSelectLanguageAction, this.maxWidth, @@ -31,22 +31,27 @@ class LanguageRegionOverlay extends StatelessWidget { padding: const EdgeInsets.all(8), decoration: BoxDecoration( color: Colors.white, - borderRadius: BorderRadius.circular(12), - boxShadow: const [ + borderRadius: const BorderRadius.all(Radius.circular(16)), + boxShadow: [ BoxShadow( - color: AppColor.colorShadowBgContentEmail, - blurRadius: 24, - offset: Offset(0, 8)), - BoxShadow( - color: AppColor.colorShadowBgContentEmail, + color: Colors.black.withOpacity(0.3), blurRadius: 2, - offset: Offset.zero), - ] + offset: const Offset(0, 1), + ), + BoxShadow( + color: Colors.black.withOpacity(0.15), + blurRadius: 6, + spreadRadius: 2, + offset: const Offset(0, 2), + ), + ], ), child: ListView.builder( shrinkWrap: true, itemCount: listSupportedLanguages.length, - itemBuilder: (context, index) => LanguageItemWidget( + padding: const EdgeInsets.all(7), + itemBuilder: (_, index) => LanguageItemWidget( + imagePaths: imagePaths, localeSelected: localeSelected, localeCurrent: listSupportedLanguages[index], onSelectLanguageAction: onSelectLanguageAction @@ -59,7 +64,7 @@ class LanguageRegionOverlay extends StatelessWidget { const double maxHeightTopBar = 80; const double maxHeightTitleLanguage = 200; const double paddingBottom = 16; - final currentHeight = _responsiveUtils.getSizeScreenHeight(context); + final currentHeight = responsiveUtils.getSizeScreenHeight(context); double maxHeightForm = currentHeight - maxHeightTopBar - maxHeightTitleLanguage - paddingBottom; return maxHeightForm; } diff --git a/lib/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart b/lib/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart index d5c9a8084..da28d5e89 100644 --- a/lib/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart +++ b/lib/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart @@ -1,22 +1,22 @@ - +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/utils/theme_utils.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; -import 'package:get/get.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/extensions/locale_extension.dart'; typedef OnSelectLanguageAction = Function(Locale? localeSelected); class LanguageItemWidget extends StatelessWidget { + final ImagePaths imagePaths; final Locale localeSelected; final Locale localeCurrent; final OnSelectLanguageAction onSelectLanguageAction; const LanguageItemWidget({ super.key, + required this.imagePaths, required this.localeCurrent, required this.localeSelected, required this.onSelectLanguageAction, @@ -24,48 +24,33 @@ class LanguageItemWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final imagePaths = Get.find(); - return Material( color: Colors.transparent, child: InkWell( onTap: () => onSelectLanguageAction.call(localeCurrent), borderRadius: const BorderRadius.all(Radius.circular(8)), - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16), + hoverColor: AppColor.lightGrayEBEDF0.withOpacity(0.6), + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 17), + height: 51, child: Row(children: [ - Expanded(child: Row( - children: [ - Text( - localeCurrent.getLanguageNameByCurrentLocale(context), - style: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 17, - fontWeight: FontWeight.normal, - color: Colors.black - ), - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, - ), - Text( - ' - ${localeCurrent.getSourceLanguageName()}', - style: ThemeUtils.defaultTextStyleInterFont.copyWith( - fontSize: 17, - fontWeight: FontWeight.w500, - color: Colors.black - ), - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, - ) - ] + Expanded(child: Text( + '${localeCurrent.getLanguageNameByCurrentLocale(context)} - ${localeCurrent.getSourceLanguageName()}', + style: ThemeUtils.textStyleInter400.copyWith( + letterSpacing: -0.15, + fontSize: 16, + height: 21.01 / 16, + color: AppColor.gray424244.withOpacity(0.9), + ), + maxLines: 1, + overflow: TextOverflow.ellipsis, )), if (localeCurrent == localeSelected) SvgPicture.asset( imagePaths.icChecked, width: 20, height: 20, - fit: BoxFit.fill + fit: BoxFit.fill, ) ]), ), diff --git a/lib/features/manage_account/presentation/menu/settings_utils.dart b/lib/features/manage_account/presentation/menu/settings_utils.dart index 5367d126d..8fbb18d6b 100644 --- a/lib/features/manage_account/presentation/menu/settings_utils.dart +++ b/lib/features/manage_account/presentation/menu/settings_utils.dart @@ -64,7 +64,7 @@ class SettingsUtils { ) { if (responsiveUtils.isWebDesktop(context)) { return BoxDecoration( - borderRadius: const BorderRadius.all(Radius.circular(16)), + borderRadius: const BorderRadius.all(Radius.circular(20)), color: backgroundColor, ); } else { diff --git a/lib/features/manage_account/presentation/widgets/setting_header_widget.dart b/lib/features/manage_account/presentation/widgets/setting_header_widget.dart index f2ecf3ba4..07cd6cc9b 100644 --- a/lib/features/manage_account/presentation/widgets/setting_header_widget.dart +++ b/lib/features/manage_account/presentation/widgets/setting_header_widget.dart @@ -7,11 +7,13 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class SettingHeaderWidget extends StatelessWidget { final AccountMenuItem menuItem; final EdgeInsetsGeometry? padding; + final TextStyle? textStyle; const SettingHeaderWidget({ Key? key, required this.menuItem, this.padding, + this.textStyle, }) : super(key: key); @override @@ -21,16 +23,21 @@ class SettingHeaderWidget extends StatelessWidget { final children = [ Text( menuItem.getName(appLocalizations), - style: ThemeUtils.textStyleInter600().copyWith( + style: textStyle ?? ThemeUtils.textStyleInter600().copyWith( color: Colors.black, ), ), if (menuItem.getExplanation(appLocalizations).isNotEmpty) Padding( - padding: const EdgeInsets.only(top: 8), + padding: const EdgeInsets.only(top: 13), child: Text( menuItem.getExplanation(appLocalizations), - style: ThemeUtils.textStyleBodyBody1(color: AppColor.steelGray400), + style: ThemeUtils.textStyleInter400.copyWith( + fontSize: 16, + height: 21.01 / 16, + letterSpacing: -0.15, + color: AppColor.gray424244.withOpacity(0.64), + ), ), ), ];