eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-2064 Update UI for quotas view

Browse Source 
(cherry picked from commit 079c3a548e3532bcbeb43464ed8987093e83a7eb)
This commit is contained in:
dab246
2023-08-04 17:56:38 +07:00
committed by Dat Vu
parent 4a11a0779a
commit 9a2e838d03
9 changed files with 147 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+1
View File
@@ -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
+3 -3
View File
@@ -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;
lib/features/mailbox/presentation/mailbox_view_web.dart
+5 -3
View File
@@ -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
+2 -2
View File
@@ -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_controller_bindings.dart → lib/features/quotas/presentation/quotas_bindings.dart
+2 -2
View File
@@ -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
+6 -4
View File
@@ -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
+102
View File
@@ -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
+26
View File
@@ -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
-71
View File
@@ -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(),
);
}
}