Fix mailbox item padding

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit 8087a60e0f15dc7fe4dadb31f8f59c9018c12d8a)
This commit is contained in:
dab246
2023-12-06 14:24:13 +07:00
committed by Dat H. Pham
parent ceedcb1ced
commit 1d6724edab
8 changed files with 135 additions and 149 deletions
@@ -272,8 +272,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
children: [
const Divider(
color: AppColor.colorDividerMailbox,
height: 0.5,
thickness: 0.2
height: 1,
),
const SizedBox(height: 8),
_buildMailboxCategory(
@@ -297,8 +296,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
children: [
const Divider(
color: AppColor.colorDividerMailbox,
height: 0.5,
thickness: 0.2
height: 1,
),
const SizedBox(height: 8),
_buildMailboxCategory(
@@ -209,47 +209,38 @@ class MailboxView extends BaseMailboxView {
}),
const SizedBox(height: 8),
const Divider(color: AppColor.colorDividerMailbox, height: 1),
const SizedBox(height: 12),
Container(
margin: EdgeInsetsDirectional.only(
start: controller.responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
end: 16),
padding: const EdgeInsetsDirectional.only(start: 8),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: 16,
vertical: 6
),
child: Row(
children: [
Expanded(
child: Text(
AppLocalizations.of(context).folders,
style: const TextStyle(
fontSize: 20,
fontSize: 17,
color: Colors.black,
fontWeight: FontWeight.bold
)
),
),
Row(children: [
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(
controller.imagePaths.icSearchBar,
colorFilter: AppColor.colorTextButton.asFilter(),
fit: BoxFit.fill
),
tooltip: AppLocalizations.of(context).searchForFolders,
onTap: () => controller.openSearchViewAction(context)
TMailButtonWidget.fromIcon(
icon: controller.imagePaths.icSearchBar,
iconColor: AppColor.primaryColor,
backgroundColor: Colors.transparent,
tooltipMessage: AppLocalizations.of(context).searchForFolders,
onTapActionCallback: () => controller.openSearchViewAction(context)
),
TMailButtonWidget.fromIcon(
icon: controller.imagePaths.icAddNewFolder,
iconColor: AppColor.primaryColor,
backgroundColor: Colors.transparent,
tooltipMessage: AppLocalizations.of(context).newFolder,
onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
),
buildIconWeb(
minSize: 40,
iconSize: 20,
iconPadding: EdgeInsets.zero,
splashRadius: 15,
icon: SvgPicture.asset(
controller.imagePaths.icAddNewFolder,
colorFilter: AppColor.colorTextButton.asFilter(),
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).newFolder,
onTap: () => controller.goToCreateNewMailboxView(context)),
]),
]),
),
@@ -284,26 +275,33 @@ class MailboxView extends BaseMailboxView {
Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
return Padding(
padding: EdgeInsetsDirectional.only(
start: 4,
start: 12,
end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
child: Row(children: [
buildIconWeb(
minSize: 40,
iconSize: 20,
iconPadding: EdgeInsets.zero,
splashRadius: 15,
icon: SvgPicture.asset(
categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
? controller.imagePaths.icArrowBottom
: DirectionUtils.isDirectionRTLByLanguage(context) ? controller.imagePaths.icArrowLeft : controller.imagePaths.icArrowRight,
colorFilter: AppColor.primaryColor.asFilter(),
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).collapse,
onTap: () => controller.toggleMailboxCategories(categories)),
Expanded(child: Text(categories.getTitle(context),
TMailButtonWidget.fromIcon(
icon: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
? controller.imagePaths.icArrowBottom
: DirectionUtils.isDirectionRTLByLanguage(context)
? controller.imagePaths.icArrowLeft
: controller.imagePaths.icArrowRight,
tooltipMessage: AppLocalizations.of(context).collapse,
backgroundColor: Colors.transparent,
padding: EdgeInsets.zero,
iconColor: AppColor.primaryColor,
onTapActionCallback: () => controller.toggleMailboxCategories(categories)
),
Expanded(
child: Text(
categories.getTitle(context),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
style: const TextStyle(
fontSize: 17,
color: Colors.black,
fontWeight: FontWeight.bold
)
)
),
]));
}
@@ -1,7 +1,6 @@
import 'package:core/core.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:package_info_plus/package_info_plus.dart';
@@ -132,12 +131,8 @@ class MailboxView extends BaseMailboxView {
}),
const SizedBox(height: 8),
const Divider(color: AppColor.colorDividerMailbox, height: 1),
const SizedBox(height: 13),
Padding(
padding: EdgeInsetsDirectional.only(
start: controller.responsiveUtils.isDesktop(context) ? 0 : 12,
bottom: 8
),
padding: const EdgeInsetsDirectional.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -153,29 +148,23 @@ class MailboxView extends BaseMailboxView {
padding: EdgeInsetsDirectional.only(end: controller.responsiveUtils.isDesktop(context) ? 0 : 12),
child: Row(
children: [
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(
controller.imagePaths.icSearchBar,
colorFilter: AppColor.colorTextButton.asFilter(),
fit: BoxFit.fill
),
onTap: () => controller.openSearchViewAction(context)
TMailButtonWidget.fromIcon(
icon: controller.imagePaths.icSearchBar,
backgroundColor: Colors.transparent,
iconColor: AppColor.primaryColor,
tooltipMessage: AppLocalizations.of(context).searchForFolders,
onTapActionCallback: () => controller.openSearchViewAction(context)
),
TMailButtonWidget.fromIcon(
icon: controller.imagePaths.icAddNewFolder,
backgroundColor: Colors.transparent,
iconColor: AppColor.primaryColor,
tooltipMessage: AppLocalizations.of(context).newFolder,
onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
),
buildIconWeb(
minSize: 40,
iconSize: 20,
iconPadding: EdgeInsets.zero,
splashRadius: 15,
icon: SvgPicture.asset(
controller.imagePaths.icAddNewFolder,
colorFilter: AppColor.colorTextButton.asFilter(),
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).newFolder,
onTap: () => controller.goToCreateNewMailboxView(context)),
],
)),
)
),
]),
),
Obx(() {
@@ -1,11 +1,6 @@
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/views/button/icon_button_web.dart';
import 'package:core/core.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
@@ -290,33 +285,27 @@ mixin MailboxWidgetMixin {
BaseMailboxController baseMailboxController,
{
required Function(MailboxCategories categories) toggleMailboxCategories,
EdgeInsets? padding
EdgeInsetsGeometry? padding
}
) {
return Padding(
padding: padding ?? EdgeInsets.only(
top: 10,
left: responsiveUtils.isDesktop(context) ? 0 : 16,
right: responsiveUtils.isDesktop(context) ? 0 : 16
),
padding: padding ?? EdgeInsets.zero,
child: Row(children: [
Obx(() {
final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
return buildIconWeb(
splashRadius: 12,
iconPadding: EdgeInsets.zero,
minSize: 12,
icon: SvgPicture.asset(
expandMode == ExpandMode.EXPAND
? imagePaths.icArrowBottom
: DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icArrowLeft : imagePaths.icArrowRight,
colorFilter: AppColor.primaryColor.asFilter(),
fit: BoxFit.fill
),
tooltip: expandMode == ExpandMode.EXPAND
return TMailButtonWidget.fromIcon(
icon: expandMode == ExpandMode.EXPAND
? imagePaths.icArrowBottom
: DirectionUtils.isDirectionRTLByLanguage(context)
? imagePaths.icArrowLeft
: imagePaths.icArrowRight,
iconColor: AppColor.primaryColor,
backgroundColor: Colors.transparent,
padding: EdgeInsets.zero,
tooltipMessage: expandMode == ExpandMode.EXPAND
? AppLocalizations.of(context).collapse
: AppLocalizations.of(context).expand,
onTap: () => toggleMailboxCategories(categories)
onTapActionCallback: () => toggleMailboxCategories(categories)
);
}),
Expanded(child: Text(
@@ -1,10 +1,8 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/extensions/presentation_mailbox_extension.dart';
import 'package:model/mailbox/expand_mode.dart';
@@ -36,20 +34,14 @@ class LeadingMailboxItemWidget extends StatelessWidget {
return Row(children: [
if (mailboxNode.hasChildren())
Padding(
padding: LeadingMailboxItemWidgetStyles.expandIconPadding,
child: buildIconWeb(
icon: SvgPicture.asset(
_getExpandIcon(context, imagePaths),
colorFilter: _expandIconColor.asFilter(),
fit: BoxFit.fill,
),
splashRadius: LeadingMailboxItemWidgetStyles.expandIconSplashRadius,
iconPadding: EdgeInsets.zero,
minSize: LeadingMailboxItemWidgetStyles.expandIconSize,
tooltip: _getExpandTooltipMessage(context),
onTap: () => onExpandFolderActionClick?.call(mailboxNode)
),
TMailButtonWidget.fromIcon(
icon: _getExpandIcon(context, imagePaths),
iconColor: _expandIconColor,
padding: EdgeInsets.zero,
margin: const EdgeInsetsDirectional.only(start: 4),
backgroundColor: Colors.transparent,
tooltipMessage: _getExpandTooltipMessage(context),
onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode)
)
else
const SizedBox(width: LeadingMailboxItemWidgetStyles.emptyBoxSize),
@@ -75,7 +75,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
color: backgroundColorItem
),
padding: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
child: Row(
children: [
LeadingMailboxItemWidget(
@@ -111,7 +116,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
color: backgroundColorItem
),
padding: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
child: Row(
children: [
LeadingMailboxItemWidget(
@@ -147,7 +157,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
color: backgroundColorItem
),
padding: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
@@ -198,7 +213,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
hoverColor: AppColor.colorMailboxHovered,
child: Container(
padding: const EdgeInsets.symmetric(vertical: MailboxItemWidgetStyles.padding),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
color: widget.mailboxNode.isSelected
? AppColor.colorItemSelected
: Colors.transparent,
@@ -37,8 +37,7 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
const SizedBox(height: 16),
const Divider(
color: AppColor.colorDividerMailbox,
height: 0.5,
thickness: 0.2
height: 1
)
],
_buildLoadingView(),
@@ -106,8 +105,8 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
controller.imagePaths,
categories,
controller,
padding: const EdgeInsets.all(8),
toggleMailboxCategories: controller.toggleMailboxCategories
toggleMailboxCategories: controller.toggleMailboxCategories,
padding: EdgeInsetsDirectional.symmetric(vertical: 8)
),
AnimatedContainer(
duration: const Duration(milliseconds: 400),
@@ -1,7 +1,7 @@
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/button/icon_button_web.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
@@ -11,7 +11,6 @@ import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentat
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 MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
@@ -36,10 +35,11 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
onTap: () {},
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: Padding(
padding: const EdgeInsets.all(8),
padding: _mailboxNode.hasChildren()
? const EdgeInsets.symmetric(horizontal: 8, vertical: 5)
: const EdgeInsets.all(8),
child: Row(
children: [
const SizedBox(width: 8),
_buildLeadingMailboxItem(context),
Expanded(child: _buildTitleFolderItem(context)),
if (!_mailboxNode.item.isDefault)
@@ -57,32 +57,36 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
if (_mailboxNode.hasChildren() && _mailboxNode.item.isPersonal)
buildIconWeb(
splashRadius: 12,
iconPadding: EdgeInsets.zero,
minSize: 12,
icon: SvgPicture.asset(
_mailboxNode.expandMode == ExpandMode.EXPAND
? _imagePaths.icExpandFolder
: DirectionUtils.isDirectionRTLByLanguage(context) ? _imagePaths.icBack : _imagePaths.icCollapseFolder,
colorFilter: _mailboxNode.item.allowedToDisplay
? AppColor.primaryColor.asFilter()
: AppColor.colorIconUnSubscribedMailbox.asFilter(),
fit: BoxFit.fill
),
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
TMailButtonWidget.fromIcon(
icon: _getExpandIcon(context, _imagePaths),
iconColor: _mailboxNode.item.allowedToDisplay
? AppColor.primaryColor
: AppColor.colorIconUnSubscribedMailbox,
padding: EdgeInsets.zero,
backgroundColor: Colors.transparent,
tooltipMessage: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(context).collapse
: AppLocalizations.of(context).expand,
onTap: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
onTapActionCallback: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
)
else
const SizedBox(width: 24),
const SizedBox(width: 28),
if (!_mailboxNode.item.isTeamMailboxes)
_buildMailboxIcon(context),
]
);
}
String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
if (_mailboxNode.expandMode == ExpandMode.EXPAND) {
return imagePaths.icArrowBottom;
} else {
return DirectionUtils.isDirectionRTLByLanguage(context)
? imagePaths.icArrowLeft
: imagePaths.icArrowRight;
}
}
Widget _buildTitleFolderItem(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -118,10 +122,7 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
Widget _buildMailboxIcon(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
right: AppUtils.isDirectionRTL(context) ? 0 : 8,
left: AppUtils.isDirectionRTL(context) ? 8 : 0,
),
padding: const EdgeInsetsDirectional.only(end: 8),
child: SvgPicture.asset(
_mailboxNode.item.getMailboxIcon(_imagePaths),
width: 20,