eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-2116 Apply new design attachment in web composer

Browse Source 
(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
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/composer/presentation/base_composer_view.dart
+8 -8
View File
@@ -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/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/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/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/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/extensions/list_upload_file_state_extension.dart';
import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_state.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, scrollDirection: Axis.horizontal,
controller: controller.scrollControllerAttachment, controller: controller.scrollControllerAttachment,
itemCount: uploadFilesState.length, itemCount: uploadFilesState.length,
itemBuilder: (context, index) => AttachmentFileComposerBuilder( itemBuilder: (context, index) => AttachmentItemComposerWidget(
uploadFilesState[index], fileState: uploadFilesState[index],
itemMargin: const EdgeInsetsDirectional.only(end: 8), itemMargin: const EdgeInsetsDirectional.only(end: 8),
maxWidth: ComposerStyle.getMaxWidthItemListAttachment(context, constraints), 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), crossAxisCount: ComposerStyle.getMaxItemRowListAttachment(context, constraints),
crossAxisSpacing: 8.0, crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0), mainAxisSpacing: 8.0),
itemBuilder: (context, index) => AttachmentFileComposerBuilder( itemBuilder: (context, index) => AttachmentItemComposerWidget(
uploadFilesState[index], fileState: uploadFilesState[index],
onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId) onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId)
) )
); );
@@ -366,8 +366,8 @@ abstract class BaseComposerView extends GetWidget<ComposerController>
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
itemCount: uploadFilesState.length, itemCount: uploadFilesState.length,
itemBuilder: (context, index) => AttachmentFileComposerBuilder( itemBuilder: (context, index) => AttachmentItemComposerWidget(
uploadFilesState[index], fileState: uploadFilesState[index],
itemMargin: const EdgeInsetsDirectional.only(end: 8), itemMargin: const EdgeInsetsDirectional.only(end: 8),
maxWidth: ComposerStyle.getMaxWidthItemListAttachment(context, constraints), maxWidth: ComposerStyle.getMaxWidthItemListAttachment(context, constraints),
onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId) onDeleteAttachmentAction: (attachment) => controller.deleteAttachmentUploaded(attachment.uploadTaskId)
lib/features/composer/presentation/composer_controller.dart
+2
View File
@@ -162,6 +162,8 @@ class ComposerController extends BaseController {
String? _initTextEditor; String? _initTextEditor;
double? maxWithEditor; double? maxWithEditor;
EmailId? _emailIdEditing; EmailId? _emailIdEditing;
bool isAttachmentCollapsed = false;
late Worker uploadInlineImageWorker; late Worker uploadInlineImageWorker;
late Worker dashboardViewStateWorker; late Worker dashboardViewStateWorker;
lib/features/composer/presentation/composer_view_web.dart
+112 -113
View File
@@ -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:core/presentation/views/responsive/responsive_widget.dart';
import 'package:file_picker/file_picker.dart'; import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:model/email/prefix_email_address.dart'; import 'package:model/email/prefix_email_address.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart'; import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
import 'package:tmail_ui_user/features/composer/presentation/base_composer_view.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/prefix_recipient_state.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/styles/composer_style.dart';
import 'package:tmail_ui_user/features/composer/presentation/view/desktop_container_view.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/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/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/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/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/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/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/subject_composer_widget.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/toolbar_rich_text_builder.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); ComposerView({Key? key}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ResponsiveWidget( return ResponsiveWidget(
responsiveUtils: responsiveUtils, responsiveUtils: _responsiveUtils,
mobile: MobileContainerView( mobile: MobileContainerView(
childBuilder: (context, constraints) { childBuilder: (context, constraints) {
return Column( return Column(
@@ -49,7 +50,7 @@ class ComposerView extends BaseComposerView {
maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget( maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget(
context, context,
constraints, constraints,
responsiveUtils _responsiveUtils
) )
), ),
child: SingleChildScrollView( child: SingleChildScrollView(
@@ -139,34 +140,45 @@ class ComposerView extends BaseComposerView {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: Column(
children: [ children: [
Obx(() => Padding( Obx(() => Expanded(
padding: ComposerStyle.mobileEditorPadding, child: Padding(
child: WebEditorView( padding: ComposerStyle.mobileEditorPadding,
editorController: controller.richTextWebController.editorController, child: WebEditorView(
arguments: controller.composerArguments.value, editorController: controller.richTextWebController.editorController,
contentViewState: controller.emailContentsViewState.value, arguments: controller.composerArguments.value,
currentWebContent: controller.textEditorWeb, contentViewState: controller.emailContentsViewState.value,
onInitial: controller.handleInitHtmlEditorWeb, currentWebContent: controller.textEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb, onInitial: controller.handleInitHtmlEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onUnFocus: controller.handleOnUnFocusHtmlEditorWeb,
onEditorSettings: controller.richTextWebController.onEditorSettingsChange, 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(() { Obx(() {
if (controller.richTextWebController.isFormattingOptionsEnabled) { if (controller.richTextWebController.isFormattingOptionsEnabled) {
return Align( return ToolbarRichTextWebBuilder(
alignment: AlignmentDirectional.bottomCenter, richTextWebController: controller.richTextWebController,
child: ToolbarRichTextWebBuilder( padding: ComposerStyle.richToolbarPadding,
richTextWebController: controller.richTextWebController, decoration: const BoxDecoration(
padding: ComposerStyle.richToolbarPadding, color: ComposerStyle.richToolbarColor,
decoration: const BoxDecoration( boxShadow: ComposerStyle.richToolbarShadow
color: ComposerStyle.richToolbarColor,
boxShadow: ComposerStyle.richToolbarShadow
),
), ),
); );
} else { } else {
@@ -196,7 +208,7 @@ class ComposerView extends BaseComposerView {
maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget( maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget(
context, context,
constraints, constraints,
responsiveUtils _responsiveUtils
) )
), ),
child: SingleChildScrollView( child: SingleChildScrollView(
@@ -286,34 +298,45 @@ class ComposerView extends BaseComposerView {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: Column(
children: [ children: [
Obx(() => Padding( Obx(() => Expanded(
padding: ComposerStyle.desktopEditorPadding, child: Padding(
child: WebEditorView( padding: ComposerStyle.desktopEditorPadding,
editorController: controller.richTextWebController.editorController, child: WebEditorView(
arguments: controller.composerArguments.value, editorController: controller.richTextWebController.editorController,
contentViewState: controller.emailContentsViewState.value, arguments: controller.composerArguments.value,
currentWebContent: controller.textEditorWeb, contentViewState: controller.emailContentsViewState.value,
onInitial: controller.handleInitHtmlEditorWeb, currentWebContent: controller.textEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb, onInitial: controller.handleInitHtmlEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onUnFocus: controller.handleOnUnFocusHtmlEditorWeb,
onEditorSettings: controller.richTextWebController.onEditorSettingsChange, 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(() { Obx(() {
if (controller.richTextWebController.isFormattingOptionsEnabled) { if (controller.richTextWebController.isFormattingOptionsEnabled) {
return Align( return ToolbarRichTextWebBuilder(
alignment: AlignmentDirectional.bottomCenter, richTextWebController: controller.richTextWebController,
child: ToolbarRichTextWebBuilder( padding: ComposerStyle.richToolbarPadding,
richTextWebController: controller.richTextWebController, decoration: const BoxDecoration(
padding: ComposerStyle.richToolbarPadding, color: ComposerStyle.richToolbarColor,
decoration: const BoxDecoration( boxShadow: ComposerStyle.richToolbarShadow
color: ComposerStyle.richToolbarColor,
boxShadow: ComposerStyle.richToolbarShadow
),
), ),
); );
} else { } else {
@@ -355,7 +378,7 @@ class ComposerView extends BaseComposerView {
maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget( maxHeight: ComposerStyle.getMaxHeightEmailAddressWidget(
context, context,
constraints, constraints,
responsiveUtils _responsiveUtils
) )
), ),
child: SingleChildScrollView( child: SingleChildScrollView(
@@ -445,34 +468,45 @@ class ComposerView extends BaseComposerView {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: Column(
children: [ children: [
Obx(() => Padding( Obx(() => Expanded(
padding: ComposerStyle.tabletEditorPadding, child: Padding(
child: WebEditorView( padding: ComposerStyle.tabletEditorPadding,
editorController: controller.richTextWebController.editorController, child: WebEditorView(
arguments: controller.composerArguments.value, editorController: controller.richTextWebController.editorController,
contentViewState: controller.emailContentsViewState.value, arguments: controller.composerArguments.value,
currentWebContent: controller.textEditorWeb, contentViewState: controller.emailContentsViewState.value,
onInitial: controller.handleInitHtmlEditorWeb, currentWebContent: controller.textEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb, onInitial: controller.handleInitHtmlEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onUnFocus: controller.handleOnUnFocusHtmlEditorWeb,
onEditorSettings: controller.richTextWebController.onEditorSettingsChange, 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(() { Obx(() {
if (controller.richTextWebController.isFormattingOptionsEnabled) { if (controller.richTextWebController.isFormattingOptionsEnabled) {
return Align( return ToolbarRichTextWebBuilder(
alignment: AlignmentDirectional.bottomCenter, richTextWebController: controller.richTextWebController,
child: ToolbarRichTextWebBuilder( padding: ComposerStyle.richToolbarPadding,
richTextWebController: controller.richTextWebController, decoration: const BoxDecoration(
padding: ComposerStyle.richToolbarPadding, color: ComposerStyle.richToolbarColor,
decoration: const BoxDecoration( boxShadow: ComposerStyle.richToolbarShadow
color: ComposerStyle.richToolbarColor,
boxShadow: ComposerStyle.richToolbarShadow
),
), ),
); );
} else { } 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();
},
)
];
}
} }
lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart
+1
View File
@@ -11,6 +11,7 @@ class BottomBarComposerWidgetStyle {
static const double sendButtonRadius = 8; static const double sendButtonRadius = 8;
static const double sendButtonIconSpace = 5; static const double sendButtonIconSpace = 5;
static const Color backgroundColor = Colors.white;
static const Color iconColor = AppColor.colorRichButtonComposer; static const Color iconColor = AppColor.colorRichButtonComposer;
static const Color sendButtonBackgroundColor = AppColor.primaryColor; static const Color sendButtonBackgroundColor = AppColor.primaryColor;
static const Color selectedBackgroundColor = AppColor.colorSelected; static const Color selectedBackgroundColor = AppColor.colorSelected;
lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart
+1
View File
@@ -36,6 +36,7 @@ class BottomBarComposerWidget extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
padding: BottomBarComposerWidgetStyle.padding, padding: BottomBarComposerWidgetStyle.padding,
color: BottomBarComposerWidgetStyle.backgroundColor,
child: Row( child: Row(
children: [ children: [
TMailButtonWidget.fromIcon( TMailButtonWidget.fromIcon(