TF-2116 Create Mobile/Tablet container view

(cherry picked from commit a8f9993913b1c4a42eb58506c4b350ec8dc4252f)

lib/features/composer/presentation/styles/mobile/mobile_container_view_style.dart

@@ -0,0 +1,13 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+
+class MobileContainerViewStyle {
+  static const Color outSideBackgroundColor = Colors.white;
+  static const Color backgroundColor = Colors.white;
+  static final Color keyboardToolbarBackgroundColor = PlatformInfo.isIOS
+    ? AppColor.colorBackgroundKeyboard
+    : AppColor.colorBackgroundKeyboardAndroid;
+
+  static const EdgeInsets keyboardToolbarPadding = EdgeInsets.only(bottom: 64);
+}

lib/features/composer/presentation/styles/mobile/tablet_container_view_style.dart

@@ -0,0 +1,41 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+
+class TabletContainerViewStyle {
+  static const double radius = 28;
+  static const double elevation = 16;
+
+  static const Color backgroundColor = Colors.white;
+  static const Color outSideBackgroundColor = Colors.black38;
+  static final Color keyboardToolbarBackgroundColor = PlatformInfo.isIOS
+    ? AppColor.colorBackgroundKeyboard
+    : AppColor.colorBackgroundKeyboardAndroid;
+
+  static const EdgeInsets keyboardToolbarPadding = EdgeInsets.only(bottom: 64);
+
+  static EdgeInsetsGeometry getMargin(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    if (responsiveUtils.isTablet(context)) {
+      return const EdgeInsetsDirectional.all(24);
+    } else {
+      return const EdgeInsetsDirectional.symmetric(vertical: 24);
+    }
+  }
+
+  static double getWidth(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    final currentWidth = responsiveUtils.getSizeScreenWidth(context);
+    if (responsiveUtils.isTablet(context)) {
+      return currentWidth;
+    } else {
+      return currentWidth * 0.7;
+    }
+  }
+}

lib/features/composer/presentation/view/mobile/mobile_container_view.dart

@@ -0,0 +1,74 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
+import 'package:get/get.dart';
+import 'package:rich_text_composer/rich_text_composer.dart';
+import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/mobile/mobile_container_view_style.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnInsertImageAction = Function(BoxConstraints constraints);
+
+class MobileContainerView extends StatelessWidget {
+
+  final Widget Function(BuildContext context) childBuilder;
+  final RichTextController keyboardRichTextController;
+  final VoidCallback onCloseViewAction;
+  final VoidCallback? onAttachFileAction;
+  final OnInsertImageAction? onInsertImageAction;
+  final VoidCallback? onClearFocusAction;
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  MobileContainerView({
+    super.key,
+    required this.childBuilder,
+    required this.keyboardRichTextController,
+    required this.onCloseViewAction,
+    this.onAttachFileAction,
+    this.onInsertImageAction,
+    this.onClearFocusAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return WillPopScope(
+      onWillPop: () async {
+        onCloseViewAction.call();
+        return true;
+      },
+      child: GestureDetector(
+        onTap: onClearFocusAction,
+        child: Scaffold(
+          backgroundColor: MobileContainerViewStyle.outSideBackgroundColor,
+          resizeToAvoidBottomInset: false,
+          body: LayoutBuilder(builder: (context, constraints) {
+            return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
+              return KeyboardRichText(
+                richTextController: keyboardRichTextController,
+                keyBroadToolbar: RichTextKeyboardToolBar(
+                  backgroundKeyboardToolBarColor: MobileContainerViewStyle.keyboardToolbarBackgroundColor,
+                  isLandScapeMode: _responsiveUtils.isLandscapeMobile(context),
+                  insertAttachment: onAttachFileAction,
+                  insertImage: () => onInsertImageAction != null
+                    ? onInsertImageAction!(constraints)
+                    : null,
+                  richTextController: keyboardRichTextController,
+                  titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
+                  titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+                  titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
+                  titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
+                  titleBack: AppLocalizations.of(context).format,
+                ),
+                paddingChild: isKeyboardVisible
+                  ? MobileContainerViewStyle.keyboardToolbarPadding
+                  : EdgeInsets.zero,
+                child: childBuilder(context),
+              );
+            });
+          })
+        ),
+      )
+    );
+  }
+}

lib/features/composer/presentation/view/mobile/tablet_container_view.dart

@@ -0,0 +1,86 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
+import 'package:get/get.dart';
+import 'package:rich_text_composer/rich_text_composer.dart';
+import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/mobile/tablet_container_view_style.dart';
+import 'package:tmail_ui_user/features/composer/presentation/view/mobile/mobile_container_view.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class TabletContainerView extends StatelessWidget {
+
+  final Widget Function(BuildContext context, BoxConstraints constraints) childBuilder;
+  final RichTextController keyboardRichTextController;
+  final VoidCallback onCloseViewAction;
+  final VoidCallback? onAttachFileAction;
+  final OnInsertImageAction? onInsertImageAction;
+  final VoidCallback? onClearFocusAction;
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  TabletContainerView({
+    super.key,
+    required this.childBuilder,
+    required this.keyboardRichTextController,
+    required this.onCloseViewAction,
+    this.onAttachFileAction,
+    this.onInsertImageAction,
+    this.onClearFocusAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return WillPopScope(
+      onWillPop: () async {
+        onCloseViewAction.call();
+        return true;
+      },
+      child: GestureDetector(
+        onTap: onClearFocusAction,
+        child: Scaffold(
+          backgroundColor: TabletContainerViewStyle.outSideBackgroundColor,
+          body: LayoutBuilder(builder: (context, constraints) {
+            return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
+              return KeyboardRichText(
+                richTextController: keyboardRichTextController,
+                keyBroadToolbar: RichTextKeyboardToolBar(
+                  backgroundKeyboardToolBarColor: TabletContainerViewStyle.keyboardToolbarBackgroundColor,
+                  isLandScapeMode: _responsiveUtils.isLandscapeMobile(context),
+                  insertAttachment: onAttachFileAction,
+                  insertImage: () => onInsertImageAction != null
+                    ? onInsertImageAction!(constraints)
+                    : null,
+                  richTextController: keyboardRichTextController,
+                  titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
+                  titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+                  titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
+                  titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
+                  titleBack: AppLocalizations.of(context).format,
+                ),
+                paddingChild: isKeyboardVisible
+                  ? TabletContainerViewStyle.keyboardToolbarPadding
+                  : EdgeInsets.zero,
+                child: Center(
+                  child: Card(
+                    elevation: TabletContainerViewStyle.elevation,
+                    margin: TabletContainerViewStyle.getMargin(context, _responsiveUtils),
+                    shape: const RoundedRectangleBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(TabletContainerViewStyle.radius))
+                    ),
+                    clipBehavior: Clip.antiAlias,
+                    child: Container(
+                      color: TabletContainerViewStyle.backgroundColor,
+                      width: TabletContainerViewStyle.getWidth(context, _responsiveUtils),
+                      child: childBuilder.call(context, constraints)
+                    ),
+                  ),
+                ),
+              );
+            });
+          })
+        ),
+      )
+    );
+  }
+}