From 9ac7ebd7878bbc72895001d50753e75ae49136b2 Mon Sep 17 00:00:00 2001 From: DatDang Date: Thu, 14 Mar 2024 08:43:21 +0700 Subject: [PATCH] TF-2615 improve always read receipt loading mechanism & UX --- .../always_read_receipt_controller.dart | 6 +- .../always_read_receipt_view.dart | 117 ++++++++++-------- 2 files changed, 66 insertions(+), 57 deletions(-) diff --git a/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_controller.dart b/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_controller.dart index 4f11a3c4f..62c6a5e28 100644 --- a/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_controller.dart +++ b/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_controller.dart @@ -19,7 +19,7 @@ class AlwaysReadReceiptController extends BaseController { final GetAlwaysReadReceiptSettingInteractor _getAlwaysReadReceiptSettingInteractor; final UpdateAlwaysReadReceiptSettingInteractor _updateAlwaysReadReceiptSettingInteractor; - final alwaysReadReceipt = true.obs; + final alwaysReadReceipt = Rxn(); bool get isLoading => viewState.value.fold( (failure) => false, (success) => success is GettingAlwaysReadReceiptSetting || success is UpdatingAlwaysReadReceiptSetting); @@ -71,12 +71,12 @@ class AlwaysReadReceiptController extends BaseController { } void toggleAlwaysReadReceipt() { - if (isLoading) return; + if (isLoading || alwaysReadReceipt.value == null) return; final accountId = _manageAccountDashBoardController.accountId.value; if (accountId != null) { consumeState(_updateAlwaysReadReceiptSettingInteractor.execute( accountId, - !alwaysReadReceipt.value)); + !alwaysReadReceipt.value!)); } } diff --git a/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_view.dart b/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_view.dart index cc8d9b05a..760999122 100644 --- a/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_view.dart +++ b/lib/features/manage_account/presentation/always_read_receipt/always_read_receipt_view.dart @@ -14,67 +14,76 @@ class AlwaysReadReceiptView extends GetWidget with Widget build(BuildContext context) { return Scaffold( backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils), - body: Container( - color: SettingsUtils.getContentBackgroundColor(context, controller.responsiveUtils), - decoration: SettingsUtils.getBoxDecorationForContent(context, controller.responsiveUtils), - margin: SettingsUtils.getMarginViewForSettingDetails(context, controller.responsiveUtils), - padding: SettingsUtils.getPaddingAlwaysReadReceiptSetting(context, controller.responsiveUtils), + body: Padding( + padding: SettingsUtils.getMarginViewForSettingDetails(context, controller.responsiveUtils), child: Column( children: [ Obx(() { if (!controller.isLoading) { - return const SizedBox(height: 3); + return const SizedBox.shrink(); } - return horizontalLoadingWidget; + return Padding( + padding: const EdgeInsets.only(bottom: 8), + child: horizontalLoadingWidget, + ); }), Expanded( - child: ListView( - physics: const ClampingScrollPhysics(), - children: [ - Text( - AppLocalizations.of(context).emailReadReceipts, - style: const TextStyle( - fontSize: 17, - height: 24 / 17, - fontWeight: FontWeight.w500, - color: Colors.black)), - const SizedBox(height: 8), - Text( - AppLocalizations.of(context).emailReadReceiptsSettingExplanation, - style: const TextStyle( - fontSize: 16, - height: 20 / 16, - color: AppColor.colorTextSettingDescriptions)), - const SizedBox(height: 24), - Row( - children: [ - InkWell( - onTap: controller.toggleAlwaysReadReceipt, - child: Padding( - padding: const EdgeInsets.all(4), - child: Obx(() { - return SvgPicture.asset( - controller.alwaysReadReceipt.value - ? controller.imagePaths.icSwitchOn - : controller.imagePaths.icSwitchOff, - fit: BoxFit.fill, - width: 32, - height: 20); - }), - ), - ), - const SizedBox(width: 12), - Expanded( - child: Text( - AppLocalizations.of(context).emailReadReceiptsToggleDescription, - style: const TextStyle( - fontSize: 16, - height: 20 / 16, - color: Colors.black), - )), - ], - ), - ], + child: Container( + color: SettingsUtils.getContentBackgroundColor(context, controller.responsiveUtils), + decoration: SettingsUtils.getBoxDecorationForContent(context, controller.responsiveUtils), + padding: SettingsUtils.getPaddingAlwaysReadReceiptSetting(context, controller.responsiveUtils), + child: ListView( + physics: const ClampingScrollPhysics(), + children: [ + Text( + AppLocalizations.of(context).emailReadReceipts, + style: const TextStyle( + fontSize: 17, + height: 24 / 17, + fontWeight: FontWeight.w500, + color: Colors.black)), + const SizedBox(height: 8), + Text( + AppLocalizations.of(context).emailReadReceiptsSettingExplanation, + style: const TextStyle( + fontSize: 16, + height: 20 / 16, + color: AppColor.colorTextSettingDescriptions)), + const SizedBox(height: 24), + Obx(() { + if (controller.alwaysReadReceipt.value == null) { + return const SizedBox.shrink(); + } + + return Row( + children: [ + InkWell( + onTap: controller.toggleAlwaysReadReceipt, + child: Padding( + padding: const EdgeInsets.all(4), + child: SvgPicture.asset( + controller.alwaysReadReceipt.value! + ? controller.imagePaths.icSwitchOn + : controller.imagePaths.icSwitchOff, + fit: BoxFit.fill, + width: 32, + height: 20), + ), + ), + const SizedBox(width: 12), + Expanded( + child: Text( + AppLocalizations.of(context).emailReadReceiptsToggleDescription, + style: const TextStyle( + fontSize: 16, + height: 20 / 16, + color: Colors.black), + )), + ], + ); + }), + ], + ), ), ), ],