TF-2116 Apply new design attachment in web composer

(cherry picked from commit 0e0773159fc6c1ed4d44f078a184d2b0f315d360)
This commit is contained in:
dab246
2023-09-06 19:14:59 +07:00
committed by Dat H. Pham
parent d3533e2f28
commit 6bd922dcad
5 changed files with 124 additions and 121 deletions
@@ -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<ComposerController>
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<ComposerController>
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<ComposerController>
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)
@@ -162,6 +162,8 @@ class ComposerController extends BaseController {
String? _initTextEditor;
double? maxWithEditor;
EmailId? _emailIdEditing;
bool isAttachmentCollapsed = false;
late Worker uploadInlineImageWorker;
late Worker dashboardViewStateWorker;
@@ -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<ComposerController> {
final _responsiveUtils = Get.find<ResponsiveUtils>();
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<PopupMenuEntry> 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();
},
)
];
}
}
@@ -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;
@@ -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(