TF-2475 Handle format style rich text in vacation

lib/features/manage_account/presentation/menu/settings/settings_view.dart

@@ -37,18 +37,30 @@ class SettingsView extends GetWidget<SettingsController> {
     return Container(
       color: Colors.white,
       child: SafeArea(
+        top: controller.manageAccountDashboardController.isVacationCapabilitySupported,
+        bottom: controller.manageAccountDashboardController.isVacationCapabilitySupported,
+        left: controller.manageAccountDashboardController.isVacationCapabilitySupported &&
+          controller.responsiveUtils.isPortraitMobile(context),
+        right: controller.manageAccountDashboardController.isVacationCapabilitySupported &&
+          controller.responsiveUtils.isPortraitMobile(context),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            SizedBox.fromSize(
+            SafeArea(
+              bottom: false,
+              child: SizedBox.fromSize(
                 size: const Size.fromHeight(52),
                 child: Padding(
                   padding: SettingsUtils.getPaddingAppBar(context, controller.responsiveUtils),
                   child: _buildAppbar(context))),
+            ),
             const Divider(color: AppColor.colorDividerComposer, height: 1),
             Obx(() {
               if (controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsValid == true) {
-                return VacationNotificationMessageWidget(
+                return SafeArea(
+                  top: false,
+                  bottom: false,
+                  child: VacationNotificationMessageWidget(
                       margin: const EdgeInsetsDirectional.only(
                           start: PlatformInfo.isWeb ? 24 : 16,
                           end: PlatformInfo.isWeb ? 24 : 16,
@@ -58,11 +70,15 @@ class SettingsView extends GetWidget<SettingsController> {
                       actionGotoVacationSetting: !controller.manageAccountDashboardController.inVacationSettings()
                         ? () => controller.manageAccountDashboardController.selectAccountMenuItem(AccountMenuItem.vacation)
                         : null,
-                    actionEndNow: () => controller.manageAccountDashboardController.disableVacationResponder());
+                      actionEndNow: () => controller.manageAccountDashboardController.disableVacationResponder()),
+                );
               } else if ((controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsWaiting == true
                   || controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsStopped == true)
                   && controller.manageAccountDashboardController.inVacationSettings()) {
-                return VacationNotificationMessageWidget(
+                return SafeArea(
+                  top: false,
+                  bottom: false,
+                  child: VacationNotificationMessageWidget(
                     margin: const EdgeInsetsDirectional.only(
                       start: PlatformInfo.isWeb ? 24 : 16,
                       end: PlatformInfo.isWeb ? 24 : 16,
@@ -74,6 +90,7 @@ class SettingsView extends GetWidget<SettingsController> {
                       padding: EdgeInsetsDirectional.only(end: 16),
                       child: Icon(Icons.timer, size: 20),
                     )
+                  ),
                 );
               } else {
                 return const SizedBox.shrink();
@@ -189,7 +206,9 @@ class SettingsView extends GetWidget<SettingsController> {
     return Obx(() {
       switch (controller.manageAccountDashboardController.settingsPageLevel.value) {
         case SettingsPageLevel.universal:
-          return const SettingsFirstLevelView();
+          return const SafeArea(
+            top: false,
+            child: SettingsFirstLevelView());
         case SettingsPageLevel.level1:
           return _viewDisplayedOfAccountMenuItem();
       }
@@ -200,12 +219,18 @@ class SettingsView extends GetWidget<SettingsController> {
     return Obx(() {
       switch(controller.manageAccountDashboardController.accountMenuItemSelected.value) {
         case AccountMenuItem.profiles:
-          return ProfilesView();
+          return SafeArea(
+            top: false,
+            child: ProfilesView());
         case AccountMenuItem.languageAndRegion:
-          return const LanguageAndRegionView();
+          return const SafeArea(
+            top: false,
+            child: LanguageAndRegionView());
         case AccountMenuItem.emailRules:
           if (controller.manageAccountDashboardController.isRuleFilterCapabilitySupported) {
-            return EmailRulesView();
+            return SafeArea(
+              top: false,
+              child: EmailRulesView());
           } else {
             return const SizedBox.shrink();
           }
@@ -217,7 +242,9 @@ class SettingsView extends GetWidget<SettingsController> {
           }
         case AccountMenuItem.forward:
           if (controller.manageAccountDashboardController.isForwardCapabilitySupported) {
-            return ForwardView();
+            return SafeArea(
+              top: false,
+              child: ForwardView());
           } else {
             return const SizedBox.shrink();
           }
@@ -228,7 +255,9 @@ class SettingsView extends GetWidget<SettingsController> {
             return const SizedBox.shrink();
           }
         case AccountMenuItem.mailboxVisibility:
-          return MailboxVisibilityView();
+          return SafeArea(
+            top: false,
+            child: MailboxVisibilityView());
         case AccountMenuItem.notification:
           return const NotificationView();
         default:

lib/features/manage_account/presentation/vacation/vacation_controller.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/vacation/vacation_response.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
-import 'package:rich_text_composer/rich_text_controller.dart';
+import 'package:rich_text_composer/rich_text_composer.dart';
 import 'package:rich_text_composer/views/commons/constants.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart';
@@ -64,6 +64,7 @@ class VacationController extends BaseController {
   @override
   void onInit() {
     _initWorker();
+    _initFocusListener();
     super.onInit();
   }
 
@@ -93,6 +94,16 @@ class VacationController extends BaseController {
     });
   }
 
+  void _initFocusListener() {
+    subjectTextFocusNode.addListener(() {
+      if (subjectTextFocusNode.hasFocus == true) {
+        if (PlatformInfo.isMobile) {
+          richTextControllerForMobile.hideRichTextView();
+        }
+      }
+    });
+  }
+
   void _getAllVacation() {
     final accountId = _accountDashBoardController.accountId.value;
     if (accountId != null) {
@@ -156,6 +167,11 @@ class VacationController extends BaseController {
   }
 
   void selectDate(BuildContext context, DateType dateType, DateTime? currentDate) async {
+    if (PlatformInfo.isMobile) {
+      richTextControllerForMobile.htmlEditorApi?.unfocus();
+    }
+    FocusScope.of(context).unfocus();
+
     _accountDashBoardController.isVacationDateDialogDisplayed = true;
     final datePicked = await showDatePicker(
         context: context,
@@ -197,6 +213,11 @@ class VacationController extends BaseController {
   }
 
   void selectTime(BuildContext context, DateType dateType, TimeOfDay? currentTime) async {
+    if (PlatformInfo.isMobile) {
+      richTextControllerForMobile.htmlEditorApi?.unfocus();
+    }
+    FocusScope.of(context).unfocus();
+
     _accountDashBoardController.isVacationDateDialogDisplayed = true;
     final timePicked = await showTimePicker(
       context: context,
@@ -340,7 +361,6 @@ class VacationController extends BaseController {
   void clearFocusEditor(BuildContext context) {
     if (PlatformInfo.isMobile) {
       richTextControllerForMobile.htmlEditorApi?.unfocus();
-      KeyboardUtils.hideSystemKeyboardMobile();
     }
     KeyboardUtils.hideKeyboard(context);
   }
@@ -350,7 +370,22 @@ class VacationController extends BaseController {
     _settingController.backToUniversalSettings();
   }
 
-  void onFocusHTMLEditor() async {
+  void initRichTextForMobile(BuildContext context, HtmlEditorApi editorApi) {
+    richTextControllerForMobile.onCreateHTMLEditor(
+      editorApi,
+      onFocus: () => onFocusHTMLEditor(context),
+      onEnterKeyDown: onEnterKeyDown,
+    );
+  }
+
+  void onFocusHTMLEditor(BuildContext context) async {
+    if (PlatformInfo.isAndroid) {
+      FocusScope.of(context).unfocus();
+      await Future.delayed(
+        const Duration(milliseconds: 300),
+        richTextControllerForMobile.showDeviceKeyboard);
+    }
+
     subjectTextFocusNode.unfocus();
 
     await Scrollable.ensureVisible(htmlKey.currentContext!);

lib/features/manage_account/presentation/vacation/vacation_view.dart

@@ -2,11 +2,14 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/keyboard_utils.dart';
 import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/responsive/responsive_widget.dart';
 import 'package:core/utils/html/html_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
+import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser;
 import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:rich_text_composer/rich_text_composer.dart';
 import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
@@ -15,12 +18,12 @@ 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/base/setting_detail_view_builder.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.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_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;
 import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class VacationView extends GetWidget<VacationController> with RichTextButtonMixin {
@@ -29,34 +32,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
 
   @override
   Widget build(BuildContext context) {
-    if (PlatformInfo.isWeb) {
+    Widget vacationInputForm = SingleChildScrollView(
-      return _buildVacationFormView(context);
-    } else {
-      return KeyboardRichText(
-        richTextController: controller.richTextControllerForMobile,
-        keyBroadToolbar: RichTextKeyboardToolBar(
-          titleBack: AppLocalizations.of(context).format,
-          backgroundKeyboardToolBarColor: PlatformInfo.isIOS
-            ? AppColor.colorBackgroundKeyboard
-            : AppColor.colorBackgroundKeyboardAndroid,
-          richTextController: controller.richTextControllerForMobile,
-          quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
-          backgroundLabel: AppLocalizations.of(context).titleBackground,
-          foregroundLabel: AppLocalizations.of(context).titleForeground,
-          formatLabel: AppLocalizations.of(context).titleFormat,
-          rootContext: context,
-        ),
-        child: _buildVacationFormView(context)
-      );
-    }
-  }
-
-  Widget _buildVacationFormView(BuildContext context) {
-    return SettingDetailViewBuilder(
-      responsiveUtils: controller.responsiveUtils,
-      padding: const EdgeInsets.symmetric(horizontal: 4),
-      onTapGestureDetector: () => controller.clearFocusEditor(context),
-      child: SingleChildScrollView(
       physics: const ClampingScrollPhysics(),
       controller: controller.scrollController,
       child: Padding(
@@ -133,7 +109,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.startDateIsNull,
                             hintText: AppLocalizations.of(context).startDate,
-                              tapActionCallback: (value) => controller.selectDate(context, DateType.start, value)),
+                            tapActionCallback: (value) => controller.selectDate(context, DateType.start, value)
+                          ),
                           const SizedBox(height: 18),
                           BorderButtonField<TimeOfDay>(
                             label: AppLocalizations.of(context).startTime,
@@ -142,7 +119,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.starTimeIsNull,
                             hintText: AppLocalizations.of(context).noStartTime,
-                              tapActionCallback: (value) => controller.selectTime(context, DateType.start, value)),
+                            tapActionCallback: (value) => controller.selectTime(context, DateType.start, value)
+                          ),
                         ])
                       : Row(children: [
                           Expanded(child: BorderButtonField<DateTime>(
@@ -152,7 +130,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.startDateIsNull,
                             hintText: AppLocalizations.of(context).startDate,
-                              tapActionCallback: (value) => controller.selectDate(context, DateType.start, value))),
+                            tapActionCallback: (value) => controller.selectDate(context, DateType.start, value))
+                          ),
                           const SizedBox(width: 24),
                           Expanded(child: BorderButtonField<TimeOfDay>(
                             label: AppLocalizations.of(context).startTime,
@@ -161,7 +140,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.starTimeIsNull,
                             hintText: AppLocalizations.of(context).noStartTime,
-                              tapActionCallback: (value) => controller.selectTime(context, DateType.start, value))),
+                            tapActionCallback: (value) => controller.selectTime(context, DateType.start, value))
+                          ),
                         ]),
                   ),
                 )),
@@ -213,7 +193,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull,
                             hintText: AppLocalizations.of(context).noEndDate,
-                              tapActionCallback: (value) => controller.selectDate(context, DateType.end, value)),
+                            tapActionCallback: (value) => controller.selectDate(context, DateType.end, value)
+                          ),
                           const SizedBox(height: 18),
                           BorderButtonField<TimeOfDay>(
                             label: AppLocalizations.of(context).endTime,
@@ -222,7 +203,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endTimeIsNull,
                             hintText: AppLocalizations.of(context).noEndTime,
-                              tapActionCallback: (value) => controller.selectTime(context, DateType.end, value)),
+                            tapActionCallback: (value) => controller.selectTime(context, DateType.end, value)
+                          ),
                         ])
                       : Row(children: [
                           Expanded(child: BorderButtonField<DateTime>(
@@ -232,7 +214,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull,
                             hintText: AppLocalizations.of(context).noEndDate,
-                              tapActionCallback: (value) => controller.selectDate(context, DateType.end, value))),
+                            tapActionCallback: (value) => controller.selectDate(context, DateType.end, value))
+                          ),
                           const SizedBox(width: 24),
                           Expanded(child: BorderButtonField<TimeOfDay>(
                             label: AppLocalizations.of(context).endTime,
@@ -241,7 +224,8 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                             backgroundColor: AppColor.colorBackgroundVacationSettingField,
                             isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endTimeIsNull,
                             hintText: AppLocalizations.of(context).noEndTime,
-                              tapActionCallback: (value) => controller.selectTime(context, DateType.end, value))),
+                            tapActionCallback: (value) => controller.selectTime(context, DateType.end, value))
+                          ),
                         ]),
                   )
                 )),
@@ -281,15 +265,96 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                   ),
                 )),
                 const SizedBox(height: 24),
-                  _buildListButtonAction(context)
+                _buildListButtonAction(context),
+                const SizedBox(height: 24),
               ]),
             )
           ]
         ),
       ),
+    );
+
+    if (PlatformInfo.isWeb) {
+      return SettingDetailViewBuilder(
+        responsiveUtils: controller.responsiveUtils,
+        padding: const EdgeInsets.symmetric(horizontal: 4),
+        onTapGestureDetector: () => controller.clearFocusEditor(context),
+        child: vacationInputForm,
+      );
+    } else {
+      return ResponsiveWidget(
+        responsiveUtils: controller.responsiveUtils,
+        mobile: GestureDetector(
+          onTap: () => controller.clearFocusEditor(context),
+          child: Scaffold(
+            backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils),
+            body: SafeArea(
+              left: controller.responsiveUtils.isPortraitMobile(context),
+              top: false,
+              right: controller.responsiveUtils.isPortraitMobile(context),
+              child: KeyboardRichText(
+                richTextController: controller.richTextControllerForMobile,
+                keyBroadToolbar: RichTextKeyboardToolBar(
+                  rootContext: context,
+                  titleBack: AppLocalizations.of(context).format,
+                  backgroundKeyboardToolBarColor: PlatformInfo.isIOS
+                    ? AppColor.colorBackgroundKeyboard
+                    : AppColor.colorBackgroundKeyboardAndroid,
+                  formatLabel: AppLocalizations.of(context).format,
+                  richTextController: controller.richTextControllerForMobile,
+                  quickStyleLabel: AppLocalizations.of(context).quickStyles,
+                  backgroundLabel: AppLocalizations.of(context).background,
+                  foregroundLabel: AppLocalizations.of(context).foreground,
+                ),
+                child: Container(
+                  width: double.infinity,
+                  height: double.infinity,
+                  color: Colors.white,
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  child: SafeArea(
+                    top: false,
+                    bottom: false,
+                    child: vacationInputForm),
+                )
+              ),
+            ),
+          ),
+        ),
+        tablet: Portal(
+          child: GestureDetector(
+            onTap: () => controller.clearFocusEditor(context),
+            child: Scaffold(
+              backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils),
+              body: SafeArea(
+                child: KeyboardRichText(
+                  richTextController: controller.richTextControllerForMobile,
+                  keyBroadToolbar: RichTextKeyboardToolBar(
+                    rootContext: context,
+                    titleBack: AppLocalizations.of(context).format,
+                    backgroundKeyboardToolBarColor: PlatformInfo.isIOS
+                      ? AppColor.colorBackgroundKeyboard
+                      : AppColor.colorBackgroundKeyboardAndroid,
+                    formatLabel: AppLocalizations.of(context).format,
+                    richTextController: controller.richTextControllerForMobile,
+                    quickStyleLabel: AppLocalizations.of(context).quickStyles,
+                    backgroundLabel: AppLocalizations.of(context).background,
+                    foregroundLabel: AppLocalizations.of(context).foreground,
+                  ),
+                  child: Container(
+                    width: double.infinity,
+                    height: double.infinity,
+                    color: Colors.white,
+                    padding: const EdgeInsets.symmetric(horizontal: 4),
+                    child: vacationInputForm,
+                  ),
+                ),
+              ),
+            ),
+          ),
         ),
       );
     }
+  }
 
   Widget _buildListButtonAction(BuildContext context) {
     if (controller.responsiveUtils.isWebDesktop(context)) {
@@ -444,13 +509,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
           addDefaultSelectionMenuItems: false,
           initialContent: controller.vacationMessageHtmlText ?? '',
           customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
-          onCreated: (htmlApi) {
+          onCreated: (editorApi) => controller.initRichTextForMobile(context, editorApi)
-            controller.richTextControllerForMobile.onCreateHTMLEditor(
-              htmlApi,
-              onFocus: controller.onFocusHTMLEditor,
-              onEnterKeyDown: controller.onEnterKeyDown,
-            );
-          }
       );
     }
   }