From 471713ebd7ee1ed8f7361a874e969115395383d2 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 22 Mar 2023 12:13:41 +0700 Subject: [PATCH] TF-1611 Fix bottom padding too large in vacation view (cherry picked from commit 943102f54285fc3c9291160cc685e42bbdfbf168) --- .../base/setting_detail_view_builder.dart | 24 +- .../vacation/utils/vacation_utils.dart | 13 + .../presentation/vacation/vacation_view.dart | 500 +++++++++--------- 3 files changed, 274 insertions(+), 263 deletions(-) diff --git a/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart b/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart index 5d9869014..56d677054 100644 --- a/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart +++ b/lib/features/manage_account/presentation/base/setting_detail_view_builder.dart @@ -7,24 +7,32 @@ class SettingDetailViewBuilder extends StatelessWidget { final ResponsiveUtils responsiveUtils; final Widget child; + final EdgeInsets? padding; + final VoidCallback? onTapGestureDetector; const SettingDetailViewBuilder({ super.key, required this.responsiveUtils, - required this.child + required this.child, + this.padding, + this.onTapGestureDetector }); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: SettingsUtils.getBackgroundColor(context, responsiveUtils), - body: Container( - width: double.infinity, - height: double.infinity, - color: SettingsUtils.getContentBackgroundColor(context, responsiveUtils), - decoration: SettingsUtils.getBoxDecorationForContent(context, responsiveUtils), - margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils), - child: child, + body: GestureDetector( + onTap: onTapGestureDetector, + child: Container( + width: double.infinity, + height: double.infinity, + color: SettingsUtils.getContentBackgroundColor(context, responsiveUtils), + decoration: SettingsUtils.getBoxDecorationForContent(context, responsiveUtils), + margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils), + padding: padding, + child: child, + ), ), ); } diff --git a/lib/features/manage_account/presentation/vacation/utils/vacation_utils.dart b/lib/features/manage_account/presentation/vacation/utils/vacation_utils.dart index ef23072a7..cb28686c0 100644 --- a/lib/features/manage_account/presentation/vacation/utils/vacation_utils.dart +++ b/lib/features/manage_account/presentation/vacation/utils/vacation_utils.dart @@ -1,4 +1,17 @@ +import 'package:core/presentation/utils/responsive_utils.dart'; +import 'package:flutter/material.dart'; + class VacationUtils { static const String vacationTagName = 'Vacation'; + + static EdgeInsets getPaddingView(BuildContext context, ResponsiveUtils responsiveUtils) { + if (responsiveUtils.isDesktop(context)) { + return const EdgeInsets.symmetric(vertical: 24, horizontal: 20); + } else if (responsiveUtils.isTabletLarge(context) || responsiveUtils.isTablet(context)) { + return const EdgeInsets.symmetric(horizontal: 28, vertical: 24); + } else { + return const EdgeInsets.symmetric(horizontal: 12, vertical: 24); + } + } } \ No newline at end of file diff --git a/lib/features/manage_account/presentation/vacation/vacation_view.dart b/lib/features/manage_account/presentation/vacation/vacation_view.dart index 7fc51f471..c73e45fd7 100644 --- a/lib/features/manage_account/presentation/vacation/vacation_view.dart +++ b/lib/features/manage_account/presentation/vacation/vacation_view.dart @@ -11,10 +11,11 @@ import 'package:tmail_ui_user/features/base/widget/text_input_decoration_builder import 'package:tmail_ui_user/features/base/widget/text_input_field_builder.dart'; import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/button_layout_type.dart'; -import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/date_type.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/vacation_message_type.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/vacation_responder_status.dart'; +import 'package:tmail_ui_user/features/manage_account/presentation/vacation/utils/vacation_utils.dart'; import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_controller.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser; @@ -28,266 +29,255 @@ class VacationView extends GetWidget with RichTextButtonMixi @override Widget build(BuildContext context) { - return Scaffold( - backgroundColor: _responsiveUtils.isWebDesktop(context) - ? AppColor.colorBgDesktop - : Colors.white, - body: GestureDetector( - onTap: () => FocusScope.of(context).unfocus(), - child: KeyboardRichText( + if (BuildUtils.isWeb) { + return _buildVacationFormView(context); + } else { + return KeyboardRichText( + richTextController: controller.richTextControllerForMobile, + keyBroadToolbar: RichTextKeyboardToolBar( + titleBack: AppLocalizations.of(context).format, + backgroundKeyboardToolBarColor: AppColor.colorBackgroundKeyboard, + titleFormatBottomSheet: AppLocalizations.of(context).format, richTextController: controller.richTextControllerForMobile, - keyBroadToolbar: RichTextKeyboardToolBar( - titleBack: AppLocalizations.of(context).format, - backgroundKeyboardToolBarColor: AppColor.colorBackgroundKeyboard, - titleFormatBottomSheet: AppLocalizations.of(context).format, - richTextController: controller.richTextControllerForMobile, - titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles, - titleBackgroundBottomSheet: AppLocalizations.of(context).background, - titleForegroundBottomSheet: AppLocalizations.of(context).foreground, - ), - child: Container( - width: double.infinity, - height: double.infinity, - margin: _responsiveUtils.isWebDesktop(context) - ? const EdgeInsets.all(24) - : EdgeInsets.zero, - decoration: _responsiveUtils.isWebDesktop(context) - ? BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: AppColor.colorBorderBodyThread, width: 1), - color: Colors.white) - : null, - padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils), - child: SingleChildScrollView( - physics: const ClampingScrollPhysics(), - controller: controller.scrollController, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (_responsiveUtils.isWebDesktop(context)) - ...[ - Text(AppLocalizations.of(context).vacation, - style: const TextStyle( - fontSize: 20, - fontWeight: FontWeight.w500, - color: Colors.black)), - const SizedBox(height: 8) - ], - Text(AppLocalizations.of(context).vacationSettingExplanation, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.normal, - color: AppColor.colorVacationSettingExplanation)), - const SizedBox(height: 24), - Row(children: [ - Obx(() { - return InkWell( - onTap: () { - final newStatus = controller.isVacationDeactivated - ? VacationResponderStatus.activated - : VacationResponderStatus.deactivated; - controller.updateVacationPresentation(newStatus: newStatus); - }, - child: SvgPicture.asset( - controller.isVacationDeactivated - ? _imagePaths.icSwitchOff - : _imagePaths.icSwitchOn, - fit: BoxFit.fill, - width: 24, - height: 24) - ); - }), - const SizedBox(width: 16), - Expanded( - child: Text(AppLocalizations.of(context).vacationSettingToggleButtonAutoReply, + titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles, + titleBackgroundBottomSheet: AppLocalizations.of(context).background, + titleForegroundBottomSheet: AppLocalizations.of(context).foreground, + ), + child: _buildVacationFormView(context) + ); + } + } + + Widget _buildVacationFormView(BuildContext context) { + return SettingDetailViewBuilder( + responsiveUtils: _responsiveUtils, + padding: const EdgeInsets.symmetric(horizontal: 4), + onTapGestureDetector: () => controller.clearFocusEditor(context), + child: SingleChildScrollView( + physics: const ClampingScrollPhysics(), + controller: controller.scrollController, + child: Padding( + padding: VacationUtils.getPaddingView(context, _responsiveUtils), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (_responsiveUtils.isWebDesktop(context)) + ...[ + Text( + AppLocalizations.of(context).vacation, + style: const TextStyle( + fontSize: 20, + fontWeight: FontWeight.w500, + color: Colors.black + ) + ), + const SizedBox(height: 8) + ], + Text( + AppLocalizations.of(context).vacationSettingExplanation, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.normal, + color: AppColor.colorVacationSettingExplanation + ) + ), + const SizedBox(height: 24), + Row(children: [ + Obx(() { + return InkWell( + onTap: () { + final newStatus = controller.isVacationDeactivated + ? VacationResponderStatus.activated + : VacationResponderStatus.deactivated; + controller.updateVacationPresentation(newStatus: newStatus); + }, + child: SvgPicture.asset( + controller.isVacationDeactivated ? _imagePaths.icSwitchOff : _imagePaths.icSwitchOn, + fit: BoxFit.fill, + width: 24, + height: 24 + ) + ); + }), + const SizedBox(width: 16), + Expanded( + child: Text( + AppLocalizations.of(context).vacationSettingToggleButtonAutoReply, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.normal, + color: Colors.black + ) + ), + ) + ]), + const SizedBox(height: 28), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14), + child: Column(children: [ + Obx(() => AbsorbPointer( + absorbing: controller.isVacationDeactivated, + child: Opacity( + opacity: controller.isVacationDeactivated ? 0.3 : 1.0, + child: _responsiveUtils.isPortraitMobile(context) + ? Column(children: [ + BorderButtonField( + label: AppLocalizations.of(context).startDate, + value: controller.vacationPresentation.value.startDate, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.startDateIsNull, + hintText: AppLocalizations.of(context).startDate, + tapActionCallback: (value) => controller.selectDate(context, DateType.start, value)), + const SizedBox(height: 18), + BorderButtonField( + label: AppLocalizations.of(context).startTime, + value: controller.vacationPresentation.value.startTime, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.starTimeIsNull, + hintText: AppLocalizations.of(context).noStartTime, + tapActionCallback: (value) => controller.selectTime(context, DateType.start, value)), + ]) + : Row(children: [ + Expanded(child: BorderButtonField( + label: AppLocalizations.of(context).startDate, + value: controller.vacationPresentation.value.startDate, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.startDateIsNull, + hintText: AppLocalizations.of(context).startDate, + tapActionCallback: (value) => controller.selectDate(context, DateType.start, value))), + const SizedBox(width: 24), + Expanded(child: BorderButtonField( + label: AppLocalizations.of(context).startTime, + value: controller.vacationPresentation.value.startTime, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.starTimeIsNull, + hintText: AppLocalizations.of(context).noStartTime, + tapActionCallback: (value) => controller.selectTime(context, DateType.start, value))), + ]), + ), + )), + const SizedBox(height: 24), + Obx(() => AbsorbPointer( + absorbing: controller.isVacationDeactivated, + child: Opacity( + opacity: controller.isVacationDeactivated ? 0.3 : 1.0, + child: Row(children: [ + Obx(() => InkWell( + onTap: () { + final value = !controller.vacationPresentation.value.vacationStopEnabled; + controller.updateVacationPresentation(vacationStopEnabled: value); + }, + child: SvgPicture.asset( + controller.vacationPresentation.value.vacationStopEnabled + ? _imagePaths.icSwitchOn + : _imagePaths.icSwitchOff, + fit: BoxFit.fill, + width: 24, + height: 24 + ) + )), + const SizedBox(width: 16), + Expanded( + child: Text( + AppLocalizations.of(context).vacationStopsAt, style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.normal, - color: Colors.black) - ), - ) - ]), - const SizedBox(height: 28), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14), - child: Column(children: [ - Obx(() => AbsorbPointer( - absorbing: controller.isVacationDeactivated, - child: Opacity( - opacity: controller.isVacationDeactivated ? 0.3 : 1.0, - child: _responsiveUtils.isPortraitMobile(context) - ? Column(children: [ - BorderButtonField( - label: AppLocalizations.of(context).startDate, - value: controller.vacationPresentation.value.startDate, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: !controller.isVacationDeactivated && - controller.vacationPresentation.value.startDateIsNull, - hintText: AppLocalizations.of(context).startDate, - tapActionCallback: (value) => - controller.selectDate(context, DateType.start, value)), - const SizedBox(height: 18), - BorderButtonField( - label: AppLocalizations.of(context).startTime, - value: controller.vacationPresentation.value.startTime, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: !controller.isVacationDeactivated && - controller.vacationPresentation.value.starTimeIsNull, - hintText: AppLocalizations.of(context).noStartTime, - tapActionCallback: (value) => - controller.selectTime(context, DateType.start, value)), - ]) - : Row(children: [ - Expanded(child: BorderButtonField( - label: AppLocalizations.of(context).startDate, - value: controller.vacationPresentation.value.startDate, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: !controller.isVacationDeactivated && - controller.vacationPresentation.value.startDateIsNull, - hintText: AppLocalizations.of(context).startDate, - tapActionCallback: (value) => - controller.selectDate(context, DateType.start, value))), - const SizedBox(width: 24), - Expanded(child: BorderButtonField( - label: AppLocalizations.of(context).startTime, - value: controller.vacationPresentation.value.startTime, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: !controller.isVacationDeactivated && - controller.vacationPresentation.value.starTimeIsNull, - hintText: AppLocalizations.of(context).noStartTime, - tapActionCallback: (value) => - controller.selectTime(context, DateType.start, value))), - ]), - ), - )), - const SizedBox(height: 24), - Obx(() => AbsorbPointer( - absorbing: controller.isVacationDeactivated, - child: Opacity( - opacity: controller.isVacationDeactivated ? 0.3 : 1.0, - child: Row(children: [ - Obx(() => InkWell( - onTap: () { - final value = !controller.vacationPresentation.value.vacationStopEnabled; - controller.updateVacationPresentation(vacationStopEnabled: value); - }, - child: SvgPicture.asset( - controller.vacationPresentation.value.vacationStopEnabled - ? _imagePaths.icSwitchOn - : _imagePaths.icSwitchOff, - fit: BoxFit.fill, - width: 24, - height: 24) - ) - ), - const SizedBox(width: 16), - Expanded( - child: Text(AppLocalizations.of(context).vacationStopsAt, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.normal, - color: Colors.black) - ), - ) - ]), + fontSize: 16, + fontWeight: FontWeight.normal, + color: Colors.black ) - )), - const SizedBox(height: 24), - Obx(() => AbsorbPointer( - absorbing: !controller.canChangeEndDate, - child: Opacity( - opacity: !controller.canChangeEndDate ? 0.3 : 1.0, - child: _responsiveUtils.isPortraitMobile(context) - ? Column(children: [ - BorderButtonField( - label: AppLocalizations.of(context).endDate, - value: controller.vacationPresentation.value.endDate, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: controller.canChangeEndDate && - controller.vacationPresentation.value.endDateIsNull, - hintText: AppLocalizations.of(context).noEndDate, - tapActionCallback: (value) => - controller.selectDate(context, DateType.end, value)), - const SizedBox(height: 18), - BorderButtonField( - label: AppLocalizations.of(context).endTime, - value: controller.vacationPresentation.value.endTime, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: controller.canChangeEndDate && - controller.vacationPresentation.value.endTimeIsNull, - hintText: AppLocalizations.of(context).noEndTime, - tapActionCallback: (value) => - controller.selectTime(context, DateType.end, value)), - ]) - : Row(children: [ - Expanded(child: BorderButtonField( - label: AppLocalizations.of(context).endDate, - value: controller.vacationPresentation.value.endDate, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: controller.canChangeEndDate && - controller.vacationPresentation.value.endDateIsNull, - hintText: AppLocalizations.of(context).noEndDate, - tapActionCallback: (value) => - controller.selectDate(context, DateType.end, value))), - const SizedBox(width: 24), - Expanded(child: BorderButtonField( - label: AppLocalizations.of(context).endTime, - value: controller.vacationPresentation.value.endTime, - mouseCursor: SystemMouseCursors.text, - backgroundColor: AppColor.colorBackgroundVacationSettingField, - isEmpty: controller.canChangeEndDate && - controller.vacationPresentation.value.endTimeIsNull, - hintText: AppLocalizations.of(context).noEndTime, - tapActionCallback: (value) => - controller.selectTime(context, DateType.end, value))), - ]), - ) - )), - const SizedBox(height: 24), - Obx(() => AbsorbPointer( - absorbing: controller.isVacationDeactivated, - child: _responsiveUtils.isPortraitMobile(context) - ? Opacity( - opacity: controller.isVacationDeactivated ? 0.3 : 1.0, - child: TextInputFieldBuilder( - label: AppLocalizations.of(context).subject, - hint: AppLocalizations.of(context).hintSubjectInputVacationSetting, - editingController: controller.subjectTextController), - ) - : Row(children: [ - Expanded(child: Opacity( - opacity: controller.isVacationDeactivated ? 0.3 : 1.0, - child: TextInputFieldBuilder( - label: AppLocalizations.of(context).subject, - hint: AppLocalizations.of(context).hintSubjectInputVacationSetting, - editingController: controller.subjectTextController), - )), - const SizedBox(width: 24), - const Expanded(child: SizedBox.shrink()) - ]) - )), - const SizedBox(height: 24), - Obx(() => AbsorbPointer( - absorbing: controller.isVacationDeactivated, - child: Opacity( - opacity: controller.isVacationDeactivated ? 0.3 : 1.0, - child: _buildVacationMessage(context), ), - )), - const SizedBox(height: 24), - _buildListButtonAction(context) + ) ]), ) - ] - ), - ), + )), + const SizedBox(height: 24), + Obx(() => AbsorbPointer( + absorbing: !controller.canChangeEndDate, + child: Opacity( + opacity: !controller.canChangeEndDate ? 0.3 : 1.0, + child: _responsiveUtils.isPortraitMobile(context) + ? Column(children: [ + BorderButtonField( + label: AppLocalizations.of(context).endDate, + value: controller.vacationPresentation.value.endDate, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull, + hintText: AppLocalizations.of(context).noEndDate, + tapActionCallback: (value) => controller.selectDate(context, DateType.end, value)), + const SizedBox(height: 18), + BorderButtonField( + label: AppLocalizations.of(context).endTime, + value: controller.vacationPresentation.value.endTime, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endTimeIsNull, + hintText: AppLocalizations.of(context).noEndTime, + tapActionCallback: (value) => controller.selectTime(context, DateType.end, value)), + ]) + : Row(children: [ + Expanded(child: BorderButtonField( + label: AppLocalizations.of(context).endDate, + value: controller.vacationPresentation.value.endDate, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull, + hintText: AppLocalizations.of(context).noEndDate, + tapActionCallback: (value) => controller.selectDate(context, DateType.end, value))), + const SizedBox(width: 24), + Expanded(child: BorderButtonField( + label: AppLocalizations.of(context).endTime, + value: controller.vacationPresentation.value.endTime, + mouseCursor: SystemMouseCursors.text, + backgroundColor: AppColor.colorBackgroundVacationSettingField, + isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endTimeIsNull, + hintText: AppLocalizations.of(context).noEndTime, + tapActionCallback: (value) => controller.selectTime(context, DateType.end, value))), + ]), + ) + )), + const SizedBox(height: 24), + Obx(() => AbsorbPointer( + absorbing: controller.isVacationDeactivated, + child: _responsiveUtils.isPortraitMobile(context) + ? Opacity( + opacity: controller.isVacationDeactivated ? 0.3 : 1.0, + child: TextInputFieldBuilder( + label: AppLocalizations.of(context).subject, + hint: AppLocalizations.of(context).hintSubjectInputVacationSetting, + editingController: controller.subjectTextController + ), + ) + : Row(children: [ + Expanded(child: Opacity( + opacity: controller.isVacationDeactivated ? 0.3 : 1.0, + child: TextInputFieldBuilder( + label: AppLocalizations.of(context).subject, + hint: AppLocalizations.of(context).hintSubjectInputVacationSetting, + editingController: controller.subjectTextController + ), + )), + const SizedBox(width: 24), + const Expanded(child: SizedBox.shrink()) + ]) + )), + const SizedBox(height: 24), + Obx(() => AbsorbPointer( + absorbing: controller.isVacationDeactivated, + child: Opacity( + opacity: controller.isVacationDeactivated ? 0.3 : 1.0, + child: _buildVacationMessage(context), + ), + )), + const SizedBox(height: 24), + _buildListButtonAction(context) + ]), + ) + ] ), ), ),