From c3ee166c00a32027543e11050e42e700c38de431 Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 9 Sep 2025 13:41:52 +0700 Subject: [PATCH] TF-3985 Change icons and style to be consistent with Twake drive storage --- .../extensions/color_extension.dart | 1 + .../premium/increase_space_button_widget.dart | 3 +++ .../presentation/mailbox_view_web.dart | 7 +++-- .../domain/extensions/quota_extensions.dart | 11 +++++++- .../quotas/presentation/quotas_view.dart | 26 ++++++++++++++----- .../styles/quotas_view_styles.dart | 4 +-- lib/l10n/intl_messages.arb | 12 ++++++++- lib/main/localizations/app_localizations.dart | 8 ++++++ 8 files changed, 60 insertions(+), 12 deletions(-) diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 68b941201..95bc852ca 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -231,6 +231,7 @@ extension AppColor on Color { static const colorContactViewClearFilterButton = Color(0x001C3D0D); static const steelGrayA540 = Color(0xFF55687D); static const steelGray200 = Color(0xFFAEB7C2); + static const steelGray80 = Color(0xFFE7E8EC); static const blue700 = Color(0xFF208BFF); static const steelGray400 = Color(0xFF818C99); static const steelGray600 = Color(0xFF4E5966); diff --git a/lib/features/base/widget/premium/increase_space_button_widget.dart b/lib/features/base/widget/premium/increase_space_button_widget.dart index c356b0b6e..f768df994 100644 --- a/lib/features/base/widget/premium/increase_space_button_widget.dart +++ b/lib/features/base/widget/premium/increase_space_button_widget.dart @@ -7,6 +7,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class IncreaseSpaceButtonWidget extends StatelessWidget { final ImagePaths imagePaths; + final bool isDesktop; final VoidCallback onTapAction; final EdgeInsetsGeometry? margin; @@ -14,6 +15,7 @@ class IncreaseSpaceButtonWidget extends StatelessWidget { super.key, required this.imagePaths, required this.onTapAction, + this.isDesktop = false, this.margin, }); @@ -22,6 +24,7 @@ class IncreaseSpaceButtonWidget extends StatelessWidget { return Container( constraints: const BoxConstraints(minWidth: 193), height: 44, + width: !isDesktop ? double.infinity : null, margin: margin, child: ConfirmDialogButton( label: AppLocalizations.of(context).increaseYourSpace, diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 1824717d0..380486c41 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -40,14 +40,17 @@ class MailboxView extends BaseMailboxView { Obx(() { final isPremiumAvailable = controller.mailboxDashBoardController.isPremiumAvailable; + final isDesktop = controller.responsiveUtils.isDesktop(context); if (isPremiumAvailable) { return IncreaseSpaceButtonWidget( imagePaths: controller.imagePaths, - margin: const EdgeInsetsDirectional.only( - start: 26, + margin: EdgeInsetsDirectional.only( + start: isDesktop ? 26 : 24, bottom: 8, + end: isDesktop ? 0 : 24, ), + isDesktop: isDesktop, onTapAction: () {}, ); } else { diff --git a/lib/features/quotas/domain/extensions/quota_extensions.dart b/lib/features/quotas/domain/extensions/quota_extensions.dart index d0f78c779..108a6ab6b 100644 --- a/lib/features/quotas/domain/extensions/quota_extensions.dart +++ b/lib/features/quotas/domain/extensions/quota_extensions.dart @@ -15,6 +15,15 @@ extension QuotasExtensions on Quota { String get hardLimitStorageAsString => presentationHardLimit != null ? filesize(presentationHardLimit!.value) : ''; + String get quotaAvailableStorageAsString { + if (used != null && + presentationHardLimit != null && + presentationHardLimit!.value > used!.value) { + return filesize(presentationHardLimit!.value - used!.value); + } + return '0 B'; + } + bool get isWarnLimitReached { if (used != null && warnLimit != null) { return used!.value >= warnLimit!.value * 0.9; @@ -48,7 +57,7 @@ extension QuotasExtensions on Quota { return '${AppLocalizations.of(context).textQuotasOutOfStorage}' '\n${AppLocalizations.of(context).quotaStateLabel(usedStorageAsString, hardLimitStorageAsString)}'; } else { - return AppLocalizations.of(context).quotaStateLabel(usedStorageAsString, hardLimitStorageAsString); + return AppLocalizations.of(context).quotaAvailableLabel(quotaAvailableStorageAsString); } } diff --git a/lib/features/quotas/presentation/quotas_view.dart b/lib/features/quotas/presentation/quotas_view.dart index b44fbd6b2..4884fe146 100644 --- a/lib/features/quotas/presentation/quotas_view.dart +++ b/lib/features/quotas/presentation/quotas_view.dart @@ -1,4 +1,5 @@ import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/theme_utils.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -31,8 +32,8 @@ class QuotasView extends GetWidget { : const EdgeInsets.symmetric(vertical: 16), margin: isDesktop ? const EdgeInsetsDirectional.only(start: 16) - : const EdgeInsetsDirectional.only(start: 24), - width: isDesktop ? 224 : 196, + : const EdgeInsetsDirectional.symmetric(horizontal: 24), + width: isDesktop ? 224 : double.infinity, alignment: AlignmentDirectional.centerStart, child: Column( mainAxisSize: MainAxisSize.min, @@ -51,8 +52,11 @@ class QuotasView extends GetWidget { Expanded( child: Text( AppLocalizations.of(context).storageQuotas, - style: Theme.of(context).textTheme.bodySmall?.copyWith( + style: ThemeUtils.textStyleInter500().copyWith( color: AppColor.steelGray400, + fontSize: 12, + height: 15.76 / 12, + letterSpacing: 0.5, ), maxLines: 1, overflow: TextOverflow.ellipsis, @@ -75,21 +79,31 @@ class QuotasView extends GetWidget { ), const SizedBox(height: QuotasViewStyles.space), SizedBox( - width: QuotasViewStyles.progressBarMaxWidth, + width: isDesktop + ? QuotasViewStyles.progressBarMaxWidth + : double.infinity, child: LinearProgressIndicator( color: octetQuota.getQuotasStateProgressBarColor(), minHeight: QuotasViewStyles.progressBarHeight, backgroundColor: QuotasViewStyles.progressBarBackgroundColor, + borderRadius: const BorderRadius.all( + Radius.circular( + QuotasViewStyles.progressBarBorderRadius, + ), + ), value: octetQuota.usedStoragePercent, ), ), const SizedBox(height: QuotasViewStyles.space), Text( octetQuota.getQuotasStateTitle(context), - style: Theme.of(context).textTheme.bodySmall?.copyWith( + style: ThemeUtils.textStyleInter500().copyWith( color: octetQuota.getQuotasStateTitleColor(), + fontSize: 12, + height: 15.76 / 12, + letterSpacing: 0.5, ), - maxLines: 1, + maxLines: 2, overflow: TextOverflow.ellipsis, ) ], diff --git a/lib/features/quotas/presentation/styles/quotas_view_styles.dart b/lib/features/quotas/presentation/styles/quotas_view_styles.dart index e48d76cfa..fe4c56429 100644 --- a/lib/features/quotas/presentation/styles/quotas_view_styles.dart +++ b/lib/features/quotas/presentation/styles/quotas_view_styles.dart @@ -9,7 +9,7 @@ class QuotasViewStyles { static const double space = 8; static const double progressBarHeight = 3; static const double progressBarMaxWidth = 193; + static const double progressBarBorderRadius = 5; - static const Color progressBarBackgroundColor = AppColor.colorDivider; - static const Color topLineColor = AppColor.colorDividerHorizontal; + static const Color progressBarBackgroundColor = AppColor.steelGray80; } \ No newline at end of file diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 2a85c1168..1a2dc8ec6 100644 --- a/lib/l10n/intl_messages.arb +++ b/lib/l10n/intl_messages.arb @@ -1,5 +1,5 @@ { - "@@last_modified": "2025-09-09T13:12:15.883838", + "@@last_modified": "2025-09-09T13:40:24.145761", "initializing_data": "Initializing data...", "@initializing_data": { "type": "text", @@ -4677,5 +4677,15 @@ "type": "text", "placeholders_order": [], "placeholders": {} + }, + "quotaAvailableLabel": "{count} available", + "@quotaAvailableLabel": { + "type": "text", + "placeholders_order": [ + "count" + ], + "placeholders": { + "count": {} + } } } \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index 6f3835612..b7854653b 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -4935,4 +4935,12 @@ class AppLocalizations { name: 'increaseYourSpace', ); } + + String quotaAvailableLabel(String count) { + return Intl.message( + '$count available', + name: 'quotaAvailableLabel', + args: [count], + ); + } }