TF-2531 Fix cannot see all recipients list if email have a lot of recipients

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/email/presentation/email_view.dart

@@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_widget.dart';
+import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
@@ -123,7 +124,9 @@ class EmailView extends GetWidget<SingleEmailController> {
                   }
                 }),
                 Expanded(
-                  child: Obx(() {
+                  child: LayoutBuilder(builder: (context, constraints) {
+                    log('EmailView::build: EMAIL_BODY_MAX_HEIGHT = ${constraints.maxHeight}');
+                    return Obx(() {
                       if (controller.emailSupervisorController.supportedPageView.isTrue) {
                         final currentListEmail = controller.emailSupervisorController.currentListEmail;
                         return PageView.builder(
@@ -145,6 +148,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                                     context: context,
                                     presentationEmail: currentEmail,
                                     calendarEvent: controller.calendarEvent.value,
+                                    maxBodyHeight: constraints.maxHeight
                                   ))
                                 )
                               );
@@ -177,6 +181,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                                   return _buildEmailMessage(
                                     context: context,
                                     presentationEmail: currentEmail,
+                                    maxBodyHeight: constraints.maxHeight
                                   );
                                 }
                               });
@@ -195,6 +200,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                                 context: context,
                                 presentationEmail: currentEmail,
                                 calendarEvent: controller.calendarEvent.value,
+                                maxBodyHeight: constraints.maxHeight
                               ))
                             )
                           );
@@ -218,6 +224,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                                         presentationEmail: currentEmail,
                                         calendarEvent: calendarEvent,
                                         emailAddressSender: currentEmail.listEmailAddressSender.getListAddress(),
+                                        maxBodyHeight: constraints.maxHeight
                                       )
                                     )
                                   ),
@@ -227,11 +234,13 @@ class EmailView extends GetWidget<SingleEmailController> {
                               return _buildEmailMessage(
                                 context: context,
                                 presentationEmail: currentEmail,
+                                maxBodyHeight: constraints.maxHeight
                               );
                             }
                           });
                         }
                       }
+                    });
                   }),
                 ),
                 EmailViewBottomBarWidget(
@@ -305,6 +314,7 @@ class EmailView extends GetWidget<SingleEmailController> {
     required PresentationEmail presentationEmail,
     CalendarEvent? calendarEvent,
     List<String>? emailAddressSender,
+    double? maxBodyHeight,
   }) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -315,6 +325,7 @@ class EmailView extends GetWidget<SingleEmailController> {
           imagePaths: controller.imagePaths,
           responsiveUtils: controller.responsiveUtils,
           emailUnsubscribe: controller.emailUnsubscribe.value,
+          maxBodyHeight: maxBodyHeight,
           openEmailAddressDetailAction: controller.openEmailAddressDialog,
           onEmailActionClick: (presentationEmail, actionType) => controller.handleEmailAction(context, presentationEmail, actionType),
         )),

lib/features/email/presentation/widgets/email_receiver_widget.dart

@@ -5,6 +5,7 @@ import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
@@ -14,6 +15,7 @@ import 'package:model/extensions/email_address_extension.dart';
 import 'package:model/extensions/list_email_address_extension.dart';
 import 'package:model/extensions/presentation_email_extension.dart';
 import 'package:tmail_ui_user/features/base/widget/material_text_button.dart';
+import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_sender_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -23,12 +25,14 @@ class EmailReceiverWidget extends StatefulWidget {
 
   final PresentationEmail emailSelected;
   final double maxWidth;
+  final double? maxHeight;
   final OnOpenEmailAddressDetailAction? openEmailAddressDetailAction;
 
   const EmailReceiverWidget({
     Key? key,
     required this.emailSelected,
     this.maxWidth = 200,
+    this.maxHeight,
     this.openEmailAddressDetailAction,
   }) : super(key: key);
 
@@ -39,9 +43,11 @@ class EmailReceiverWidget extends StatefulWidget {
 class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
 
   static const double _maxSizeFullDisplayEmailAddressArrowDownButton = 50.0;
+  static const double _offsetTop = 100.0;
 
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _scrollController = ScrollController();
 
   bool _isDisplayAll = false;
 
@@ -54,12 +60,32 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
           padding: EdgeInsets.only(top: _isDisplayAll
             ? DirectionUtils.isDirectionRTLByLanguage(context) ? 3 : 5.5
             : 0),
+          child: PlatformInfo.isWeb
+            ? Container(
+                constraints: BoxConstraints(
+                  maxHeight: _isDisplayAll && widget.maxHeight != null
+                    ? widget.maxHeight! / 2 - _offsetTop
+                    : double.infinity
+                ),
+                child: ScrollbarListView(
+                  scrollController: _scrollController,
+                  child: SingleChildScrollView(
+                    controller: _scrollController,
                     child: _buildEmailAddressOfReceiver(
                       context,
                       widget.emailSelected,
                       _isDisplayAll,
                       widget.maxWidth
                     ),
+                  ),
+                ),
+              )
+            : _buildEmailAddressOfReceiver(
+                context,
+                widget.emailSelected,
+                _isDisplayAll,
+                widget.maxWidth
+              ),
         )),
         if (_isDisplayAll)
           Padding(
@@ -244,4 +270,10 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
       return maxWidth * 3/4;
     }
   }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
 }

lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart

@@ -22,6 +22,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
   final EmailUnsubscribe? emailUnsubscribe;
   final OnOpenEmailAddressDetailAction? openEmailAddressDetailAction;
   final OnEmailActionClick? onEmailActionClick;
+  final double? maxBodyHeight;
 
   const InformationSenderAndReceiverBuilder({
     Key? key,
@@ -29,6 +30,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
     required this.responsiveUtils,
     required this.imagePaths,
     required this.emailUnsubscribe,
+    this.maxBodyHeight,
     this.openEmailAddressDetailAction,
     this.onEmailActionClick,
   }) : super(key: key);
@@ -88,6 +90,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                     EmailReceiverWidget(
                       emailSelected: emailSelected,
                       maxWidth: constraints.maxWidth,
+                      maxHeight: maxBodyHeight,
                       openEmailAddressDetailAction: openEmailAddressDetailAction,
                     )
                 ]