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 new file mode 100644 index 000000000..a77195b69 --- /dev/null +++ b/lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart @@ -0,0 +1,54 @@ + +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.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_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart'; + +class LanguageAndRegionView extends GetWidget { + + final _responsiveUtils = Get.find(); + + LanguageAndRegionView({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: _responsiveUtils.isWebDesktop(context) + ? AppColor.colorBgDesktop + : Colors.white, + body: Container( + width: double.infinity, + margin: _responsiveUtils.isWebDesktop(context) + ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24) + : EdgeInsets.zero, + color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white, + decoration: _responsiveUtils.isWebDesktop(context) + ? BoxDecoration( + borderRadius: BorderRadius.circular(20), + border: Border.all(color: AppColor.colorBorderBodyThread, width: 1), + color: Colors.white) + : null, + child: ClipRRect( + borderRadius: BorderRadius.circular( + _responsiveUtils.isWebDesktop(context) ? 20 : 0), + child: Padding( + padding: EdgeInsets.only( + left: _responsiveUtils.isWebDesktop(context) ? 24 : 10, + top: 24, + right: 24), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const LanguageAndRegionHeaderWidget(), + const SizedBox(height: 22), + Expanded(child: ChangeLanguageWidget()) + ] + ), + ), + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart b/lib/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart new file mode 100644 index 000000000..4b26260da --- /dev/null +++ b/lib/features/manage_account/presentation/language_and_region/widgets/change_language_widget.dart @@ -0,0 +1,59 @@ + +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class ChangeLanguageWidget extends StatelessWidget { + + final _controller = Get.find(); + final _responsiveUtils = Get.find(); + + ChangeLanguageWidget({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final titleLanguageWidget = Text( + AppLocalizations.of(context).language, + style: const TextStyle( + fontSize: 14, + fontWeight: FontWeight.normal, + color: AppColor.colorContentEmail)); + + final dropDownMenuSelectLanguage = Row(children: [ + Expanded(child: Obx(() => + DropDownButtonWidget( + items: _controller.listSupportedLanguages, + itemSelected: _controller.languageSelected.value, + onChanged: (newLanguage) => + _controller.selectLanguage(newLanguage), + supportSelectionIcon: true))), + ]); + + return LayoutBuilder(builder: (context, constraints) { + return ResponsiveWidget( + responsiveUtils: _responsiveUtils, + mobile: Scaffold( + body: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + titleLanguageWidget, + const SizedBox(height: 8), + dropDownMenuSelectLanguage + ] + )), + desktop: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + titleLanguageWidget, + const SizedBox(height: 8), + SizedBox( + width: constraints.maxWidth / 2, + child: dropDownMenuSelectLanguage + ), + ])); + }); + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart b/lib/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart new file mode 100644 index 000000000..85ad6952c --- /dev/null +++ b/lib/features/manage_account/presentation/language_and_region/widgets/language_and_region_header_widget.dart @@ -0,0 +1,28 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class LanguageAndRegionHeaderWidget extends StatelessWidget { + + const LanguageAndRegionHeaderWidget({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text(AppLocalizations.of(context).languageAndRegion, + style: const TextStyle( + fontSize: 17, + fontWeight: FontWeight.bold, + color: Colors.black)), + const SizedBox(height: 4), + Text(AppLocalizations.of(context).languageAndRegionSubtitle, + style: const TextStyle( + fontSize: 15, + fontWeight: FontWeight.normal, + color: AppColor.colorTextButtonHeaderThread)) + ]); + } +} \ No newline at end of file diff --git a/lib/features/manage_account/presentation/manage_account_dashboard_bindings.dart b/lib/features/manage_account/presentation/manage_account_dashboard_bindings.dart index d1a9ec28e..78ba2ba6e 100644 --- a/lib/features/manage_account/presentation/manage_account_dashboard_bindings.dart +++ b/lib/features/manage_account/presentation/manage_account_dashboard_bindings.dart @@ -20,6 +20,7 @@ import 'package:tmail_ui_user/features/login/domain/usecases/get_credential_inte import 'package:tmail_ui_user/features/login/domain/usecases/get_stored_token_oidc_interactor.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart'; import 'package:tmail_ui_user/features/manage_account/domain/usecases/log_out_oidc_interactor.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_bindings.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_bindings.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_bindings.dart'; @@ -31,6 +32,7 @@ class ManageAccountDashBoardBindings extends BaseBindings { super.dependencies(); ManageAccountMenuBindings().dependencies(); ProfileBindings().dependencies(); + LanguageAndRegionBindings().dependencies(); } @override diff --git a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart b/lib/features/manage_account/presentation/manage_account_dashboard_view.dart index 67cf9a812..3e84c90ce 100644 --- a/lib/features/manage_account/presentation/manage_account_dashboard_view.dart +++ b/lib/features/manage_account/presentation/manage_account_dashboard_view.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_view.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_view.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart'; @@ -11,8 +12,8 @@ import 'package:tmail_ui_user/features/manage_account/presentation/profiles/prof import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/routes/route_navigation.dart'; -class ManageAccountDashBoardView extends GetWidget with - UserSettingPopupMenuMixin { +class ManageAccountDashBoardView extends GetWidget + with UserSettingPopupMenuMixin { final _responsiveUtils = Get.find(); final _imagePaths = Get.find(); @@ -36,64 +37,62 @@ class ManageAccountDashBoardView extends GetWidget controller.backToMailboxDashBoard()) - ..setLogo(_imagePaths.icLogoTMail)) - .build(), - Obx(() { - if (controller.appInformation.value != null) { - return Padding(padding: const EdgeInsets.only(top: 6), - child: Text( - 'v.${controller.appInformation.value!.version}', - textAlign: TextAlign.center, - style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), - )); - } else { - return const SizedBox.shrink(); - } - }), - ]) - ), - Expanded(child: Padding( - padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48), - child: _buildRightHeader(context))) - ]), - Expanded(child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenu), - Expanded(child: _viewDisplayedOfAccountMenuItem()) - ], - )) + body: ResponsiveWidget( + responsiveUtils: _responsiveUtils, + desktop: Column(children: [ + Row(children: [ + Container(width: 256, color: Colors.white, + padding: const EdgeInsets.only(top: 25, bottom: 25, left: 32), + child: Row(children: [ + (SloganBuilder(arrangedByHorizontal: true) + ..setSloganText(AppLocalizations.of(context).app_name) + ..setSloganTextAlign(TextAlign.center) + ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)) + ..setSizeLogo(24) + ..addOnTapCallback(() => controller.backToMailboxDashBoard()) + ..setLogo(_imagePaths.icLogoTMail)) + .build(), + Obx(() { + if (controller.appInformation.value != null) { + return Padding(padding: const EdgeInsets.only(top: 6), + child: Text( + 'v.${controller.appInformation.value!.version}', + textAlign: TextAlign.center, + style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), + )); + } else { + return const SizedBox.shrink(); + } + }), + ]) + ), + Expanded(child: Padding( + padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48), + child: _buildRightHeader(context))) ]), - mobile: SafeArea( - child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ - Padding( - padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context) - ? const EdgeInsets.only(left: 4, right: 8) - : const EdgeInsets.only(top: 16, left: 24, right: 32), - child: _buildAppbar(context)), - Expanded(child: Padding( - padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context) - ? const EdgeInsets.only(left: 8) - : const EdgeInsets.only(left: 24), - child: _viewDisplayedOfAccountMenuItem())) - ]) - ) - ), - ]), + Expanded(child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenu), + Expanded(child: _viewDisplayedOfAccountMenuItem()) + ], + )) + ]), + mobile: SafeArea( + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Padding( + padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context) + ? const EdgeInsets.only(left: 4, right: 8) + : const EdgeInsets.only(top: 16, left: 24, right: 32), + child: _buildAppbar(context)), + Expanded(child: Padding( + padding: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context) + ? const EdgeInsets.only(left: 8) + : const EdgeInsets.only(left: 24), + child: _viewDisplayedOfAccountMenuItem())) + ]) + ) + ), ); } @@ -141,11 +140,15 @@ class ManageAccountDashBoardView extends GetWidget { ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorBgMailboxSelected)) ..paddingIcon(const EdgeInsets.only(right: 8)) ..iconColor(AppColor.colorTextButton) - ..maxWidth(85) + ..maxWidth(100) ..size(16) ..radiusSplash(10) ..padding(const EdgeInsets.symmetric(vertical: 10)) diff --git a/lib/features/manage_account/presentation/profiles/identities/identities_view.dart b/lib/features/manage_account/presentation/profiles/identities/identities_view.dart index 4c2d9eef1..d3fb497b3 100644 --- a/lib/features/manage_account/presentation/profiles/identities/identities_view.dart +++ b/lib/features/manage_account/presentation/profiles/identities/identities_view.dart @@ -1,6 +1,5 @@ import 'package:core/core.dart'; -import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flutter/material.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; import 'package:flutter_svg/flutter_svg.dart'; @@ -8,6 +7,7 @@ import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/identities/identity.dart'; import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/base/mixin/popup_menu_widget_mixin.dart'; +import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/identities_controller.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/widgets/identity_bottom_sheet_action_tile_builder.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/widgets/identity_info_tile_builder.dart'; @@ -23,49 +23,11 @@ class IdentitiesView extends GetWidget with PopupMenuWidge @override Widget build(BuildContext context) { final buttonSelectIdentity = Row(children: [ - Expanded(child: Obx(() => DropdownButtonHideUnderline( - child: DropdownButton2( - isExpanded: true, - hint: Row( - children: [ - Expanded(child: Text( - controller.identitySelected.value?.name ?? '', - style: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal, color: Colors.black), - maxLines: 1, - overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis, - )), - ], - ), - items: controller.listAllIdentities.map((item) => DropdownMenuItem( - value: item, - child: Text( - item.name ?? '', - style: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal, color: Colors.black), - maxLines: 1, - overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis, - ), - )).toList(), - value: controller.identitySelected.value, + Expanded(child: Obx(() => DropDownButtonWidget( + items: controller.listAllIdentities, + itemSelected: controller.identitySelected.value, onChanged: (newIdentity) => controller.selectIdentity(newIdentity), - icon: SvgPicture.asset(_imagePaths.icDropDown), - buttonPadding: const EdgeInsets.symmetric(horizontal: 12), - buttonDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all(color: AppColor.colorInputBorderCreateMailbox, width: 0.5), - color: AppColor.colorInputBackgroundCreateMailbox), - itemHeight: 44, - buttonHeight: 44, - selectedItemHighlightColor: Colors.black12, - itemPadding: const EdgeInsets.symmetric(horizontal: 12), - dropdownMaxHeight: 200, - dropdownDecoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: Colors.white), - dropdownElevation: 4, - scrollbarRadius: const Radius.circular(40), - scrollbarThickness: 6, - ), - ))), + supportSelectionIcon: true))), if (!_responsiveUtils.isMobile(context)) const SizedBox(width: 12), if (!_responsiveUtils.isMobile(context)) (ButtonBuilder(_imagePaths.icAddIdentity) diff --git a/lib/features/manage_account/presentation/profiles/profiles_view.dart b/lib/features/manage_account/presentation/profiles/profiles_view.dart index 8f053940d..344fcc588 100644 --- a/lib/features/manage_account/presentation/profiles/profiles_view.dart +++ b/lib/features/manage_account/presentation/profiles/profiles_view.dart @@ -15,50 +15,61 @@ class ProfilesView extends GetWidget { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, + backgroundColor: _responsiveUtils.isWebDesktop(context) + ? AppColor.colorBgDesktop + : Colors.white, body: Container( - margin: _responsiveUtils.isDesktop(context) + margin: _responsiveUtils.isWebDesktop(context) ? const EdgeInsets.only(left: 48, right: 24, top: 24, bottom: 24) : EdgeInsets.zero, - decoration: BoxDecoration( - borderRadius: _responsiveUtils.isDesktop(context) ? BorderRadius.circular(20) : null, - border: _responsiveUtils.isDesktop(context) ? Border.all(color: AppColor.colorBorderBodyThread, width: 1) : null, - color: Colors.white), - padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10), - child: DefaultTabController( - initialIndex: 0, - length: 1, - child: Scaffold( - appBar: TabBar( - unselectedLabelColor: AppColor.colorTextButtonHeaderThread, - unselectedLabelStyle: const TextStyle( - fontSize: 15, - fontWeight: FontWeight.normal, - color: AppColor.colorTextButtonHeaderThread), - labelStyle: const TextStyle( - fontSize: 15, - fontWeight: FontWeight.w500, - color: AppColor.primaryColor), - labelColor: AppColor.primaryColor, - indicatorSize: TabBarIndicatorSize.label, - isScrollable: true, - indicator: const CustomIndicator( - indicatorHeight: 4, - indicatorColor: AppColor.primaryColor, - indicatorSize: CustomIndicatorSize.full), - onTap: (index) {}, - tabs: [ - Tab(text: ProfilesTabType.identities.getName(context)), + color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white, + decoration: _responsiveUtils.isWebDesktop(context) + ? BoxDecoration( + borderRadius: BorderRadius.circular(20), + border: Border.all(color: AppColor.colorBorderBodyThread, width: 1), + color: Colors.white) + : null, + child: ClipRRect( + borderRadius: BorderRadius.circular( + _responsiveUtils.isWebDesktop(context) ? 20 : 0), + child: Padding( + padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10), + child: DefaultTabController( + initialIndex: 0, + length: 1, + child: Scaffold( + appBar: TabBar( + unselectedLabelColor: AppColor.colorTextButtonHeaderThread, + unselectedLabelStyle: const TextStyle( + fontSize: 15, + fontWeight: FontWeight.normal, + color: AppColor.colorTextButtonHeaderThread), + labelStyle: const TextStyle( + fontSize: 15, + fontWeight: FontWeight.w500, + color: AppColor.primaryColor), + labelColor: AppColor.primaryColor, + indicatorSize: TabBarIndicatorSize.label, + isScrollable: true, + indicator: const CustomIndicator( + indicatorHeight: 4, + indicatorColor: AppColor.primaryColor, + indicatorSize: CustomIndicatorSize.full), + onTap: (index) {}, + tabs: [ + Tab(text: ProfilesTabType.identities.getName(context)), + ]), + body: Column(children: [ + const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), + Expanded(child: TabBarView( + children: [ + IdentitiesView(), + ], + )) ]), - body: Column(children: [ - const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), - Expanded(child: TabBarView( - children: [ - IdentitiesView(), - ], - )) - ]), - ) + ) + ), + ), ), ), );