TF-2116 Create ContainerViewComposer for all platform on web

(cherry picked from commit d034974d854cdeda5cfaebaa823b977fbd8fc819)
2023-09-06 11:52:49 +07:00
parent 9b1ac0c104
commit 0b3f72915a
8 changed files with 324 additions and 0 deletions
@@ -0,0 +1,97 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/desktop_container_view_style.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/minimize_composer_widget.dart';
+
+class DesktopContainerView extends StatelessWidget {
+
+  final ScreenDisplayMode displayMode;
+  final String emailSubject;
+  final VoidCallback onCloseViewAction;
+  final OnChangeDisplayModeAction onChangeDisplayModeAction;
+  final Widget Function(BuildContext context, BoxConstraints constraints) childBuilder;
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  DesktopContainerView({
+     super.key,
+    required this.childBuilder,
+    required this.displayMode,
+    required this.emailSubject,
+    required this.onCloseViewAction,
+    required this.onChangeDisplayModeAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (displayMode == ScreenDisplayMode.minimize) {
+      return PositionedDirectional(
+        end: DesktopContainerViewStyle.margin,
+        bottom: DesktopContainerViewStyle.margin,
+        child: PointerInterceptor(
+          child: MinimizeComposerWidget(
+            emailSubject: emailSubject,
+            onCloseViewAction: onCloseViewAction,
+            onChangeDisplayModeAction: onChangeDisplayModeAction,
+          ),
+        )
+      );
+    } else if (displayMode == ScreenDisplayMode.normal) {
+      final maxWidth = _responsiveUtils.getSizeScreenWidth(context) * 0.5;
+      final maxHeight = _responsiveUtils.getSizeScreenHeight(context) * 0.75;
+
+      return PositionedDirectional(
+        end: DesktopContainerViewStyle.margin,
+        bottom: DesktopContainerViewStyle.margin,
+        child: Card(
+          elevation: DesktopContainerViewStyle.elevation,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(DesktopContainerViewStyle.radius))
+          ),
+          clipBehavior: Clip.antiAlias,
+          child: Container(
+            color: DesktopContainerViewStyle.backgroundColor,
+            width: maxWidth,
+            height: maxHeight,
+            child: LayoutBuilder(builder: (context, constraints) =>
+              PointerInterceptor(
+                child: childBuilder.call(context, constraints)
+              )
+            )
+          ),
+        )
+      );
+    } else if (displayMode == ScreenDisplayMode.fullScreen) {
+      final maxWidth = _responsiveUtils.getSizeScreenWidth(context) * 0.85;
+      final maxHeight = _responsiveUtils.getSizeScreenHeight(context) * 0.9;
+
+      return Scaffold(
+        backgroundColor: DesktopContainerViewStyle.outSideBackgroundColor,
+        body: Center(
+          child: Card(
+            elevation: DesktopContainerViewStyle.elevation,
+            shape: const RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(DesktopContainerViewStyle.radius))
+            ),
+            clipBehavior: Clip.antiAlias,
+            child: Container(
+              color: DesktopContainerViewStyle.backgroundColor,
+              width: maxWidth,
+              height: maxHeight,
+              child: LayoutBuilder(builder: (context, constraints) =>
+                PointerInterceptor(
+                  child: childBuilder.call(context, constraints)
+                )
+              )
+            ),
+          ),
+        )
+      );
+    } else {
+      return const SizedBox.shrink();
+    }
+  }
+}
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/mobile_container_view_style.dart';
+
+class MobileContainerView extends StatelessWidget {
+
+  final Widget Function(BuildContext context, BoxConstraints constraints) childBuilder;
+
+  const MobileContainerView({
+    super.key,
+    required this.childBuilder,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: MobileContainerViewStyle.outSideBackgroundColor,
+      body: LayoutBuilder(builder: (context, constraints) =>
+        PointerInterceptor(
+          child: childBuilder.call(context, constraints)
+        )
+      )
+    );
+  }
+}
@@ -0,0 +1,43 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/tablet_container_view_style.dart';
+
+class TabletContainerView extends StatelessWidget {
+
+  final Widget Function(BuildContext context, BoxConstraints constraints) childBuilder;
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  TabletContainerView({
+    super.key,
+    required this.childBuilder,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: TabletContainerViewStyle.outSideBackgroundColor,
+      body: 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: LayoutBuilder(builder: (context, constraints) =>
+              PointerInterceptor(
+                child: childBuilder.call(context, constraints)
+              )
+            )
+          ),
+        ),
+      )
+    );
+  }
+}