diff --git a/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart b/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart index 68adc3967..9f8b143b2 100644 --- a/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart +++ b/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart @@ -1,3 +1,4 @@ +import 'package:core/core.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; @@ -8,6 +9,8 @@ class HtmlContentViewer extends StatefulWidget { final String contentHtml; final int minHeight; + final double widthContent; + final Widget? loadingWidget; /// Register this callback if you want a reference to the [InAppWebViewController]. final void Function(InAppWebViewController controller)? onCreated; @@ -22,7 +25,9 @@ class HtmlContentViewer extends StatefulWidget { const HtmlContentViewer({ Key? key, required this.contentHtml, + required this.widthContent, this.minHeight = 100, + this.loadingWidget, this.onCreated, this.onLoadStart, this.onLoadStop, @@ -39,6 +44,7 @@ class _HtmlContentViewState extends State { double? _documentWidth = 1.0; String? _initialPageContent; late InAppWebViewController _webViewController; + bool loading = true; @override void initState() { @@ -101,15 +107,33 @@ class _HtmlContentViewState extends State { @override Widget build(BuildContext context) { - final size = MediaQuery.of(context).size; - _documentWidth = size.width - 30; - return SizedBox( - height: _documentHeight, - width: _documentWidth, - child: _buildWebView(), + _documentWidth = widget.widthContent; + return Stack( + alignment: AlignmentDirectional.center, + children: [ + SizedBox( + height: _documentHeight, + width: _documentWidth, + child: _buildWebView(), + ), + if (loading) _buildLoadingView() + ], ); } + Widget _buildLoadingView() { + if (widget.loadingWidget != null) { + return widget.loadingWidget!; + } else { + return Padding( + padding: EdgeInsets.all(16), + child: SizedBox( + width: 30, + height: 30, + child: CircularProgressIndicator(color: AppColor.primaryColor))); + } + } + Widget _buildWebView() { if (_initialPageContent == null || _initialPageContent?.isEmpty == true) { return Container(); @@ -148,6 +172,9 @@ class _HtmlContentViewState extends State { _documentHeight = (scrollHeight + 30.0); }); } + setState(() { + loading = false; + }); if (widget.onLoadStop != null) { widget.onLoadStop!(controller, uri); } diff --git a/lib/features/composer/presentation/composer_controller.dart b/lib/features/composer/presentation/composer_controller.dart index 13d42afc2..c693b1f01 100644 --- a/lib/features/composer/presentation/composer_controller.dart +++ b/lib/features/composer/presentation/composer_controller.dart @@ -214,7 +214,10 @@ class ComposerController extends BaseController { .addBlockTag('p', attribute: 'style=\"font-size:14px;font-style:italic;color:#182952;\"') : ''; - final trustAsHtml = composerArguments.value?.emailContent?.content ?? ''; + final trustAsHtml = composerArguments.value?.emailContents + ?.map((emailContent) => emailContent.content) + .toList() + .join('
') ?? ''; final emailQuotedHtml = '


$headerEmailQuotedAsHtml${trustAsHtml.addBlockQuoteTag()}
'; diff --git a/lib/features/email/data/datasource/html_datasource.dart b/lib/features/email/data/datasource/html_datasource.dart index 4802ebe7a..c3bafa717 100644 --- a/lib/features/email/data/datasource/html_datasource.dart +++ b/lib/features/email/data/datasource/html_datasource.dart @@ -2,5 +2,5 @@ import 'package:model/model.dart'; abstract class HtmlDataSource { - Future transformToHtml(EmailContent emailContent); + Future transformEmailContent(EmailContent emailContent); } \ No newline at end of file diff --git a/lib/features/email/data/datasource_impl/html_datasource_impl.dart b/lib/features/email/data/datasource_impl/html_datasource_impl.dart index c8e04375b..69dca84a9 100644 --- a/lib/features/email/data/datasource_impl/html_datasource_impl.dart +++ b/lib/features/email/data/datasource_impl/html_datasource_impl.dart @@ -9,9 +9,9 @@ class HtmlDataSourceImpl extends HtmlDataSource { HtmlDataSourceImpl(this._htmlAnalyzer); @override - Future transformToHtml(EmailContent emailContent) { + Future transformEmailContent(EmailContent emailContent) { return Future.sync(() async { - return await _htmlAnalyzer.transformToHtml(emailContent); + return await _htmlAnalyzer.transformEmailContent(emailContent); }).catchError((error) { throw error; }); diff --git a/lib/features/email/data/local/html_analyzer.dart b/lib/features/email/data/local/html_analyzer.dart index 46c04fb9a..2e43a4c59 100644 --- a/lib/features/email/data/local/html_analyzer.dart +++ b/lib/features/email/data/local/html_analyzer.dart @@ -5,13 +5,14 @@ import 'package:model/model.dart'; class HtmlAnalyzer { - Future transformToHtml(EmailContent emailContent) async { + Future transformEmailContent(EmailContent emailContent) async { switch(emailContent.type) { case EmailContentType.textHtml: final htmlTransform = HtmlTransform(emailContent.content); - return htmlTransform.transformToHtml(); + final htmlContent = htmlTransform.transformToHtml(); + return EmailContent(emailContent.type, htmlContent); default: - return emailContent.content; + return emailContent; } } } \ No newline at end of file diff --git a/lib/features/email/data/repository/email_repository_impl.dart b/lib/features/email/data/repository/email_repository_impl.dart index a1a4d0d3d..e27d29e0d 100644 --- a/lib/features/email/data/repository/email_repository_impl.dart +++ b/lib/features/email/data/repository/email_repository_impl.dart @@ -72,7 +72,11 @@ class EmailRepositoryImpl extends EmailRepository { } @override - Future transformEmailContentToHtml(EmailContent emailContent) { - return _htmlDataSource.transformToHtml(emailContent); + Future> transformEmailContent(List emailContents) async { + return await Future.wait(emailContents + .map((emailContent) async { + return await _htmlDataSource.transformEmailContent(emailContent); + }) + .toList()); } } \ No newline at end of file diff --git a/lib/features/email/domain/repository/email_repository.dart b/lib/features/email/domain/repository/email_repository.dart index c56dd6db3..1f325e6af 100644 --- a/lib/features/email/domain/repository/email_repository.dart +++ b/lib/features/email/domain/repository/email_repository.dart @@ -35,5 +35,5 @@ abstract class EmailRepository { MarkStarAction markStarAction ); - Future transformEmailContentToHtml(EmailContent emailContent); + Future> transformEmailContent(List emailContents); } \ No newline at end of file diff --git a/lib/features/email/domain/state/get_email_content_state.dart b/lib/features/email/domain/state/get_email_content_state.dart index d27e81241..2726c39a8 100644 --- a/lib/features/email/domain/state/get_email_content_state.dart +++ b/lib/features/email/domain/state/get_email_content_state.dart @@ -2,13 +2,13 @@ import 'package:core/core.dart'; import 'package:model/model.dart'; class GetEmailContentSuccess extends UIState { - final EmailContent emailContent; + final List emailContents; final List attachments; - GetEmailContentSuccess(this.emailContent, this.attachments); + GetEmailContentSuccess(this.emailContents, this.attachments); @override - List get props => [emailContent, attachments]; + List get props => [emailContents, attachments]; } class GetEmailContentFailure extends FeatureFailure { diff --git a/lib/features/email/domain/usecases/get_email_content_interactor.dart b/lib/features/email/domain/usecases/get_email_content_interactor.dart index ae54f07dd..a75bd83d2 100644 --- a/lib/features/email/domain/usecases/get_email_content_interactor.dart +++ b/lib/features/email/domain/usecases/get_email_content_interactor.dart @@ -17,15 +17,8 @@ class GetEmailContentInteractor { final email = await emailRepository.getEmailContent(accountId, emailId); if (email.emailContentList.isNotEmpty) { - final emailContent = email.emailContentList.first; - if (emailContent.type == EmailContentType.textHtml) { - final contentHtml = await emailRepository.transformEmailContentToHtml(emailContent); - yield Right(GetEmailContentSuccess( - EmailContent(emailContent.type, contentHtml), - email.allAttachments)); - } else { - yield Right(GetEmailContentSuccess(emailContent, email.allAttachments)); - } + final newEmailContents = await emailRepository.transformEmailContent(email.emailContentList); + yield Right(GetEmailContentSuccess(newEmailContents, email.allAttachments)); } else { yield Left(GetEmailContentFailure(null)); } diff --git a/lib/features/email/presentation/email_controller.dart b/lib/features/email/presentation/email_controller.dart index 341cefe55..b8d660046 100644 --- a/lib/features/email/presentation/email_controller.dart +++ b/lib/features/email/presentation/email_controller.dart @@ -26,7 +26,6 @@ import 'package:tmail_ui_user/features/email/domain/usecases/mark_as_star_email_ import 'package:tmail_ui_user/features/email/domain/usecases/mark_as_email_read_interactor.dart'; import 'package:tmail_ui_user/features/email/domain/usecases/move_to_mailbox_interactor.dart'; import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart'; -import 'package:tmail_ui_user/features/email/presentation/model/web_view_state.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/routes/app_routes.dart'; @@ -49,7 +48,7 @@ class EmailController extends BaseController { final emailAddressExpandMode = ExpandMode.COLLAPSE.obs; final attachmentsExpandMode = ExpandMode.COLLAPSE.obs; - final emailContent = Rxn(); + final emailContents = [].obs; final attachments = [].obs; EmailId? _currentEmailId; @@ -129,17 +128,14 @@ class EmailController extends BaseController { } void _getEmailContentSuccess(GetEmailContentSuccess success) { - emailContent.value = success.emailContent; + emailContents.value = success.emailContents; attachments.value = success.attachments; - if (emailContent.value != null && emailContent.value!.type == EmailContentType.textHtml) { - dispatchState(Right(WebViewLoadingState())); - } } void _clearEmailContent() { toggleDisplayEmailAddressAction(expandMode: ExpandMode.COLLAPSE); attachmentsExpandMode.value = ExpandMode.COLLAPSE; - emailContent.value = null; + emailContents.clear(); attachments.clear(); } @@ -357,7 +353,7 @@ class EmailController extends BaseController { arguments: ComposerArguments( emailActionType: emailActionType, presentationEmail: mailboxDashBoardController.selectedEmail.value!, - emailContent: emailContent.value, + emailContents: emailContents, attachments: attachments, mailboxRole: mailboxDashBoardController.selectedMailbox.value?.role, session: mailboxDashBoardController.sessionCurrent!, diff --git a/lib/features/email/presentation/email_view.dart b/lib/features/email/presentation/email_view.dart index 55ff11fe1..9c64d8af8 100644 --- a/lib/features/email/presentation/email_view.dart +++ b/lib/features/email/presentation/email_view.dart @@ -1,18 +1,18 @@ import 'dart:io'; import 'package:core/core.dart'; -import 'package:dartz/dartz.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/features/email/presentation/email_controller.dart'; -import 'package:tmail_ui_user/features/email/presentation/model/web_view_state.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_widget_builder.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_file_tile_builder.dart'; +import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart'; import 'package:tmail_ui_user/features/email/presentation/extensions/list_attachment_extension.dart'; +import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_item_builder.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -27,21 +27,17 @@ class EmailView extends GetView { @override Widget build(BuildContext context) { return Scaffold( - resizeToAvoidBottomInset: false, backgroundColor: AppColor.primaryLightColor, body: SafeArea( right: false, left: false, - child: Container( - alignment: Alignment.center, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - _buildAppBar(context), - Expanded(child: _buildEmailBody(context)), - _buildBottomBar(context), - ]) + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + _buildAppBar(context), + Expanded(child: _buildEmailBody(context)), + _buildBottomBar(context), + ] ) )); } @@ -116,14 +112,6 @@ class EmailView extends GetView { )); } - Widget _buildLoadingView() { - return Obx(() => emailController.viewState.value.fold( - (failure) => SizedBox.shrink(), - (success) => success is LoadingState || success is WebViewLoadingState - ? EmailContentPlaceHolderLoading(responsiveUtils: responsiveUtils) - : SizedBox.shrink())); - } - Widget _buildEmailMessage(BuildContext context) { return Container( padding: EdgeInsets.only(left: 12, right: 12, top: 16, bottom: 16), @@ -143,9 +131,8 @@ class EmailView extends GetView { emailController.emailAddressExpandMode.value) .onOpenExpandAddressReceiverActionClick(() => emailController.toggleDisplayEmailAddressAction(expandMode: ExpandMode.EXPAND)) .build()), - _buildLoadingView(), _buildAttachments(context), - _buildEmailContent(), + _buildListEmailContent(), ], ) ); @@ -155,8 +142,8 @@ class EmailView extends GetView { return Obx(() => emailController.viewState.value.fold( (failure) => SizedBox.shrink(), (success) { - if (success is LoadingState || success is WebViewLoadingState) { - return SizedBox.shrink(); + if (success is LoadingState) { + return AttachmentsPlaceHolderLoading(responsiveUtils: responsiveUtils); } else { final attachments = emailController.attachments.attachmentsWithDispositionAttachment; return attachments.isNotEmpty @@ -272,28 +259,30 @@ class EmailView extends GetView { ); } - Widget _buildEmailContent() { - return Obx(() { - if (emailController.emailContent.value != null) { - switch(emailController.emailContent.value!.type) { - case EmailContentType.textHtml: - return HtmlContentViewer( - contentHtml: emailController.emailContent.value!.content, - onLoadStart: (webController, uri) => emailController.dispatchState(Right(WebViewLoadingState())), - onLoadStop: (webController, uri) => emailController.dispatchState(Right(WebViewLoadCompletedState())), - mailtoDelegate: (uri) async {}); - case EmailContentType.textPlain: - return Padding( - padding: EdgeInsets.only(top: 16), - child: Text( - emailController.emailContent.value!.content, - style: TextStyle(fontSize: 14, color: AppColor.nameUserColor))); - case EmailContentType.other: + Widget _buildListEmailContent() { + return Obx(() => emailController.viewState.value.fold( + (failure) => SizedBox.shrink(), + (success) { + if (success is LoadingState) { + return EmailContentPlaceHolderLoading(responsiveUtils: responsiveUtils); + } else { + if (emailController.emailContents.isNotEmpty) { + return ListView.builder( + primary: false, + shrinkWrap: true, + padding: EdgeInsets.only(top: 10), + key: Key('list_email_content'), + itemCount: emailController.emailContents.length, + itemBuilder: (context, index) => + EmailContentItemBuilder( + context, + emailController.emailContents[index], + loadingWidget: EmailContentPlaceHolderLoading(responsiveUtils: responsiveUtils) + ).build()); + } else { return SizedBox.shrink(); + } } - } else { - return SizedBox.shrink(); - } - }); + })); } } \ No newline at end of file diff --git a/lib/features/email/presentation/model/composer_arguments.dart b/lib/features/email/presentation/model/composer_arguments.dart index 8bb10728b..1cc49ea7c 100644 --- a/lib/features/email/presentation/model/composer_arguments.dart +++ b/lib/features/email/presentation/model/composer_arguments.dart @@ -7,7 +7,7 @@ import 'package:model/model.dart'; class ComposerArguments with EquatableMixin { final EmailActionType emailActionType; final PresentationEmail? presentationEmail; - final EmailContent? emailContent; + final List? emailContents; final List? attachments; final Session session; final UserProfile userProfile; @@ -17,7 +17,7 @@ class ComposerArguments with EquatableMixin { ComposerArguments({ this.emailActionType = EmailActionType.compose, this.presentationEmail, - this.emailContent, + this.emailContents, this.attachments, this.mailboxRole, required this.session, @@ -28,8 +28,7 @@ class ComposerArguments with EquatableMixin { @override List get props => [ emailActionType, - presentationEmail, - emailContent, + emailContents, attachments, mailboxRole, session, diff --git a/lib/features/email/presentation/model/web_view_state.dart b/lib/features/email/presentation/model/web_view_state.dart deleted file mode 100644 index 6a0bad60d..000000000 --- a/lib/features/email/presentation/model/web_view_state.dart +++ /dev/null @@ -1,16 +0,0 @@ - -import 'package:core/core.dart'; - -class WebViewLoadingState extends UIState { - WebViewLoadingState(); - - @override - List get props => []; -} - -class WebViewLoadCompletedState extends UIState { - WebViewLoadCompletedState(); - - @override - List get props => []; -} \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart new file mode 100644 index 000000000..19cd6fb3e --- /dev/null +++ b/lib/features/email/presentation/widgets/attachments_place_holder_loading_widget.dart @@ -0,0 +1,131 @@ + +import 'package:core/core.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +const List _defaultColors = [Color.fromRGBO(0, 0, 0, 0.1), Color(0x44CCCCCC), Color.fromRGBO(0, 0, 0, 0.1)]; + +Decoration _radiusBoxDecoration({ + required Animation animation, + bool hasCustomColors = false, + AlignmentGeometry beginAlign = Alignment.topLeft, + AlignmentGeometry endAlign = Alignment.bottomRight, + List colors = _defaultColors, + double radius = 10.0 +}) { + return BoxDecoration( + borderRadius: BorderRadius.circular(radius), + shape: BoxShape.rectangle, + gradient: LinearGradient( + begin: beginAlign, + end: endAlign, + colors: hasCustomColors + ? colors.map((color) { + return color; + }).toList() + : [ + Color.fromRGBO(0, 0, 0, 0.1), + Color(0x32E5E5E5), + Color.fromRGBO(0, 0, 0, 0.1), + ], + stops: [animation.value - 2, animation.value, animation.value + 1])); +} + +class AttachmentsPlaceHolderLoading extends StatefulWidget { + + final ResponsiveUtils responsiveUtils; + + const AttachmentsPlaceHolderLoading({ + Key? key, + required this.responsiveUtils, + }) : super(key: key); + + @override + State createState() => _AttachmentsPlaceHolderLoadingState(); +} + +class _AttachmentsPlaceHolderLoadingState extends State with SingleTickerProviderStateMixin { + late AnimationController _animationController; + late Animation _animation; + + @override + void initState() { + super.initState(); + _animationController = AnimationController(duration: Duration(seconds: 1), vsync: this)..repeat(); + _animation = Tween(begin: -2, end: 2) + .animate(CurvedAnimation(curve: Curves.easeInOutSine, parent: _animationController)); + } + + @override + void dispose() { + _animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return AnimatedBuilder( + animation: _animation, + builder: (BuildContext context, Widget? child) { + return Container( + margin: EdgeInsets.only(top: 20), + padding: EdgeInsets.zero, + color: Colors.transparent, + child: Column( + children: [ + Row(children: [ + _placeHolderAttachment(context), + SizedBox(width: 16), + _placeHolderAttachment(context), + if (!widget.responsiveUtils.isMobile(context)) + SizedBox(width: 16), + if (!widget.responsiveUtils.isMobile(context)) + _placeHolderAttachment(context), + if (widget.responsiveUtils.isTablet(context)) + SizedBox(width: 16), + if (widget.responsiveUtils.isTablet(context)) + _placeHolderAttachment(context), + ]), + ], + ), + ); + }, + ); + } + + Widget _placeHolderAttachment(BuildContext context) { + double width = MediaQuery.of(context).size.width; + final percentAttachment = widget.responsiveUtils.isMobile(context) + ? 0.4 + : widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14; + return Container( + height: 55, + width: width * percentAttachment, + margin: EdgeInsets.zero, + padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16), + decoration: _radiusBoxDecoration(animation: _animation), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + height: 24, + width: 24, + decoration: _radiusBoxDecoration(animation: _animation, radius: 12)), + SizedBox(width: 8), + Expanded(child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + height: 5, + decoration: _radiusBoxDecoration(animation: _animation)), + SizedBox(height: 10), + Container( + height: 5, + decoration: _radiusBoxDecoration(animation: _animation)) + ], + )) + ] + ) + ); + } +} \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/email_content_item_builder.dart b/lib/features/email/presentation/widgets/email_content_item_builder.dart new file mode 100644 index 000000000..fae42c14d --- /dev/null +++ b/lib/features/email/presentation/widgets/email_content_item_builder.dart @@ -0,0 +1,51 @@ + +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:model/model.dart'; + +class EmailContentItemBuilder { + + final BuildContext _context; + final EmailContent _emailContent; + final Widget? loadingWidget; + + EmailContentItemBuilder( + this._context, + this._emailContent, + { + this.loadingWidget + } + ); + + Widget build() { + return Theme( + data: ThemeData( + splashColor: Colors.transparent, + highlightColor: Colors.transparent), + child: MediaQuery( + data: MediaQueryData(padding: EdgeInsets.zero), + child: _buildItem() + ) + ); + } + + Widget _buildItem() { + switch(_emailContent.type) { + case EmailContentType.textHtml: + return HtmlContentViewer( + widthContent: MediaQuery.of(_context).size.width, + contentHtml: _emailContent.content, + loadingWidget: loadingWidget, + mailtoDelegate: (uri) async {}); + case EmailContentType.textPlain: + return Padding( + padding: EdgeInsets.zero, + child: Text( + _emailContent.content, + style: TextStyle(fontSize: 14, color: AppColor.nameUserColor))); + case EmailContentType.other: + return SizedBox.shrink(); + } + } +} \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart b/lib/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart index a4d6e1158..0de0292cd 100644 --- a/lib/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart +++ b/lib/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart @@ -41,7 +41,7 @@ class EmailContentPlaceHolderLoading extends StatefulWidget { }) : super(key: key); @override - _EmailContentPlaceHolderLoadingState createState() => _EmailContentPlaceHolderLoadingState(); + State createState() => _EmailContentPlaceHolderLoadingState(); } class _EmailContentPlaceHolderLoadingState extends State with SingleTickerProviderStateMixin { @@ -68,25 +68,11 @@ class _EmailContentPlaceHolderLoadingState extends State