TW-1698: Add minWidth for group details (#1809)

linagora · Jun 6, 2024 · 71ef402 · 71ef402
1 parent 32901cc
commit 71ef402
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/lib/pages/chat_adaptive_scaffold/chat_adaptive_scaffold_builder.dart b/lib/pages/chat_adaptive_scaffold/chat_adaptive_scaffold_builder.dart
@@ -1,4 +1,3 @@
-import 'package:fluffychat/pages/chat/events/message/message_style.dart';
 import 'package:fluffychat/pages/chat_adaptive_scaffold/chat_adaptive_scaffold_style.dart';
 import 'package:fluffychat/presentation/enum/chat/right_column_type_enum.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
@@ -38,6 +37,8 @@ class ChatAdaptiveScaffoldBuilderController
     extends State<ChatAdaptiveScaffoldBuilder> {
   final rightColumnTypeNotifier = ValueNotifier<RightColumnType?>(null);
 
+  final responsiveUtils = ResponsiveUtils();
+
   void hideRightColumn() {
     if (PlatformInfos.isMobile) {
       Navigator.of(context).pop();
@@ -70,8 +71,7 @@ class ChatAdaptiveScaffoldBuilderController
 
   @override
   Widget build(BuildContext context) {
-    const breakpoint = ResponsiveUtils.minTabletWidth +
-        MessageStyle.messageBubbleDesktopMaxWidth;
+    final breakpoint = responsiveUtils.getMinDesktopWidth(context);
     return ValueListenableBuilder(
       valueListenable: rightColumnTypeNotifier,
       builder: (context, rightColumnType, body) {
@@ -80,7 +80,7 @@ class ChatAdaptiveScaffoldBuilderController
           child: AdaptiveLayout(
             body: SlotLayout(
               config: {
-                const WidthPlatformBreakpoint(
+                WidthPlatformBreakpoint(
                   end: breakpoint,
                 ): SlotLayout.from(
                   key: AppAdaptiveScaffold.breakpointMobileKey,
@@ -96,7 +96,7 @@ class ChatAdaptiveScaffoldBuilderController
                     ],
                   ),
                 ),
-                const WidthPlatformBreakpoint(
+                WidthPlatformBreakpoint(
                   begin: breakpoint,
                 ): SlotLayout.from(
                   key: AppAdaptiveScaffold.breakpointWebAndDesktopKey,
@@ -117,13 +117,13 @@ class ChatAdaptiveScaffoldBuilderController
             secondaryBody: rightColumnType != null
                 ? SlotLayout(
                     config: {
-                      const WidthPlatformBreakpoint(
+                      WidthPlatformBreakpoint(
                         end: breakpoint,
                       ): SlotLayout.from(
                         key: AppAdaptiveScaffold.breakpointMobileKey,
                         builder: null,
                       ),
-                      const WidthPlatformBreakpoint(
+                      WidthPlatformBreakpoint(
                         begin: breakpoint,
                       ): SlotLayout.from(
                         key: AppAdaptiveScaffold.breakpointWebAndDesktopKey,

diff --git a/lib/utils/responsive/responsive_utils.dart b/lib/utils/responsive/responsive_utils.dart
@@ -20,7 +20,16 @@ class ResponsiveUtils {
   static const double heightBottomNavigation = 72;
   static const double heightBottomNavigationBar = 56;
 
-  static const double bodyWithRightColumnRatio = 0.7;
+  static const double bodyWithRightColumnRatio = 0.64;
+  static const double groupDetailsMinWidth = 370;
+
+  double getChatBodyRatio(BuildContext context) =>
+      bodyRadioWidth / context.width;
+
+  double getMinDesktopWidth(BuildContext context) =>
+      ResponsiveUtils.groupDetailsMinWidth /
+      (1 - ResponsiveUtils.bodyWithRightColumnRatio) /
+      (1 - ResponsiveUtils().getChatBodyRatio(context));
 
   bool isScreenWithShortestSide(BuildContext context) =>
       context.mediaQueryShortestSide < minTabletWidth;

diff --git a/lib/widgets/layouts/adaptive_layout/app_adaptive_scaffold.dart b/lib/widgets/layouts/adaptive_layout/app_adaptive_scaffold.dart
@@ -1,4 +1,3 @@
-import 'package:fluffychat/utils/extension/build_context_extension.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/layouts/adaptive_layout/adaptive_scaffold_appbar.dart';
 import 'package:fluffychat/widgets/layouts/adaptive_layout/adaptive_scaffold_route_style.dart';
@@ -26,6 +25,8 @@ class AppAdaptiveScaffold extends StatelessWidget {
     this.displayAppBar = true,
   }) : super(key: key ?? scaffoldWithNestedNavigationKey);
 
+  static final _responsiveUtils = ResponsiveUtils();
+
   @override
   Widget build(BuildContext context) {
     return Portal(
@@ -60,7 +61,7 @@ class AppAdaptiveScaffold extends StatelessWidget {
                         ),
                       },
                     ),
-                    bodyRatio: ResponsiveUtils.bodyRadioWidth / context.width,
+                    bodyRatio: _responsiveUtils.getChatBodyRatio(context),
                     secondaryBody: SlotLayout(
                       config: <Breakpoint, SlotLayoutConfig>{
                         const WidthPlatformBreakpoint(