From e6e028f380e6b3a89a0449f914c54d7dc3a06955 Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 8 Jun 2023 15:19:13 +0700 Subject: [PATCH] TF-1915 Sync set padding for multiple platform (cherry picked from commit 2dca49df4242119b7debbaf4d6fd12697d6955c9) --- .../composer/presentation/composer_view.dart | 4 +- .../presentation/composer_view_web.dart | 4 +- .../presentation/sending_queue_view.dart | 30 ++-- .../utils/sending_queue_utils.dart | 39 ++++++ .../widgets/app_bar_sending_queue_widget.dart | 129 +++++++++--------- .../banner_message_sending_queue_widget.dart | 63 +++++---- 6 files changed, 160 insertions(+), 109 deletions(-) create mode 100644 lib/features/sending_queue/presentation/utils/sending_queue_utils.dart diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index c4ee6396b..4521ce0f4 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -774,9 +774,9 @@ class ComposerView extends GetWidget } int _getMaxItemRowListAttachment(BuildContext context, BoxConstraints constraints) { - if (constraints.maxWidth < responsiveUtils.minTabletWidth) { + if (constraints.maxWidth < ResponsiveUtils.minTabletWidth) { return 2; - } else if (constraints.maxWidth < responsiveUtils.minTabletLargeWidth) { + } else if (constraints.maxWidth < ResponsiveUtils.minTabletLargeWidth) { return 3; } else { return 4; diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index f7f2caacf..44559884e 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -929,9 +929,9 @@ class ComposerView extends GetWidget } int _getMaxItemRowListAttachment(BuildContext context, BoxConstraints constraints) { - if (constraints.maxWidth < responsiveUtils.minTabletWidth) { + if (constraints.maxWidth < ResponsiveUtils.minTabletWidth) { return 2; - } else if (constraints.maxWidth < responsiveUtils.minTabletLargeWidth) { + } else if (constraints.maxWidth < ResponsiveUtils.minTabletLargeWidth) { return 3; } else { return 4; diff --git a/lib/features/sending_queue/presentation/sending_queue_view.dart b/lib/features/sending_queue/presentation/sending_queue_view.dart index 7cfe51a3d..2f72ca840 100644 --- a/lib/features/sending_queue/presentation/sending_queue_view.dart +++ b/lib/features/sending_queue/presentation/sending_queue_view.dart @@ -1,5 +1,6 @@ import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/utils/app_logger.dart'; import 'package:flutter/material.dart'; import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/base/widget/compose_floating_button.dart'; @@ -53,20 +54,21 @@ class SendingQueueView extends GetWidget with AppLoaderM Widget _buildListSendingEmails(BuildContext context) { return Obx(() { if (controller.dashboardController!.listSendingEmails.isNotEmpty) { - return ListView.builder( - controller: controller.listSendingEmailController, - padding: EdgeInsets.zero, - itemCount: controller.dashboardController!.listSendingEmails.length, - itemBuilder: (context, index) { - return Obx(() => SendingEmailTileWidget( - sendingEmail: controller.dashboardController!.listSendingEmails[index], - selectMode: controller.selectionState.value, - onLongPressAction: controller.handleOnLongPressAction, - onSelectLeadingAction: controller.toggleSelectionSendingEmail, - onTapAction: (actionType, listSendingEmails) => - controller.handleSendingEmailActionType(context, actionType, [listSendingEmails]))); - } - ); + return LayoutBuilder(builder: (context, constraints) { + log('SendingQueueView::_buildListSendingEmails(): MAX_WIDTH: ${constraints.maxWidth}'); + return ListView.builder( + controller: controller.listSendingEmailController, + itemCount: controller.dashboardController!.listSendingEmails.length, + itemBuilder: (context, index) { + return Obx(() => SendingEmailTileWidget( + sendingEmail: controller.dashboardController!.listSendingEmails[index], + selectMode: controller.selectionState.value, + onLongPressAction: controller.handleOnLongPressAction, + onSelectLeadingAction: controller.toggleSelectionSendingEmail, + onTapAction: (actionType, listSendingEmails) => controller.handleSendingEmailActionType(context, actionType, [listSendingEmails]))); + } + ); + }); } else { return const SizedBox.shrink(); } diff --git a/lib/features/sending_queue/presentation/utils/sending_queue_utils.dart b/lib/features/sending_queue/presentation/utils/sending_queue_utils.dart new file mode 100644 index 000000000..83c789450 --- /dev/null +++ b/lib/features/sending_queue/presentation/utils/sending_queue_utils.dart @@ -0,0 +1,39 @@ + +import 'package:core/core.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:tmail_ui_user/features/composer/domain/model/sending_email.dart'; + +class SendingQueueUtils { + + static EdgeInsets getPaddingAppBarByResponsiveSize(double width) { + if (ResponsiveUtils.isMatchedMobileWidth(width)) { + return const EdgeInsets.symmetric(horizontal: 10); + } else { + return const EdgeInsets.symmetric(horizontal: 24); + } + } + + static EdgeInsets getMarginBannerMessageByResponsiveSize(double width) { + if (ResponsiveUtils.isMatchedMobileWidth(width)) { + return const EdgeInsets.only(top: 16, left: 16, right: 16); + } else { + return const EdgeInsets.symmetric(horizontal: 24, vertical: 16); + } + } + + static EdgeInsets getPaddingItemListViewByResponsiveSize(double width) { + if (ResponsiveUtils.isMatchedMobileWidth(width)) { + return const EdgeInsets.symmetric(horizontal: 16, vertical: 8); + } else { + return const EdgeInsets.symmetric(horizontal: 32, vertical: 8); + } + } + + static EdgeInsets getPaddingDividerListViewByResponsiveSize(double width, SendingEmail sendingEmail) { + if (ResponsiveUtils.isMatchedMobileWidth(width)) { + return EdgeInsets.only(left: 84, right: 8, top: sendingEmail.isReady ? 0 : 8); + } else { + return EdgeInsets.only(left: 100, right: 24, top: sendingEmail.isReady ? 0 : 8); + } + } +} \ No newline at end of file diff --git a/lib/features/sending_queue/presentation/widgets/app_bar_sending_queue_widget.dart b/lib/features/sending_queue/presentation/widgets/app_bar_sending_queue_widget.dart index 934058efe..fea22483e 100644 --- a/lib/features/sending_queue/presentation/widgets/app_bar_sending_queue_widget.dart +++ b/lib/features/sending_queue/presentation/widgets/app_bar_sending_queue_widget.dart @@ -3,11 +3,13 @@ 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/utils/app_logger.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:model/mailbox/select_mode.dart'; import 'package:tmail_ui_user/features/composer/domain/model/sending_email.dart'; +import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/utils/app_utils.dart'; @@ -30,73 +32,76 @@ class AppBarSendingQueueWidget extends StatelessWidget { Widget build(BuildContext context) { final imagePaths = Get.find(); - return Container( - height: 52, - color: Colors.white, - padding: const EdgeInsets.symmetric(horizontal: 10), - child: Row( - children: [ - if (selectMode == SelectMode.INACTIVE) - buildIconWeb( - icon: SvgPicture.asset( - imagePaths.icMenuMailbox, - colorFilter: AppColor.colorTextButton.asFilter(), - fit: BoxFit.fill - ), - tooltip: AppLocalizations.of(context).openMailboxMenu, - onTap: onOpenMailboxMenu - ) - else - Padding( - padding: const EdgeInsets.only(left: 8), - child: Material( - color: Colors.transparent, - borderRadius: BorderRadius.circular(15), - child: InkWell( - onTap: onBackAction, + return LayoutBuilder(builder: (context, constraints) { + log('AppBarSendingQueueWidget::build(): MAX_WIDTH: ${constraints.maxWidth}'); + return Container( + height: 52, + color: Colors.white, + padding: SendingQueueUtils.getPaddingAppBarByResponsiveSize(constraints.maxWidth), + child: Row( + children: [ + if (selectMode == SelectMode.INACTIVE) + buildIconWeb( + icon: SvgPicture.asset( + imagePaths.icMenuMailbox, + colorFilter: AppColor.colorTextButton.asFilter(), + fit: BoxFit.fill + ), + tooltip: AppLocalizations.of(context).openMailboxMenu, + onTap: onOpenMailboxMenu + ) + else + Padding( + padding: const EdgeInsets.only(left: 8), + child: Material( + color: Colors.transparent, borderRadius: BorderRadius.circular(15), - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - SvgPicture.asset( - AppUtils.isDirectionRTL(context) ? imagePaths.icCollapseFolder : imagePaths.icBack, - colorFilter: AppColor.colorTextButton.asFilter(), - fit: BoxFit.fill - ), - const SizedBox(width: 8), - Text( - listSendingEmails.length.toString(), - maxLines: 1, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - style: const TextStyle( - fontSize: 17, - color: AppColor.colorTextButton + child: InkWell( + onTap: onBackAction, + borderRadius: BorderRadius.circular(15), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + SvgPicture.asset( + AppUtils.isDirectionRTL(context) ? imagePaths.icCollapseFolder : imagePaths.icBack, + colorFilter: AppColor.colorTextButton.asFilter(), + fit: BoxFit.fill + ), + const SizedBox(width: 8), + Text( + listSendingEmails.length.toString(), + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + softWrap: CommonTextStyle.defaultSoftWrap, + style: const TextStyle( + fontSize: 17, + color: AppColor.colorTextButton + ) ) - ) - ] + ] + ), ), ), ), ), - ), - Expanded(child: Text( - AppLocalizations.of(context).sendingQueue, - maxLines: 1, - textAlign: TextAlign.center, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - style: const TextStyle( - fontSize: 21, - color: Colors.black, - fontWeight: FontWeight.bold - ) - )), - const SizedBox(width: 50) - ], - ), - ); + Expanded(child: Text( + AppLocalizations.of(context).sendingQueue, + maxLines: 1, + textAlign: TextAlign.center, + overflow: CommonTextStyle.defaultTextOverFlow, + softWrap: CommonTextStyle.defaultSoftWrap, + style: const TextStyle( + fontSize: 21, + color: Colors.black, + fontWeight: FontWeight.bold + ) + )), + const SizedBox(width: 50) + ], + ), + ); + }); } } \ No newline at end of file diff --git a/lib/features/sending_queue/presentation/widgets/banner_message_sending_queue_widget.dart b/lib/features/sending_queue/presentation/widgets/banner_message_sending_queue_widget.dart index 14a5c57d3..d83549e90 100644 --- a/lib/features/sending_queue/presentation/widgets/banner_message_sending_queue_widget.dart +++ b/lib/features/sending_queue/presentation/widgets/banner_message_sending_queue_widget.dart @@ -1,8 +1,10 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/utils/app_logger.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/routes/route_navigation.dart'; @@ -14,34 +16,37 @@ class BannerMessageSendingQueueWidget extends StatelessWidget { Widget build(BuildContext context) { final imagePath = getBinding(); - return Container( - margin: const EdgeInsets.only(top: 16, left: 16, right: 16), - padding: const EdgeInsets.all(16), - decoration: const BoxDecoration( - color: AppColor.colorBannerMessageSendingQueue, - borderRadius: BorderRadius.all(Radius.circular(8)) - ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SvgPicture.asset( - imagePath!.icMailboxSendingQueue, - fit: BoxFit.fill, - width: 20, - height: 20, - colorFilter: AppColor.colorTitleSendingItem.asFilter(), - ), - const SizedBox(width: 8), - Expanded(child: Text( - AppLocalizations.of(context).bannerMessageSendingQueueView, - style: const TextStyle( - fontSize: 15, - color: Colors.black, - fontWeight: FontWeight.normal - ) - )) - ] - ), - ); + return LayoutBuilder(builder: (context, constraints) { + log('BannerMessageSendingQueueWidget::build(): MAX_WIDTH: ${constraints.maxWidth}'); + return Container( + margin: SendingQueueUtils.getMarginBannerMessageByResponsiveSize(constraints.maxWidth), + padding: const EdgeInsets.all(16), + decoration: const BoxDecoration( + color: AppColor.colorBannerMessageSendingQueue, + borderRadius: BorderRadius.all(Radius.circular(8)) + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SvgPicture.asset( + imagePath!.icMailboxSendingQueue, + fit: BoxFit.fill, + width: 20, + height: 20, + colorFilter: AppColor.colorTitleSendingItem.asFilter(), + ), + const SizedBox(width: 8), + Expanded(child: Text( + AppLocalizations.of(context).bannerMessageSendingQueueView, + style: const TextStyle( + fontSize: 15, + color: Colors.black, + fontWeight: FontWeight.normal + ) + )) + ] + ), + ); + }); } } \ No newline at end of file