TF-1581 Update UI to support language RTL

This commit is contained in:
dab246
2023-03-10 13:05:00 +07:00
committed by Dat Vu
parent 42bde0e415
commit 9af4924b9a
44 changed files with 821 additions and 392 deletions
@@ -1,71 +0,0 @@
import 'package:core/core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
typedef OnOpenMailboxNewFolderActionClick = void Function();
class MailboxNewFolderTileBuilder {
String? _icon;
String? _name;
OnOpenMailboxNewFolderActionClick? _onOpenMailboxFolderActionClick;
MailboxNewFolderTileBuilder();
void addIcon(String icon) {
_icon = icon;
}
void addName(String name) {
_name = name;
}
void onOpenMailboxFolderAction(OnOpenMailboxNewFolderActionClick onOpenMailboxFolderActionClick) {
_onOpenMailboxFolderActionClick = onOpenMailboxFolderActionClick;
}
Widget build() {
return Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent),
child: Container(
key: const Key('mailbox_new_folder_tile'),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: AppColor.mailboxBackgroundColor),
child: MediaQuery(
data: const MediaQueryData(padding: EdgeInsets.zero),
child: ListTile(
contentPadding: EdgeInsets.zero,
onTap: () => {
if (_onOpenMailboxFolderActionClick != null) {
_onOpenMailboxFolderActionClick!()
}
},
leading: Padding(
padding: const EdgeInsets.only(left: 34),
child: _icon != null
? SvgPicture.asset(
_icon!,
width: 24,
height: 24,
colorFilter: AppColor.mailboxIconColor.asFilter(),
fit: BoxFit.fill)
: const SizedBox.shrink()),
title: Padding(
padding: const EdgeInsets.only(left: 8),
child: Text(
_name ?? '',
maxLines: 1,
style: const TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
)),
)
)
)
);
}
}
@@ -17,6 +17,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displa
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
import 'package:tmail_ui_user/main/utils/app_utils.dart';
class MailBoxFolderTileBuilder {
@@ -82,15 +83,15 @@ class MailBoxFolderTileBuilder {
Widget build() {
if (responsiveUtils?.isWebDesktop(_context) == true && mailboxDisplayed == MailboxDisplayed.mailbox) {
return DragTarget<List<PresentationEmail>>(
builder: (_, __, ___) => _buildMailboxItem(),
builder: (_, __, ___) => _buildMailboxItem(_context),
onAccept: (emails) => _onDragItemAccepted?.call(emails, _mailboxNode.item),
);
} else {
return _buildMailboxItem();
return _buildMailboxItem(_context);
}
}
Widget _buildMailboxItem() {
Widget _buildMailboxItem(BuildContext context) {
if (mailboxDisplayed == MailboxDisplayed.mailbox) {
if (BuildUtils.isWeb) {
return StatefulBuilder(
@@ -108,11 +109,11 @@ class MailBoxFolderTileBuilder {
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
_buildLeadingMailboxItem(),
_buildLeadingMailboxItem(context),
const SizedBox(width: 4),
Expanded(child: _buildTitleFolderItem()),
const SizedBox(width: 8),
_buildTrailingItemForMailboxView()
_buildTrailingItemForMailboxView(context)
])
),
);
@@ -141,12 +142,12 @@ class MailBoxFolderTileBuilder {
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
_buildLeadingMailboxItem(),
_buildLeadingMailboxItem(context),
const SizedBox(width: 8),
Expanded(child: _buildTitleFolderItem()),
_buildSelectedIcon(),
const SizedBox(width: 8),
_buildTrailingItemForMailboxView()
_buildTrailingItemForMailboxView(context)
]),
]
),
@@ -171,7 +172,7 @@ class MailBoxFolderTileBuilder {
? AppColor.colorItemSelected
: Colors.transparent,
child: Row(children: [
_buildLeadingMailboxItem(),
_buildLeadingMailboxItem(context),
const SizedBox(width: 8),
Expanded(child: _buildTitleFolderItem()),
_buildSelectedIcon()
@@ -184,7 +185,7 @@ class MailBoxFolderTileBuilder {
}
}
Widget _buildLeadingMailboxItem() {
Widget _buildLeadingMailboxItem(BuildContext context) {
return Row(children: [
if (_mailboxNode.hasChildren())
Row(children: [
@@ -211,20 +212,27 @@ class MailBoxFolderTileBuilder {
else
const SizedBox(width: 32),
Transform(
transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
transform: Matrix4.translationValues(
AppUtils.isDirectionRTL(context) ? 0.0 : -4.0,
0.0,
0.0
),
child: _buildLeadingIcon()
),
]);
}
Widget _buildTrailingItemForMailboxView() {
Widget _buildTrailingItemForMailboxView(BuildContext context) {
if (BuildUtils.isWeb) {
if (isHoverItem) {
return _buildMenuIcon();
return _buildMenuIcon(context);
} else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& _mailboxNode.item.matchCountingRules()) {
return Padding(
padding: const EdgeInsets.only(right: 10),
padding: EdgeInsets.only(
right: AppUtils.isDirectionRTL(context) ? 0 : 10,
left: AppUtils.isDirectionRTL(context) ? 10 : 0,
),
child: _buildCounter(),
);
} else {
@@ -233,7 +241,10 @@ class MailBoxFolderTileBuilder {
} else {
if (_mailboxNode.hasChildren()) {
return Padding(
padding: const EdgeInsets.only(right: 12),
padding: EdgeInsets.only(
right: AppUtils.isDirectionRTL(context) ? 0 : 12,
left: AppUtils.isDirectionRTL(context) ? 12 : 0,
),
child: Row(
children: [
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
@@ -245,7 +256,10 @@ class MailBoxFolderTileBuilder {
} else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& _mailboxNode.item.matchCountingRules()) {
return Padding(
padding: const EdgeInsets.only(right: 12),
padding: EdgeInsets.only(
right: AppUtils.isDirectionRTL(context) ? 0 : 12,
left: AppUtils.isDirectionRTL(context) ? 12 : 0,
),
child: _buildCounter(),
);
} else {
@@ -328,9 +342,12 @@ class MailBoxFolderTileBuilder {
fit: BoxFit.fill);
}
Widget _buildMenuIcon() {
Widget _buildMenuIcon(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 8),
padding: EdgeInsets.only(
right: AppUtils.isDirectionRTL(context) ? 0 : 8,
left: AppUtils.isDirectionRTL(context) ? 8 : 0,
),
child: InkWell(
onTapDown: (detail) {
final screenSize = MediaQuery.of(_context).size;
@@ -1,11 +1,15 @@
import 'package:core/core.dart';
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/image/avatar_builder.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get_utils/src/platform/platform.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
import 'package:tmail_ui_user/main/utils/app_utils.dart';
typedef OnSubtitleClick = void Function();
@@ -49,7 +53,11 @@ class UserInformationWidgetBuilder extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: titlePadding ?? const EdgeInsets.only(left: 16, top: 10),
padding: titlePadding ?? EdgeInsets.only(
left: AppUtils.isDirectionRTL(context) ? 0 : 16,
right: AppUtils.isDirectionRTL(context) ? 16 : 0,
top: 10
),
child: Text(
_userProfile != null ? '${_userProfile?.email}' : '',
maxLines: 1,
@@ -60,7 +68,10 @@ class UserInformationWidgetBuilder extends StatelessWidget {
),
subtitle != null
? Padding(
padding: const EdgeInsets.only(left: 10),
padding: EdgeInsets.only(
left: AppUtils.isDirectionRTL(context) ? 0 : 10,
right: AppUtils.isDirectionRTL(context) ? 10 : 0
),
child: Material(
borderRadius: BorderRadius.circular(20),
color: Colors.transparent,
@@ -80,10 +91,14 @@ class UserInformationWidgetBuilder extends StatelessWidget {
])),
if (!kIsWeb)
Transform(
transform: Matrix4.translationValues(14.0, 0.0, 0.0),
transform: Matrix4.translationValues(
AppUtils.isDirectionRTL(context) ? -14.0 : 14.0,
0.0,
0.0
),
child: IconButton(
icon: SvgPicture.asset(
_imagePaths.icCollapseFolder,
AppUtils.isDirectionRTL(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
fit: BoxFit.fill,
colorFilter: AppColor.colorCollapseMailbox.asFilter()),
onPressed: () => {}))