diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 6b989d9b6..2d33cb3de 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -108,5 +108,7 @@ class ResponsiveUtils { } } + bool isMatchedDesktopWidth(double width) => width >= minDesktopWidth; + static bool isMatchedMobileWidth(double width) => width < minTabletWidth; } \ No newline at end of file diff --git a/lib/features/composer/presentation/manager/composer_manager.dart b/lib/features/composer/presentation/manager/composer_manager.dart index d18dc8922..52a94a7f1 100644 --- a/lib/features/composer/presentation/manager/composer_manager.dart +++ b/lib/features/composer/presentation/manager/composer_manager.dart @@ -21,6 +21,7 @@ class ComposerManager extends GetxController { void addComposer(ComposerArguments composerArguments) { final id = DateTime.now().millisecondsSinceEpoch.toString(); + log('ComposerManager::addComposer:Id = $id'); ComposerBindings(composerId: id, composerArguments: composerArguments).dependencies(); composers[id] = ComposerView(key: Key(id), composerId: id); @@ -30,6 +31,7 @@ class ComposerManager extends GetxController { } void removeComposer(String id) { + log('ComposerManager::removeComposer:Id = $id'); if (!composers.containsKey(id)) return; composerIdsQueue.remove(id); @@ -70,7 +72,7 @@ class ComposerManager extends GetxController { - ComposerStyle.composerExpandMoreButtonMaxWidth - ComposerStyle.padding * 2 - (countDisplayedComposer - 1) * ComposerStyle.space; - log('ComposerManager::_getSizeToArrangeComposers:screenWidth = $screenWidth | availableScreenWidth = $availableScreenWidth | totalOpenedComposersWidth = $totalOpenedComposersWidth'); + log('ComposerManager::_getSizeToArrangeComposers:ScreenWidth = $screenWidth | AvailableScreenWidth = $availableScreenWidth | TotalOpenedComposersWidth = $totalOpenedComposersWidth'); return ( availableScreenWidth, totalOpenedComposersWidth, @@ -78,29 +80,12 @@ class ComposerManager extends GetxController { ); } - void _showMinimizedComposersIfOverflow({ - required double availableScreenWidth, - required double totalOpenedComposersWidth, - required Map composerControllers, - }) { - final currentHiddenComposerIds = hiddenComposerIds; - if (currentHiddenComposerIds.isEmpty) return; - - for (var index = currentHiddenComposerIds.length - 1; index >= 0; index--) { - final newTotalWidth = totalOpenedComposersWidth + ComposerStyle.minimizeWidth; - if (newTotalWidth > availableScreenWidth) break; - - final id = currentHiddenComposerIds.elementAt(index); - composerControllers[id]!.setScreenDisplayMode(ScreenDisplayMode.minimize); - totalOpenedComposersWidth = newTotalWidth; - } - } - void _hideComposersIfFit({ required double availableScreenWidth, required double totalOpenedComposersWidth, required Map composerControllers, }) { + log('ComposerManager::_hideComposersIfFit:'); final currentDisplayedComposerIds = displayedComposerIds; if (currentDisplayedComposerIds.isEmpty) return; @@ -129,16 +114,11 @@ class ComposerManager extends GetxController { } void arrangeComposerWhenComposerQueueChanged({required double screenWidth}) { + log('ComposerManager::arrangeComposerWhenComposerQueueChanged:ScreenWidth = $screenWidth'); var (availableScreenWidth, totalOpenedComposersWidth, composerControllers) = _getSizeToArrangeComposer(screenWidth: screenWidth); - if (totalOpenedComposersWidth < availableScreenWidth) { - _showMinimizedComposersIfOverflow( - availableScreenWidth: availableScreenWidth, - totalOpenedComposersWidth: totalOpenedComposersWidth, - composerControllers: composerControllers, - ); - } else if (totalOpenedComposersWidth > availableScreenWidth) { + if (totalOpenedComposersWidth > availableScreenWidth) { _hideComposersIfFit( availableScreenWidth: availableScreenWidth, totalOpenedComposersWidth: totalOpenedComposersWidth, @@ -197,13 +177,7 @@ class ComposerManager extends GetxController { var (availableScreenWidth, totalOpenedComposersWidth, composerControllers) = _getSizeToArrangeComposer(screenWidth: screenWidth); - if (totalOpenedComposersWidth < availableScreenWidth) { - _showMinimizedComposersIfOverflow( - availableScreenWidth: availableScreenWidth, - totalOpenedComposersWidth: totalOpenedComposersWidth, - composerControllers: composerControllers, - ); - } else if (totalOpenedComposersWidth > availableScreenWidth) { + if (totalOpenedComposersWidth > availableScreenWidth) { _hideComposersPreferringMinimizedIfFit( updatedComposerId: updatedComposerId, availableScreenWidth: availableScreenWidth, @@ -279,12 +253,19 @@ class ComposerManager extends GetxController { } void showComposerIfHidden(String composerId) { + log('ComposerManager::showComposerIfHidden:Id = $composerId'); if (!composers.containsKey(composerId)) return; composerIdsQueue.remove(composerId); composerIdsQueue.add(composerId); final composerView = getComposerView(composerId); composerView.controller.setScreenDisplayMode(ScreenDisplayMode.normal); - _arrangeComposerIfNeeded(); + if (currentContext != null) { + arrangeComposerWhenComposerDisplayModeChanged( + screenWidth: _responsiveUtils.getSizeScreenWidth(currentContext!), + updatedComposerId: composerId, + newDisplayMode: ScreenDisplayMode.normal, + ); + } } ComposerView getComposerView(String id) => composers[id]!; diff --git a/lib/features/composer/presentation/view/web/composer_overlay_view.dart b/lib/features/composer/presentation/view/web/composer_overlay_view.dart index a3b359f33..0d9aa06b5 100644 --- a/lib/features/composer/presentation/view/web/composer_overlay_view.dart +++ b/lib/features/composer/presentation/view/web/composer_overlay_view.dart @@ -1,5 +1,4 @@ -import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:tmail_ui_user/features/composer/presentation/extensions/update_screen_display_mode_extension.dart'; @@ -8,84 +7,90 @@ import 'package:tmail_ui_user/features/composer/presentation/styles/composer_sty import 'package:tmail_ui_user/features/composer/presentation/widgets/web/expand_composer_button.dart'; class ComposerOverlayView extends StatelessWidget { - final ComposerManager _composerManager = Get.find(); - final ResponsiveUtils _responsiveUtils = Get.find(); + final ComposerManager composerManager; + final bool isDesktopScreen; - ComposerOverlayView({super.key}); + const ComposerOverlayView({ + super.key, + required this.composerManager, + required this.isDesktopScreen, + }); @override Widget build(BuildContext context) { - final screenWidth = MediaQuery.sizeOf(context).width; - - if (_composerManager.composers.isNotEmpty) { - _composerManager.arrangeComposerWhenResponsiveChanged(screenWidth: screenWidth); - } - return Obx(() { - final composers = _composerManager.composers; - final composerIdsQueue = _composerManager.composerIdsQueue; + final composers = composerManager.composers; + final composerIdsQueue = composerManager.composerIdsQueue; if (composers.isEmpty || composerIdsQueue.isEmpty) return const SizedBox.shrink(); - if (!_responsiveUtils.isDesktop(context)) { - final firstResponsiveComposerView = _composerManager.firstComposerViewWhenResponsiveChanged; + if (!isDesktopScreen) { + final firstResponsiveComposerView = composerManager.firstComposerViewWhenResponsiveChanged; if (firstResponsiveComposerView != null) return firstResponsiveComposerView; } - final fullScreenComposerView = _composerManager.firstFullScreenComposerView; + final fullScreenComposerView = composerManager.firstFullScreenComposerView; if (fullScreenComposerView != null) return fullScreenComposerView; if (composerIdsQueue.length == 1) { - final composerView = _composerManager.getComposerView(composerIdsQueue.first); + final composerView = composerManager.getComposerView(composerIdsQueue.first); if (composerView.controller.isHiddenScreen) { - return Align( - alignment: AlignmentDirectional.bottomEnd, - child: SingleChildScrollView( - scrollDirection: Axis.horizontal, - child: Padding( - padding: const EdgeInsetsDirectional.all(ComposerStyle.padding), - child: ExpandComposerButton( - countComposerHidden: 1, - onRemoveHiddenComposerItem: (controller) => - controller.handleClickCloseComposer(context), - onShowComposerAction: _composerManager.showComposerIfHidden, + return Stack( + children: [ + Align( + alignment: AlignmentDirectional.bottomEnd, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Padding( + padding: const EdgeInsetsDirectional.all(ComposerStyle.padding), + child: ExpandComposerButton( + countComposerHidden: 1, + onRemoveHiddenComposerItem: (controller) => + controller.handleClickCloseComposer(context), + onShowComposerAction: composerManager.showComposerIfHidden, + ), + ), ), ), - ), + ], ); } else { return composerView; } } - final countComposerHidden = _composerManager.countComposerHidden; + final countComposerHidden = composerManager.countComposerHidden; final visibleComposers = composerIdsQueue - .map(_composerManager.getComposerView) + .map(composerManager.getComposerView) .where((view) => !view.controller.isHiddenScreen) .toList(); - return Align( - alignment: AlignmentDirectional.bottomEnd, - child: SingleChildScrollView( - scrollDirection: Axis.horizontal, - child: Padding( - padding: const EdgeInsetsDirectional.all(ComposerStyle.padding), - child: Row( - crossAxisAlignment: CrossAxisAlignment.end, - mainAxisSize: MainAxisSize.min, - children: [ - if (countComposerHidden > 0) - ExpandComposerButton( - countComposerHidden: countComposerHidden, - onRemoveHiddenComposerItem: (controller) => - controller.handleClickCloseComposer(context), - onShowComposerAction: _composerManager.showComposerIfHidden, - ), - ...visibleComposers, - ], + return Stack( + children: [ + Align( + alignment: AlignmentDirectional.bottomEnd, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Padding( + padding: const EdgeInsetsDirectional.all(ComposerStyle.padding), + child: Row( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisSize: MainAxisSize.min, + children: [ + if (countComposerHidden > 0) + ExpandComposerButton( + countComposerHidden: countComposerHidden, + onRemoveHiddenComposerItem: (controller) => + controller.handleClickCloseComposer(context), + onShowComposerAction: composerManager.showComposerIfHidden, + ), + ...visibleComposers, + ], + ), + ), ), ), - ), + ], ); }); } diff --git a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart index 4f47772c3..425635223 100644 --- a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart +++ b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart @@ -825,8 +825,8 @@ class MailboxDashBoardController extends ReloadableController } } - void hideMailboxMenuWhenScreenSizeChange(BuildContext context) { - if (responsiveUtils.isWebDesktop(context) && isDrawerOpen) { + void hideMailboxMenuWhenScreenSizeChange() { + if (isDrawerOpen) { WidgetsBinding.instance.addPostFrameCallback((_) { closeMailboxMenuDrawer(); }); diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart index e752e4bf2..f0376ebf2 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -50,8 +50,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { @override Widget build(BuildContext context) { - controller.hideMailboxMenuWhenScreenSizeChange(context); - return Portal( child: Stack(children: [ ResponsiveWidget( @@ -198,7 +196,32 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { } }), ), - ComposerOverlayView(), + Align( + alignment: AlignmentDirectional.bottomEnd, + child: LayoutBuilder( + builder: ((context, constraints) { + log('MailboxDashBoardView::build:LayoutBuilder:Constraints = $constraints'); + final screenWidth = constraints.maxWidth; + final composerManager = controller.composerManager; + final isDesktopScreen = controller.responsiveUtils.isMatchedDesktopWidth(screenWidth); + log('MailboxDashBoardView::build:ScreenWidth = $screenWidth | isDesktopScreen = $isDesktopScreen'); + + if (isDesktopScreen) { + controller.hideMailboxMenuWhenScreenSizeChange(); + } + + if (composerManager.composers.isNotEmpty) { + log('ComposerOverlayView::build:arrangeComposerWhenResponsiveChanged'); + composerManager.arrangeComposerWhenResponsiveChanged(screenWidth: screenWidth); + } + + return ComposerOverlayView( + composerManager: composerManager, + isDesktopScreen: isDesktopScreen, + ); + }), + ), + ), Obx(() => controller.searchMailboxActivated.value == true && !controller.responsiveUtils.isWebDesktop(context) ? const SearchMailboxView() : const SizedBox.shrink()