TF-1581 Update UI to support language RTL
This commit is contained in:
@@ -6,6 +6,7 @@ import 'package:get/get.dart';
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_controller.dart';
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/account_menu_item_tile_builder.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_utils.dart';
|
||||
|
||||
class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
|
||||
|
||||
@@ -57,11 +58,18 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
|
||||
color: _responsiveUtils.isWebDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 20, top: 24),
|
||||
padding: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 0 : 20,
|
||||
right: AppUtils.isDirectionRTL(context) ? 20 : 0,
|
||||
top: 24
|
||||
),
|
||||
child: (ButtonBuilder(_imagePaths.icBack)
|
||||
..key(const Key('button_back'))
|
||||
..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorBgMailboxSelected))
|
||||
..paddingIcon(const EdgeInsets.only(right: 8))
|
||||
..paddingIcon(EdgeInsets.only(
|
||||
right: AppUtils.isDirectionRTL(context) ? 0 : 8,
|
||||
left: AppUtils.isDirectionRTL(context) ? 8 : 0,
|
||||
))
|
||||
..iconColor(AppColor.colorTextButton)
|
||||
..maxWidth(100)
|
||||
..size(16)
|
||||
@@ -72,14 +80,21 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
|
||||
..text(AppLocalizations.of(context).back, isVertical: false))
|
||||
.build()),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 32, top: 20),
|
||||
padding: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 0 : 32,
|
||||
right: AppUtils.isDirectionRTL(context) ? 32 : 0,
|
||||
top: 20
|
||||
),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).manage_account,
|
||||
style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 17))),
|
||||
const SizedBox(height: 12),
|
||||
Obx(
|
||||
() => ListView.builder(
|
||||
padding: const EdgeInsets.only(left: 16, right: 8),
|
||||
padding: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 8 : 16,
|
||||
right: AppUtils.isDirectionRTL(context) ? 16 : 8
|
||||
),
|
||||
key: const Key('list_manage_account_property'),
|
||||
shrinkWrap: true,
|
||||
itemCount: controller.listAccountMenuItem.length,
|
||||
@@ -95,21 +110,31 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 16),
|
||||
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
|
||||
Padding(padding: const EdgeInsets.only(left: 32),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
controller.logout(
|
||||
controller.dashBoardController.sessionCurrent.value,
|
||||
controller.dashBoardController.accountId.value
|
||||
);
|
||||
},
|
||||
child: Row(children: [
|
||||
SvgPicture.asset(_imagePaths.icSignOut, fit: BoxFit.fill),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: Text(AppLocalizations.of(context).sign_out,
|
||||
style: const TextStyle(fontWeight: FontWeight.normal, fontSize: 15, color: Colors.black)))
|
||||
])
|
||||
)
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 0 : 32,
|
||||
right: AppUtils.isDirectionRTL(context) ? 32 : 0,
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
controller.logout(
|
||||
controller.dashBoardController.sessionCurrent.value,
|
||||
controller.dashBoardController.accountId.value
|
||||
);
|
||||
},
|
||||
child: Row(children: [
|
||||
SvgPicture.asset(_imagePaths.icSignOut, fit: BoxFit.fill),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: Text(
|
||||
AppLocalizations.of(context).sign_out,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 15,
|
||||
color: Colors.black
|
||||
)
|
||||
))
|
||||
])
|
||||
)
|
||||
),
|
||||
]),
|
||||
)),
|
||||
|
||||
+5
-1
@@ -9,6 +9,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart';
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_utils.dart';
|
||||
|
||||
class SettingsFirstLevelView extends GetWidget<SettingsController> {
|
||||
SettingsFirstLevelView({Key? key}) : super(key: key);
|
||||
@@ -25,7 +26,10 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
|
||||
child: UserInformationWidgetBuilder(
|
||||
_imagePaths,
|
||||
controller.manageAccountDashboardController.userProfile.value,
|
||||
titlePadding: const EdgeInsets.only(left: 16))
|
||||
titlePadding: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 0 : 16,
|
||||
right: AppUtils.isDirectionRTL(context) ? 16 : 0
|
||||
))
|
||||
)),
|
||||
Divider(
|
||||
color: AppColor.colorDividerComposer,
|
||||
|
||||
@@ -21,6 +21,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/profiles/prof
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_view.dart';
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_utils.dart';
|
||||
|
||||
typedef CloseSettingsViewAction = void Function();
|
||||
|
||||
@@ -66,9 +67,12 @@ class SettingsView extends GetWidget<SettingsController> {
|
||||
fromAccountDashBoard: true,
|
||||
vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
|
||||
leadingIcon: const Padding(
|
||||
padding: EdgeInsets.only(right: 16),
|
||||
child: Icon(Icons.timer, size: 20),
|
||||
leadingIcon: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
right: AppUtils.isDirectionRTL(context) ? 0 : 16,
|
||||
left: AppUtils.isDirectionRTL(context) ? 16 : 0,
|
||||
),
|
||||
child: const Icon(Icons.timer, size: 20),
|
||||
)
|
||||
);
|
||||
} else {
|
||||
@@ -131,13 +135,14 @@ class SettingsView extends GetWidget<SettingsController> {
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
SvgPicture.asset(
|
||||
_imagePaths.icBack,
|
||||
width: 18,
|
||||
height: 18,
|
||||
AppUtils.isDirectionRTL(context) ? _imagePaths.icCollapseFolder : _imagePaths.icBack,
|
||||
colorFilter: AppColor.colorTextButton.asFilter(),
|
||||
fit: BoxFit.fill),
|
||||
Container(
|
||||
margin: const EdgeInsets.only(left: 8),
|
||||
margin: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 0 : 8,
|
||||
right: AppUtils.isDirectionRTL(context) ? 8 : 0,
|
||||
),
|
||||
constraints: const BoxConstraints(maxWidth: 100),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).settings,
|
||||
|
||||
@@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/utils/responsive_utils.dart';
|
||||
import 'package:core/utils/build_utils.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_utils.dart';
|
||||
|
||||
class SettingsUtils {
|
||||
static double getHorizontalPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
|
||||
@@ -142,4 +143,20 @@ class SettingsUtils {
|
||||
return EdgeInsets.zero;
|
||||
}
|
||||
}
|
||||
|
||||
static EdgeInsets getPaddingHeaderSetting(BuildContext context) {
|
||||
if (AppUtils.isDirectionRTL(context)) {
|
||||
return const EdgeInsets.only(top: 25, bottom: 25, right: 32);
|
||||
} else {
|
||||
return const EdgeInsets.only(top: 25, bottom: 25, left: 32);
|
||||
}
|
||||
}
|
||||
|
||||
static EdgeInsets getPaddingRightHeaderSetting(BuildContext context) {
|
||||
if (AppUtils.isDirectionRTL(context)) {
|
||||
return const EdgeInsets.only(right: 48, top: 16, bottom: 10, left: 10);
|
||||
} else {
|
||||
return const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48);
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
-4
@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_utils.dart';
|
||||
|
||||
typedef SettingFirstLevelTileClickAction = void Function();
|
||||
|
||||
@@ -41,7 +42,10 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
|
||||
Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
|
||||
padding: EdgeInsets.only(
|
||||
right: AppUtils.isDirectionRTL(context) ? SettingsUtils.getHorizontalPadding(context, _responsiveUtils) : 0,
|
||||
left: AppUtils.isDirectionRTL(context) ? 0 : SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
|
||||
),
|
||||
child: _buildSettingIcon(context)),
|
||||
Expanded(child: Padding(
|
||||
padding: const EdgeInsets.only(left: 12, right: 12),
|
||||
@@ -61,7 +65,11 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
|
||||
),
|
||||
subtitle != null
|
||||
? Padding(
|
||||
padding: EdgeInsets.only(left: _getSubtitleLeftPadding(context), right: 12, top: 12),
|
||||
padding: EdgeInsets.only(
|
||||
left: AppUtils.isDirectionRTL(context) ? 12 : _getSubtitleLeftPadding(context),
|
||||
right: AppUtils.isDirectionRTL(context) ? _getSubtitleLeftPadding(context) : 12,
|
||||
top: 12
|
||||
),
|
||||
child: Text(
|
||||
subtitle!,
|
||||
style: const TextStyle(
|
||||
@@ -72,9 +80,12 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
|
||||
]
|
||||
)),
|
||||
IconButton(
|
||||
padding: EdgeInsets.only(right: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
|
||||
padding: EdgeInsets.only(
|
||||
right: AppUtils.isDirectionRTL(context) ? 0 : SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
|
||||
left: AppUtils.isDirectionRTL(context) ? SettingsUtils.getHorizontalPadding(context, _responsiveUtils) : 0,
|
||||
),
|
||||
icon: SvgPicture.asset(
|
||||
_imagePath.icCollapseFolder,
|
||||
AppUtils.isDirectionRTL(context) ? _imagePath.icBack : _imagePath.icCollapseFolder,
|
||||
fit: BoxFit.fill,
|
||||
colorFilter: AppColor.colorCollapseMailbox.asFilter()),
|
||||
onPressed: clickAction
|
||||
|
||||
Reference in New Issue
Block a user