From a9a85ba62111380f18ed0c060d94eafa7be44578 Mon Sep 17 00:00:00 2001 From: ManhNTX Date: Fri, 15 Jul 2022 16:16:56 +0700 Subject: [PATCH] Compose email with text style for mobile --- .../presentation/composer_bindings.dart | 2 + .../presentation/composer_controller.dart | 5 +- .../composer/presentation/composer_view.dart | 48 ++++++++++++++++++- .../rich_text_mobile_tablet_controller.dart | 37 ++++++++++++++ 4 files changed, 89 insertions(+), 3 deletions(-) create mode 100644 lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart diff --git a/lib/features/composer/presentation/composer_bindings.dart b/lib/features/composer/presentation/composer_bindings.dart index 3686ce093..b6382b5c7 100644 --- a/lib/features/composer/presentation/composer_bindings.dart +++ b/lib/features/composer/presentation/composer_bindings.dart @@ -20,6 +20,7 @@ import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete import 'package:tmail_ui_user/features/composer/domain/usecases/send_email_interactor.dart'; import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart'; +import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/extensions/session_extension.dart'; import 'package:tmail_ui_user/features/email/data/datasource/email_datasource.dart'; import 'package:tmail_ui_user/features/email/data/datasource/html_datasource.dart'; @@ -135,6 +136,7 @@ class ComposerBindings extends BaseBindings { @override void bindingsController() { + Get.lazyPut(() => RichTextMobileTabletController()); Get.lazyPut(() => UploadController(Get.find())); Get.lazyPut(() => RichTextWebController()); Get.lazyPut(() => ComposerController( diff --git a/lib/features/composer/presentation/composer_controller.dart b/lib/features/composer/presentation/composer_controller.dart index de0cebcaf..a78e91068 100644 --- a/lib/features/composer/presentation/composer_controller.dart +++ b/lib/features/composer/presentation/composer_controller.dart @@ -34,6 +34,7 @@ import 'package:tmail_ui_user/features/composer/domain/usecases/save_email_as_dr import 'package:tmail_ui_user/features/composer/domain/usecases/send_email_interactor.dart'; import 'package:tmail_ui_user/features/composer/domain/usecases/update_email_drafts_interactor.dart'; import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart'; +import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/extensions/email_action_type_extension.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart'; import 'package:tmail_ui_user/features/email/domain/state/get_email_content_state.dart'; @@ -56,6 +57,7 @@ import 'package:universal_html/html.dart' as html; class ComposerController extends BaseController { final mailboxDashBoardController = Get.find(); + final richTextMobileTabletController = Get.find(); final _appToast = Get.find(); final _imagePaths = Get.find(); final _responsiveUtils = Get.find(); @@ -93,7 +95,6 @@ class ComposerController extends BaseController { List listCcEmailAddress = []; List listBccEmailAddress = []; ContactSuggestionSource _contactSuggestionSource = ContactSuggestionSource.tMailContact; - HtmlEditorApi? htmlEditorApi; final subjectEmailInputController = TextEditingController(); final toEmailAddressController = TextEditingController(); @@ -108,6 +109,8 @@ class ComposerController extends BaseController { String? get textEditorWeb => _textEditorWeb; + HtmlEditorApi? get htmlEditorApi => richTextMobileTabletController.htmlEditorApi; + void setSubjectEmail(String subject) => subjectEmail.value = subject; Future _getEmailBodyText(BuildContext context, { diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index 281ee6967..58a2b230f 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -13,6 +13,8 @@ import 'package:model/model.dart'; import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/composer/domain/state/upload_attachment_state.dart'; import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart'; +import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_file_composer_builder.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/email_address_input_builder.dart'; import 'package:tmail_ui_user/features/upload/presentation/extensions/list_upload_file_state_extension.dart'; @@ -20,7 +22,7 @@ import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_sta import 'package:tmail_ui_user/features/email/domain/state/get_email_content_state.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; -class ComposerView extends GetWidget with AppLoaderMixin { +class ComposerView extends GetWidget with AppLoaderMixin, RichTextButtonMixin { final responsiveUtils = Get.find(); final imagePaths = Get.find(); @@ -461,6 +463,11 @@ class ComposerView extends GetWidget with AppLoaderMixin { Padding( padding: const EdgeInsets.only(left: 60, right: 25), child: Column(children: [ + Padding( + padding: const EdgeInsets.only(left: 22, top: 15), + child: Obx(() => _buildRowIconStyleText()), + ), + const SizedBox(height: 8), Obx(() { final uploadAttachments = controller.uploadController.listUploadAttachments; if (uploadAttachments.isEmpty) { @@ -490,6 +497,40 @@ class ComposerView extends GetWidget with AppLoaderMixin { ); } + Widget _buildRowIconStyleText() { + return Row( + children: [ + buildIconStyleText( + path: RichTextStyleType.bold.getIcon(imagePaths), + isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.bold), + onTap: () async { + await controller.htmlEditorApi?.formatBold().then((value) { + controller.richTextMobileTabletController.selectTextStyleType(RichTextStyleType.bold); + }); + } + ), + buildIconStyleText( + path: RichTextStyleType.italic.getIcon(imagePaths), + isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.italic), + onTap: () async { + await controller.htmlEditorApi?.formatItalic().then((value) { + controller.richTextMobileTabletController.selectTextStyleType(RichTextStyleType.italic); + }); + } + ), + buildIconStyleText( + path: RichTextStyleType.underline.getIcon(imagePaths), + isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.underline), + onTap: () async { + await controller.htmlEditorApi?.formatUnderline().then((value) { + controller.richTextMobileTabletController.selectTextStyleType(RichTextStyleType.underline); + }); + } + ), + ], + ); + } + Widget _buildComposerEditor(BuildContext context) { return Obx(() { final argsComposer = controller.composerArguments.value; @@ -542,7 +583,10 @@ class ComposerView extends GetWidget with AppLoaderMixin { key: const Key('composer_editor'), minHeight: 550, initialContent: initialContent, - onCreated: (editorApi) => controller.htmlEditorApi = editorApi); + onCreated: (editorApi) { + controller.richTextMobileTabletController.htmlEditorApi = editorApi; + controller.richTextMobileTabletController.listenHtmlEditorApi(); + }); } Widget _buildAttachmentsLoadingView({EdgeInsets? padding, double? size}) { diff --git a/lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart b/lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart new file mode 100644 index 000000000..f604ce051 --- /dev/null +++ b/lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart @@ -0,0 +1,37 @@ +import 'package:enough_html_editor/enough_html_editor.dart'; +import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart'; + +class RichTextMobileTabletController extends GetxController { + HtmlEditorApi? htmlEditorApi; + final listTextStyleApply = RxList(); + + void listenHtmlEditorApi() { + htmlEditorApi?.onFormatSettingsChanged = (formatSettings) { + listTextStyleApply.clear(); + if (formatSettings.isBold) { + listTextStyleApply.add(RichTextStyleType.bold); + } + + if (formatSettings.isItalic) { + listTextStyleApply.add(RichTextStyleType.italic); + } + + if (formatSettings.isUnderline) { + listTextStyleApply.add(RichTextStyleType.underline); + } + }; + } + + selectTextStyleType(RichTextStyleType richTextStyleType) { + if (listTextStyleApply.contains(richTextStyleType)) { + listTextStyleApply.remove(richTextStyleType); + } else { + listTextStyleApply.add(richTextStyleType); + } + } + + bool isTextStyleTypeSelected(RichTextStyleType richTextStyleType) { + return listTextStyleApply.contains(richTextStyleType); + } +}