TF-2615 improve always read receipt loading mechanism & UX

This commit is contained in:
DatDang
2024-03-14 08:43:21 +07:00
committed by Dat H. Pham
parent 42b7a874ab
commit 9ac7ebd787
2 changed files with 66 additions and 57 deletions
@@ -19,7 +19,7 @@ class AlwaysReadReceiptController extends BaseController {
final GetAlwaysReadReceiptSettingInteractor _getAlwaysReadReceiptSettingInteractor; final GetAlwaysReadReceiptSettingInteractor _getAlwaysReadReceiptSettingInteractor;
final UpdateAlwaysReadReceiptSettingInteractor _updateAlwaysReadReceiptSettingInteractor; final UpdateAlwaysReadReceiptSettingInteractor _updateAlwaysReadReceiptSettingInteractor;
final alwaysReadReceipt = true.obs; final alwaysReadReceipt = Rxn<bool>();
bool get isLoading => viewState.value.fold( bool get isLoading => viewState.value.fold(
(failure) => false, (failure) => false,
(success) => success is GettingAlwaysReadReceiptSetting || success is UpdatingAlwaysReadReceiptSetting); (success) => success is GettingAlwaysReadReceiptSetting || success is UpdatingAlwaysReadReceiptSetting);
@@ -71,12 +71,12 @@ class AlwaysReadReceiptController extends BaseController {
} }
void toggleAlwaysReadReceipt() { void toggleAlwaysReadReceipt() {
if (isLoading) return; if (isLoading || alwaysReadReceipt.value == null) return;
final accountId = _manageAccountDashBoardController.accountId.value; final accountId = _manageAccountDashBoardController.accountId.value;
if (accountId != null) { if (accountId != null) {
consumeState(_updateAlwaysReadReceiptSettingInteractor.execute( consumeState(_updateAlwaysReadReceiptSettingInteractor.execute(
accountId, accountId,
!alwaysReadReceipt.value)); !alwaysReadReceipt.value!));
} }
} }
@@ -14,67 +14,76 @@ class AlwaysReadReceiptView extends GetWidget<AlwaysReadReceiptController> with
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils), backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils),
body: Container( body: Padding(
color: SettingsUtils.getContentBackgroundColor(context, controller.responsiveUtils), padding: SettingsUtils.getMarginViewForSettingDetails(context, controller.responsiveUtils),
decoration: SettingsUtils.getBoxDecorationForContent(context, controller.responsiveUtils),
margin: SettingsUtils.getMarginViewForSettingDetails(context, controller.responsiveUtils),
padding: SettingsUtils.getPaddingAlwaysReadReceiptSetting(context, controller.responsiveUtils),
child: Column( child: Column(
children: [ children: [
Obx(() { Obx(() {
if (!controller.isLoading) { 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( Expanded(
child: ListView( child: Container(
physics: const ClampingScrollPhysics(), color: SettingsUtils.getContentBackgroundColor(context, controller.responsiveUtils),
children: [ decoration: SettingsUtils.getBoxDecorationForContent(context, controller.responsiveUtils),
Text( padding: SettingsUtils.getPaddingAlwaysReadReceiptSetting(context, controller.responsiveUtils),
AppLocalizations.of(context).emailReadReceipts, child: ListView(
style: const TextStyle( physics: const ClampingScrollPhysics(),
fontSize: 17, children: [
height: 24 / 17, Text(
fontWeight: FontWeight.w500, AppLocalizations.of(context).emailReadReceipts,
color: Colors.black)), style: const TextStyle(
const SizedBox(height: 8), fontSize: 17,
Text( height: 24 / 17,
AppLocalizations.of(context).emailReadReceiptsSettingExplanation, fontWeight: FontWeight.w500,
style: const TextStyle( color: Colors.black)),
fontSize: 16, const SizedBox(height: 8),
height: 20 / 16, Text(
color: AppColor.colorTextSettingDescriptions)), AppLocalizations.of(context).emailReadReceiptsSettingExplanation,
const SizedBox(height: 24), style: const TextStyle(
Row( fontSize: 16,
children: [ height: 20 / 16,
InkWell( color: AppColor.colorTextSettingDescriptions)),
onTap: controller.toggleAlwaysReadReceipt, const SizedBox(height: 24),
child: Padding( Obx(() {
padding: const EdgeInsets.all(4), if (controller.alwaysReadReceipt.value == null) {
child: Obx(() { return const SizedBox.shrink();
return SvgPicture.asset( }
controller.alwaysReadReceipt.value
? controller.imagePaths.icSwitchOn return Row(
: controller.imagePaths.icSwitchOff, children: [
fit: BoxFit.fill, InkWell(
width: 32, onTap: controller.toggleAlwaysReadReceipt,
height: 20); child: Padding(
}), padding: const EdgeInsets.all(4),
), child: SvgPicture.asset(
), controller.alwaysReadReceipt.value!
const SizedBox(width: 12), ? controller.imagePaths.icSwitchOn
Expanded( : controller.imagePaths.icSwitchOff,
child: Text( fit: BoxFit.fill,
AppLocalizations.of(context).emailReadReceiptsToggleDescription, width: 32,
style: const TextStyle( height: 20),
fontSize: 16, ),
height: 20 / 16, ),
color: Colors.black), const SizedBox(width: 12),
)), Expanded(
], child: Text(
), AppLocalizations.of(context).emailReadReceiptsToggleDescription,
], style: const TextStyle(
fontSize: 16,
height: 20 / 16,
color: Colors.black),
)),
],
);
}),
],
),
), ),
), ),
], ],