From 9a2e838d03faee53278e22bc3a4947452d30f8d1 Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 4 Aug 2023 17:56:38 +0700 Subject: [PATCH] TF-2064 Update UI for quotas view (cherry picked from commit 079c3a548e3532bcbeb43464ed8987093e83a7eb) --- .../extensions/color_extension.dart | 1 + .../mailbox/presentation/mailbox_view.dart | 6 +- .../presentation/mailbox_view_web.dart | 8 +- .../bindings/mailbox_dashboard_bindings.dart | 4 +- ...ler_bindings.dart => quotas_bindings.dart} | 4 +- .../presentation/quotas_controller.dart | 10 +- .../quotas/presentation/quotas_view.dart | 102 ++++++++++++++++++ .../styles/quotas_view_styles.dart | 26 +++++ .../widget/quotas_footer_widget.dart | 71 ------------ 9 files changed, 147 insertions(+), 85 deletions(-) rename lib/features/quotas/presentation/{quotas_controller_bindings.dart => quotas_bindings.dart} (96%) create mode 100644 lib/features/quotas/presentation/quotas_view.dart create mode 100644 lib/features/quotas/presentation/styles/quotas_view_styles.dart delete mode 100644 lib/features/quotas/presentation/widget/quotas_footer_widget.dart diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index bed56d6de..a7e83102e 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -200,6 +200,7 @@ extension AppColor on Color { static const colorOrganizerMailto = Color(0xFFB3B3B3); static const colorMailto = Color(0xFFB3B3B3); static const colorEventDescriptionBackground = Color(0x05000000); + static const colorLabelQuotas = Color(0xFF818C99); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index 1f3dad9d8..17ab108a2 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -12,7 +12,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_s import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/dashboard_routes.dart'; -import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_footer_widget.dart'; +import 'package:tmail_ui_user/features/quotas/presentation/quotas_view.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/utils/app_config.dart'; @@ -65,8 +65,8 @@ class MailboxView extends BaseMailboxView { ]), ), Obx(() => !controller.isSelectionEnabled() - ? const QuotasFooterWidget() - : const SizedBox.shrink(), + ? const QuotasView() + : const SizedBox.shrink(), ), Obx(() { final appInformation = controller.mailboxDashBoardController.appInformation.value; diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 6a5b79054..c147a94da 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -8,7 +8,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.da import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart'; -import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_footer_widget.dart'; +import 'package:tmail_ui_user/features/quotas/presentation/quotas_view.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/utils/app_config.dart'; @@ -21,7 +21,9 @@ class MailboxView extends BaseMailboxView { return Drawer( elevation: responsiveUtils.isDesktop(context) ? 0 : 16.0, child: Scaffold( - backgroundColor: Colors.white, + backgroundColor: responsiveUtils.isWebDesktop(context) + ? AppColor.colorBgDesktop + : Colors.white, body: Column(children: [ if (!responsiveUtils.isDesktop(context)) _buildLogoApp(context), if (!responsiveUtils.isDesktop(context)) @@ -45,7 +47,7 @@ class MailboxView extends BaseMailboxView { ), ), )), - const QuotasFooterWidget(), + const QuotasView(), ]), ) ); diff --git a/lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart b/lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart index 0b507008d..507832ff4 100644 --- a/lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart +++ b/lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart @@ -98,7 +98,7 @@ import 'package:tmail_ui_user/features/offline_mode/manager/new_email_cache_work import 'package:tmail_ui_user/features/offline_mode/manager/opened_email_cache_manager.dart'; import 'package:tmail_ui_user/features/offline_mode/manager/opened_email_cache_worker_queue.dart'; import 'package:tmail_ui_user/features/offline_mode/manager/sending_email_cache_manager.dart'; -import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller_bindings.dart'; +import 'package:tmail_ui_user/features/quotas/presentation/quotas_bindings.dart'; import 'package:tmail_ui_user/features/search/email/domain/usecases/refresh_changes_search_email_interactor.dart'; import 'package:tmail_ui_user/features/search/email/presentation/search_email_bindings.dart'; import 'package:tmail_ui_user/features/sending_queue/domain/usecases/get_all_sending_email_interactor.dart'; @@ -140,7 +140,7 @@ class MailboxDashBoardBindings extends BaseBindings { ThreadBindings().dependencies(); EmailBindings().dependencies(); SearchEmailBindings().dependencies(); - QuotasControllerBindings().dependencies(); + QuotasBindings().dependencies(); } @override diff --git a/lib/features/quotas/presentation/quotas_controller_bindings.dart b/lib/features/quotas/presentation/quotas_bindings.dart similarity index 96% rename from lib/features/quotas/presentation/quotas_controller_bindings.dart rename to lib/features/quotas/presentation/quotas_bindings.dart index 1c3fd540b..ed57fd337 100644 --- a/lib/features/quotas/presentation/quotas_controller_bindings.dart +++ b/lib/features/quotas/presentation/quotas_bindings.dart @@ -9,7 +9,8 @@ import 'package:tmail_ui_user/features/quotas/domain/use_case/get_quotas_interac import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller.dart'; import 'package:tmail_ui_user/main/exceptions/remote_exception_thrower.dart'; -class QuotasControllerBindings extends BaseBindings { +class QuotasBindings extends BaseBindings { + @override void bindingsController() { Get.put(QuotasController(Get.find())); @@ -39,5 +40,4 @@ class QuotasControllerBindings extends BaseBindings { void bindingsRepositoryImpl() { Get.lazyPut(() => QuotasRepositoryImpl(Get.find())); } - } \ No newline at end of file diff --git a/lib/features/quotas/presentation/quotas_controller.dart b/lib/features/quotas/presentation/quotas_controller.dart index 5a00a4dad..990006f8f 100644 --- a/lib/features/quotas/presentation/quotas_controller.dart +++ b/lib/features/quotas/presentation/quotas_controller.dart @@ -13,8 +13,13 @@ import 'package:tmail_ui_user/features/quotas/presentation/model/quotas_state.da import 'package:tmail_ui_user/main/error/capability_validator.dart'; class QuotasController extends BaseController { - final MailboxDashBoardController mailboxDashBoardController = Get.find(); + + final mailboxDashBoardController = Get.find(); + final responsiveUtils = Get.find(); + final imagePaths = Get.find(); + final GetQuotasInteractor _getQuotasInteractor; + final usedCapacity = Rx(0); final limitCapacity = Rx(0); final warningLimitCapacity = Rx(0); @@ -31,9 +36,6 @@ class QuotasController extends BaseController { (quotasState.value == QuotasState.runningOutOfStorage || quotasState.value == QuotasState.runOutOfStorage); - final ImagePaths imagePaths = Get.find(); - final ResponsiveUtils responsiveUtils = Get.find(); - QuotasController(this._getQuotasInteractor); void _getQuotasAction(AccountId accountId, Session session) { diff --git a/lib/features/quotas/presentation/quotas_view.dart b/lib/features/quotas/presentation/quotas_view.dart new file mode 100644 index 000000000..9fcc7528f --- /dev/null +++ b/lib/features/quotas/presentation/quotas_view.dart @@ -0,0 +1,102 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/quotas/presentation/model/quotas_state.dart'; +import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller.dart'; +import 'package:tmail_ui_user/features/quotas/presentation/styles/quotas_view_styles.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class QuotasView extends GetWidget { + + const QuotasView({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Obx(() { + if (controller.quotasState.value != QuotasState.notAvailable) { + return LayoutBuilder(builder: (context, constraints) { + return Container( + padding: const EdgeInsetsDirectional.only( + start: QuotasViewStyles.padding, + top: QuotasViewStyles.padding, + bottom: QuotasViewStyles.bottomPadding + ), + margin: controller.responsiveUtils.isWebDesktop(context) + ? const EdgeInsetsDirectional.only(end: QuotasViewStyles.margin) + : null, + decoration: BoxDecoration( + color: controller.responsiveUtils.isWebDesktop(context) + ? QuotasViewStyles.webBackgroundColor + : QuotasViewStyles.mobileBackgroundColor, + border: const Border( + top: BorderSide( // <--- left side + color: QuotasViewStyles.topLineColor, + width: QuotasViewStyles.topLineSize, + ) + ), + ), + alignment: AlignmentDirectional.centerStart, + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + SvgPicture.asset( + controller.imagePaths.icQuotas, + width: QuotasViewStyles.iconSize, + height: QuotasViewStyles.iconSize, + fit: BoxFit.fill, + ), + const SizedBox(width: QuotasViewStyles.iconPadding), + Text( + AppLocalizations.of(context).storageQuotas, + style: const TextStyle( + fontSize: QuotasViewStyles.labelTextSize, + fontWeight: QuotasViewStyles.labelFontWeight, + color: QuotasViewStyles.labelTextColor + ), + ) + ], + ), + const SizedBox(height: QuotasViewStyles.space), + SizedBox( + width: _getProgressBarMaxWith(constraints.maxWidth), + child: LinearProgressIndicator( + color: controller.quotasState.value.getColorProgress(), + minHeight: QuotasViewStyles.progressBarHeight, + backgroundColor: QuotasViewStyles.progressBarBackgroundColor, + value: controller.progressUsedCapacity, + ), + ), + const SizedBox(height: QuotasViewStyles.space), + Text( + controller.quotasState.value.getQuotasFooterText( + context, + controller.usedCapacity.value, + controller.limitCapacity.value, + ), + style: TextStyle( + fontSize: QuotasViewStyles.progressStateTextSize, + fontWeight: QuotasViewStyles.progressStateFontWeight, + color: controller.quotasState.value.getColorQuotasFooterText(), + ), + ) + ], + ), + ); + }); + } else { + return const SizedBox.shrink(); + } + }); + } + + double _getProgressBarMaxWith(double maxWith) { + if (maxWith > QuotasViewStyles.progressBarMaxWidth) { + return QuotasViewStyles.progressBarMaxWidth; + } else { + return maxWith; + } + } +} diff --git a/lib/features/quotas/presentation/styles/quotas_view_styles.dart b/lib/features/quotas/presentation/styles/quotas_view_styles.dart new file mode 100644 index 000000000..c53be437a --- /dev/null +++ b/lib/features/quotas/presentation/styles/quotas_view_styles.dart @@ -0,0 +1,26 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class QuotasViewStyles { + static const double padding = 16; + static const double margin = 16; + static const double bottomPadding = 24; + static const double iconPadding = 12; + static const double iconSize = 24; + static const double labelTextSize = 13; + static const double space = 8; + static const double progressBarHeight = 3; + static const double progressBarMaxWidth = 168; + static const double progressStateTextSize = 13; + static const double topLineSize = 1; + + static const Color labelTextColor = AppColor.colorLabelQuotas; + static const Color webBackgroundColor = AppColor.colorBgDesktop; + static const Color mobileBackgroundColor = Colors.white; + static const Color progressBarBackgroundColor = AppColor.colorDivider; + static const Color topLineColor = AppColor.colorDividerHorizontal; + + static const FontWeight labelFontWeight = FontWeight.w400; + static const FontWeight progressStateFontWeight = FontWeight.w400; +} \ No newline at end of file diff --git a/lib/features/quotas/presentation/widget/quotas_footer_widget.dart b/lib/features/quotas/presentation/widget/quotas_footer_widget.dart deleted file mode 100644 index 0755b93a4..000000000 --- a/lib/features/quotas/presentation/widget/quotas_footer_widget.dart +++ /dev/null @@ -1,71 +0,0 @@ -import 'package:core/core.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; -import 'package:get/get.dart'; -import 'package:tmail_ui_user/features/quotas/presentation/model/quotas_state.dart'; -import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; - -class QuotasFooterWidget extends GetWidget { - - const QuotasFooterWidget({ - Key? key, - this.padding - }) : super(key: key); - - final EdgeInsets? padding; - - @override - Widget build(BuildContext context) { - return Obx( - () => controller.quotasState.value != QuotasState.notAvailable - ? Container( - color: AppColor.colorBgDesktop, - padding: padding ?? const EdgeInsets.symmetric(vertical: 12, horizontal: 24), - alignment: Alignment.centerLeft, - child: IntrinsicWidth( - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - SvgPicture.asset(controller.imagePaths.icQuotas), - const SizedBox(width: 12), - Text( - AppLocalizations.of(context).storageQuotas, - style: const TextStyle( - fontSize: 13, - fontWeight: FontWeight.w400, - color: AppColor.loginTextFieldHintColor), - ) - ], - ), - const SizedBox(height: 8), - LinearProgressIndicator( - color: controller.quotasState.value.getColorProgress(), - minHeight: 3, - backgroundColor: AppColor.colorDivider, - value: controller.progressUsedCapacity, - ), - const SizedBox(height: 8), - Text( - controller.quotasState.value.getQuotasFooterText( - context, - controller.usedCapacity.value, - controller.limitCapacity.value, - ), - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w400, - color: controller.quotasState.value.getColorQuotasFooterText(), - ), - ) - ], - ), - ), - ) - : const SizedBox.shrink(), - ); - } -}