From 6bd922dcadbf7b9f98c04c5b79d3baa0247d3573 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 6 Sep 2023 19:14:59 +0700 Subject: [PATCH] TF-2116 Apply new design attachment in web composer (cherry picked from commit 0e0773159fc6c1ed4d44f078a184d2b0f315d360) --- .../presentation/base_composer_view.dart | 16 +- .../presentation/composer_controller.dart | 2 + .../presentation/composer_view_web.dart | 225 +++++++++--------- .../bottom_bar_composer_widget_style.dart | 1 + .../widgets/bottom_bar_composer_widget.dart | 1 + 5 files changed, 124 insertions(+), 121 deletions(-) diff --git a/lib/features/composer/presentation/base_composer_view.dart b/lib/features/composer/presentation/base_composer_view.dart index ed4d9b940..af0c21344 100644 --- a/lib/features/composer/presentation/base_composer_view.dart +++ b/lib/features/composer/presentation/base_composer_view.dart @@ -27,7 +27,7 @@ import 'package:tmail_ui_user/features/composer/presentation/mixin/composer_load import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/prefix_recipient_state.dart'; import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; -import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_file_composer_builder.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_item_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_composer_widget.dart'; import 'package:tmail_ui_user/features/upload/presentation/extensions/list_upload_file_state_extension.dart'; import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_state.dart'; @@ -321,11 +321,11 @@ abstract class BaseComposerView extends GetWidget scrollDirection: Axis.horizontal, controller: controller.scrollControllerAttachment, itemCount: uploadFilesState.length, - itemBuilder: (context, index) => AttachmentFileComposerBuilder( - uploadFilesState[index], + itemBuilder: (context, index) => AttachmentItemComposerWidget( + fileState: uploadFilesState[index], itemMargin: const EdgeInsetsDirectional.only(end: 8), maxWidth: ComposerStyle.getMaxWidthItemListAttachment(context, constraints), - onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId) + onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId), ) ), ) @@ -344,8 +344,8 @@ abstract class BaseComposerView extends GetWidget crossAxisCount: ComposerStyle.getMaxItemRowListAttachment(context, constraints), crossAxisSpacing: 8.0, mainAxisSpacing: 8.0), - itemBuilder: (context, index) => AttachmentFileComposerBuilder( - uploadFilesState[index], + itemBuilder: (context, index) => AttachmentItemComposerWidget( + fileState: uploadFilesState[index], onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId) ) ); @@ -366,8 +366,8 @@ abstract class BaseComposerView extends GetWidget physics: const ClampingScrollPhysics(), scrollDirection: Axis.horizontal, itemCount: uploadFilesState.length, - itemBuilder: (context, index) => AttachmentFileComposerBuilder( - uploadFilesState[index], + itemBuilder: (context, index) => AttachmentItemComposerWidget( + fileState: uploadFilesState[index], itemMargin: const EdgeInsetsDirectional.only(end: 8), maxWidth: ComposerStyle.getMaxWidthItemListAttachment(context, constraints), onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId) diff --git a/lib/features/composer/presentation/composer_controller.dart b/lib/features/composer/presentation/composer_controller.dart index 5bd9a678a..9cc0c421f 100644 --- a/lib/features/composer/presentation/composer_controller.dart +++ b/lib/features/composer/presentation/composer_controller.dart @@ -162,6 +162,8 @@ class ComposerController extends BaseController { String? _initTextEditor; double? maxWithEditor; EmailId? _emailIdEditing; + bool isAttachmentCollapsed = false; + late Worker uploadInlineImageWorker; late Worker dashboardViewStateWorker; diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index 40701eeda..4ac79b6ab 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -1,11 +1,10 @@ -import 'package:core/presentation/views/button/icon_button_web.dart'; +import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:core/presentation/views/responsive/responsive_widget.dart'; import 'package:file_picker/file_picker.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:model/email/prefix_email_address.dart'; -import 'package:pointer_interceptor/pointer_interceptor.dart'; -import 'package:tmail_ui_user/features/composer/presentation/base_composer_view.dart'; +import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/prefix_recipient_state.dart'; import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart'; import 'package:tmail_ui_user/features/composer/presentation/view/desktop_container_view.dart'; @@ -13,21 +12,23 @@ import 'package:tmail_ui_user/features/composer/presentation/view/mobile_contain import 'package:tmail_ui_user/features/composer/presentation/view/tablet_container_view.dart'; import 'package:tmail_ui_user/features/composer/presentation/view/web_editor_view.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/app_bar_composer_widget.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/bottom_bar_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile_app_bar_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/subject_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/toolbar_rich_text_builder.dart'; -import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; -class ComposerView extends BaseComposerView { +class ComposerView extends GetWidget { + + final _responsiveUtils = Get.find(); ComposerView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ResponsiveWidget( - responsiveUtils: responsiveUtils, + responsiveUtils: _responsiveUtils, mobile: MobileContainerView( childBuilder: (context, constraints) { return Column( @@ -49,7 +50,7 @@ class ComposerView extends BaseComposerView { maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget( context, constraints, - responsiveUtils + _responsiveUtils ) ), child: SingleChildScrollView( @@ -139,34 +140,45 @@ class ComposerView extends BaseComposerView { ), color: ComposerStyle.backgroundEditorColor ), - child: Stack( + child: Column( children: [ - Obx(() => Padding( - padding: ComposerStyle.mobileEditorPadding, - child: WebEditorView( - editorController: controller.richTextWebController.editorController, - arguments: controller.composerArguments.value, - contentViewState: controller.emailContentsViewState.value, - currentWebContent: controller.textEditorWeb, - onInitial: controller.handleInitHtmlEditorWeb, - onChangeContent: controller.onChangeTextEditorWeb, - onFocus: controller.handleOnFocusHtmlEditorWeb, - onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, - onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, - onEditorSettings: controller.richTextWebController.onEditorSettingsChange, + Obx(() => Expanded( + child: Padding( + padding: ComposerStyle.mobileEditorPadding, + child: WebEditorView( + editorController: controller.richTextWebController.editorController, + arguments: controller.composerArguments.value, + contentViewState: controller.emailContentsViewState.value, + currentWebContent: controller.textEditorWeb, + onInitial: controller.handleInitHtmlEditorWeb, + onChangeContent: controller.onChangeTextEditorWeb, + onFocus: controller.handleOnFocusHtmlEditorWeb, + onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, + onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, + onEditorSettings: controller.richTextWebController.onEditorSettingsChange, + ), ), )), + Obx(() { + if (controller.uploadController.listUploadAttachments.isNotEmpty) { + return AttachmentComposerWidget( + listFileUploaded: controller.uploadController.listUploadAttachments, + isCollapsed: controller.isAttachmentCollapsed, + onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId), + onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, + ); + } else { + return const SizedBox.shrink(); + } + }), Obx(() { if (controller.richTextWebController.isFormattingOptionsEnabled) { - return Align( - alignment: AlignmentDirectional.bottomCenter, - child: ToolbarRichTextWebBuilder( - richTextWebController: controller.richTextWebController, - padding: ComposerStyle.richToolbarPadding, - decoration: const BoxDecoration( - color: ComposerStyle.richToolbarColor, - boxShadow: ComposerStyle.richToolbarShadow - ), + return ToolbarRichTextWebBuilder( + richTextWebController: controller.richTextWebController, + padding: ComposerStyle.richToolbarPadding, + decoration: const BoxDecoration( + color: ComposerStyle.richToolbarColor, + boxShadow: ComposerStyle.richToolbarShadow ), ); } else { @@ -196,7 +208,7 @@ class ComposerView extends BaseComposerView { maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget( context, constraints, - responsiveUtils + _responsiveUtils ) ), child: SingleChildScrollView( @@ -286,34 +298,45 @@ class ComposerView extends BaseComposerView { ), color: ComposerStyle.backgroundEditorColor ), - child: Stack( + child: Column( children: [ - Obx(() => Padding( - padding: ComposerStyle.desktopEditorPadding, - child: WebEditorView( - editorController: controller.richTextWebController.editorController, - arguments: controller.composerArguments.value, - contentViewState: controller.emailContentsViewState.value, - currentWebContent: controller.textEditorWeb, - onInitial: controller.handleInitHtmlEditorWeb, - onChangeContent: controller.onChangeTextEditorWeb, - onFocus: controller.handleOnFocusHtmlEditorWeb, - onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, - onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, - onEditorSettings: controller.richTextWebController.onEditorSettingsChange, + Obx(() => Expanded( + child: Padding( + padding: ComposerStyle.desktopEditorPadding, + child: WebEditorView( + editorController: controller.richTextWebController.editorController, + arguments: controller.composerArguments.value, + contentViewState: controller.emailContentsViewState.value, + currentWebContent: controller.textEditorWeb, + onInitial: controller.handleInitHtmlEditorWeb, + onChangeContent: controller.onChangeTextEditorWeb, + onFocus: controller.handleOnFocusHtmlEditorWeb, + onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, + onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, + onEditorSettings: controller.richTextWebController.onEditorSettingsChange, + ), ), )), + Obx(() { + if (controller.uploadController.listUploadAttachments.isNotEmpty) { + return AttachmentComposerWidget( + listFileUploaded: controller.uploadController.listUploadAttachments, + isCollapsed: controller.isAttachmentCollapsed, + onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId), + onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, + ); + } else { + return const SizedBox.shrink(); + } + }), Obx(() { if (controller.richTextWebController.isFormattingOptionsEnabled) { - return Align( - alignment: AlignmentDirectional.bottomCenter, - child: ToolbarRichTextWebBuilder( - richTextWebController: controller.richTextWebController, - padding: ComposerStyle.richToolbarPadding, - decoration: const BoxDecoration( - color: ComposerStyle.richToolbarColor, - boxShadow: ComposerStyle.richToolbarShadow - ), + return ToolbarRichTextWebBuilder( + richTextWebController: controller.richTextWebController, + padding: ComposerStyle.richToolbarPadding, + decoration: const BoxDecoration( + color: ComposerStyle.richToolbarColor, + boxShadow: ComposerStyle.richToolbarShadow ), ); } else { @@ -355,7 +378,7 @@ class ComposerView extends BaseComposerView { maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget( context, constraints, - responsiveUtils + _responsiveUtils ) ), child: SingleChildScrollView( @@ -445,34 +468,45 @@ class ComposerView extends BaseComposerView { ), color: ComposerStyle.backgroundEditorColor ), - child: Stack( + child: Column( children: [ - Obx(() => Padding( - padding: ComposerStyle.tabletEditorPadding, - child: WebEditorView( - editorController: controller.richTextWebController.editorController, - arguments: controller.composerArguments.value, - contentViewState: controller.emailContentsViewState.value, - currentWebContent: controller.textEditorWeb, - onInitial: controller.handleInitHtmlEditorWeb, - onChangeContent: controller.onChangeTextEditorWeb, - onFocus: controller.handleOnFocusHtmlEditorWeb, - onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, - onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, - onEditorSettings: controller.richTextWebController.onEditorSettingsChange, + Obx(() => Expanded( + child: Padding( + padding: ComposerStyle.tabletEditorPadding, + child: WebEditorView( + editorController: controller.richTextWebController.editorController, + arguments: controller.composerArguments.value, + contentViewState: controller.emailContentsViewState.value, + currentWebContent: controller.textEditorWeb, + onInitial: controller.handleInitHtmlEditorWeb, + onChangeContent: controller.onChangeTextEditorWeb, + onFocus: controller.handleOnFocusHtmlEditorWeb, + onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, + onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, + onEditorSettings: controller.richTextWebController.onEditorSettingsChange, + ), ), )), + Obx(() { + if (controller.uploadController.listUploadAttachments.isNotEmpty) { + return AttachmentComposerWidget( + listFileUploaded: controller.uploadController.listUploadAttachments, + isCollapsed: controller.isAttachmentCollapsed, + onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId), + onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, + ); + } else { + return const SizedBox.shrink(); + } + }), Obx(() { if (controller.richTextWebController.isFormattingOptionsEnabled) { - return Align( - alignment: AlignmentDirectional.bottomCenter, - child: ToolbarRichTextWebBuilder( - richTextWebController: controller.richTextWebController, - padding: ComposerStyle.richToolbarPadding, - decoration: const BoxDecoration( - color: ComposerStyle.richToolbarColor, - boxShadow: ComposerStyle.richToolbarShadow - ), + return ToolbarRichTextWebBuilder( + richTextWebController: controller.richTextWebController, + padding: ComposerStyle.richToolbarPadding, + decoration: const BoxDecoration( + color: ComposerStyle.richToolbarColor, + boxShadow: ComposerStyle.richToolbarShadow ), ); } else { @@ -499,39 +533,4 @@ class ComposerView extends BaseComposerView { ) ); } - - @override - List popUpMoreActionMenu(BuildContext context) { - return [ - PopupMenuItem( - padding: const EdgeInsets.symmetric(horizontal: 8), - child: PointerInterceptor( - child: IntrinsicHeight( - child: Row( - children: [ - Obx(() => buildIconWeb( - icon: Icon(controller.hasRequestReadReceipt.value ? Icons.done : null, color: Colors.black))), - Expanded( - child: InkResponse( - child: SizedBox( - width: double.infinity, - height: double.infinity, - child: Center( - child: Text( - AppLocalizations.of(context).requestReadReceipt, - style: const TextStyle(color: Colors.black, fontSize: 15), - ) - ), - ), - ), - ), - ]), - ), - ), - onTap: () { - controller.toggleRequestReadReceipt(); - }, - ) - ]; - } } \ No newline at end of file diff --git a/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart b/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart index bb3401beb..3389db408 100644 --- a/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart +++ b/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart @@ -11,6 +11,7 @@ class BottomBarComposerWidgetStyle { static const double sendButtonRadius = 8; static const double sendButtonIconSpace = 5; + static const Color backgroundColor = Colors.white; static const Color iconColor = AppColor.colorRichButtonComposer; static const Color sendButtonBackgroundColor = AppColor.primaryColor; static const Color selectedBackgroundColor = AppColor.colorSelected; diff --git a/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart b/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart index 61c2a3306..9d8d98a4f 100644 --- a/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart +++ b/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart @@ -36,6 +36,7 @@ class BottomBarComposerWidget extends StatelessWidget { Widget build(BuildContext context) { return Container( padding: BottomBarComposerWidgetStyle.padding, + color: BottomBarComposerWidgetStyle.backgroundColor, child: Row( children: [ TMailButtonWidget.fromIcon(