TF-2064 Update UI for quotas view

(cherry picked from commit 079c3a548e3532bcbeb43464ed8987093e83a7eb)

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)],

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 QuotasView()
-                            : const SizedBox.shrink(),
+                          : const SizedBox.shrink(),
                         ),
                         Obx(() {
                           final appInformation = controller.mailboxDashBoardController.appInformation.value;

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(),
           ]),
         )
     );

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

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<GetQuotasInteractor>()));
@@ -39,5 +40,4 @@ class QuotasControllerBindings extends BaseBindings {
   void bindingsRepositoryImpl() {
     Get.lazyPut(() => QuotasRepositoryImpl(Get.find<QuotasDataSource>()));
   }
-
 }

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<MailboxDashBoardController>();
+
+  final mailboxDashBoardController = Get.find<MailboxDashBoardController>();
+  final responsiveUtils = Get.find<ResponsiveUtils>();
+  final imagePaths = Get.find<ImagePaths>();
+
   final GetQuotasInteractor _getQuotasInteractor;
+
   final usedCapacity = Rx<num>(0);
   final limitCapacity = Rx<num>(0);
   final warningLimitCapacity = Rx<num>(0);
@@ -31,9 +36,6 @@ class QuotasController extends BaseController {
           (quotasState.value == QuotasState.runningOutOfStorage
               || quotasState.value == QuotasState.runOutOfStorage);
 
-  final ImagePaths imagePaths = Get.find<ImagePaths>();
-  final ResponsiveUtils responsiveUtils = Get.find<ResponsiveUtils>();
-
   QuotasController(this._getQuotasInteractor);
 
   void _getQuotasAction(AccountId accountId, Session session) {

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<QuotasController> {
+
+  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;
+    }
+  }
+}

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;
+}

lib/features/quotas/presentation/widget/quotas_footer_widget.dart

@@ -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<QuotasController> {
-
-  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(),
-    );
-  }
-}