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

TF-61 Implement rich text on web

Browse Source
This commit is contained in:
dab246
2022-07-18 13:46:51 +07:00
committed by Dat H. Pham
parent eecac6c46d
commit 79e165443e
9 changed files with 131 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/ic_style_bold.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.83423 21H14.9349C15.9335 21 16.7983 20.8352 17.5293 20.5056C18.2603 20.176 18.8249 19.7126 19.223 19.1154C19.6212 18.5182 19.8202 17.8149 19.8202 17.0056C19.8202 16.366 19.6783 15.7981 19.3944 15.3021C19.1105 14.8061 18.7156 14.4079 18.2098 14.1077C17.7039 13.8075 17.1181 13.641 16.4524 13.6084V13.5301C16.9941 13.4517 17.4706 13.2739 17.8818 12.9965C18.293 12.7191 18.6128 12.3667 18.8412 11.9392C19.0697 11.5117 19.1839 11.0401 19.1839 10.5245C19.1839 9.8 19.006 9.17343 18.6503 8.64476C18.2946 8.11608 17.7904 7.70979 17.1377 7.42587C16.485 7.14196 15.7051 7 14.7979 7H9.83423C9.31209 7 8.90579 7.14685 8.61535 7.44056C8.32491 7.73427 8.17969 8.15198 8.17969 8.69371V19.3161C8.17969 19.8513 8.32491 20.2657 8.61535 20.5594C8.90579 20.8531 9.31209 21 9.83423 21ZM11.4105 18.7385V14.8517H13.8678C14.7293 14.8517 15.3902 15.0149 15.8503 15.3413C16.3105 15.6676 16.5405 16.1441 16.5405 16.7706C16.5405 17.4103 16.317 17.8981 15.8699 18.2343C15.4228 18.5704 14.7783 18.7385 13.9363 18.7385H11.4105ZM11.4105 12.8154V9.3007H13.8188C14.5042 9.3007 15.0394 9.45082 15.4244 9.75105C15.8095 10.0513 16.0021 10.469 16.0021 11.0042C16.0021 11.572 15.7883 12.0159 15.3608 12.3357C14.9333 12.6555 14.3377 12.8154 13.5741 12.8154H11.4105Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

assets/images/ic_style_italic.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.77678 21H15.9592C16.243 21 16.4736 20.921 16.651 20.763C16.8284 20.6049 16.9171 20.3872 16.9171 20.1099C16.9171 19.839 16.83 19.6261 16.6558 19.4713C16.4817 19.3165 16.2527 19.2391 15.9689 19.2391H13.9855L16.2398 8.76088H18.2232C18.5006 8.76088 18.7279 8.68187 18.9053 8.52384C19.0827 8.36581 19.1714 8.14812 19.1714 7.87077C19.1714 7.59986 19.0843 7.38701 18.9102 7.2322C18.736 7.0774 18.5103 7 18.2329 7H12.0214C11.7441 7 11.5183 7.0774 11.3442 7.2322C11.17 7.38701 11.0829 7.59986 11.0829 7.87077C11.0829 8.14812 11.1716 8.36581 11.349 8.52384C11.5264 8.68187 11.7537 8.76088 12.0311 8.76088H14.0145L11.7602 19.2391H9.76711C9.48975 19.2391 9.264 19.3165 9.08984 19.4713C8.91569 19.6261 8.82861 19.839 8.82861 20.1099C8.82861 20.3872 8.9173 20.6049 9.09468 20.763C9.27206 20.921 9.49943 21 9.77678 21Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 937 B

assets/images/ic_style_underline.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 18.5498C14.9451 18.5498 15.7657 18.3764 16.4617 18.0297C17.1577 17.683 17.6932 17.1989 18.0682 16.5773C18.4432 15.9558 18.6307 15.2341 18.6307 14.4122V7.87837C18.6307 7.60613 18.5498 7.39167 18.388 7.235C18.2262 7.07833 18.0066 7 17.7292 7C17.4621 7 17.2489 7.07833 17.0897 7.235C16.9304 7.39167 16.8508 7.60613 16.8508 7.87837V14.2504C16.8508 15.0723 16.6004 15.7323 16.0996 16.2306C15.5988 16.7289 14.8989 16.978 14 16.978C13.399 16.978 12.8853 16.865 12.459 16.639C12.0326 16.413 11.7077 16.0958 11.4843 15.6874C11.2608 15.279 11.1491 14.8 11.1491 14.2504V7.87837C11.1491 7.60613 11.0682 7.39167 10.9064 7.235C10.7446 7.07833 10.525 7 10.2476 7C9.98053 7 9.76735 7.07833 9.60812 7.235C9.44888 7.39167 9.36926 7.60613 9.36926 7.87837V14.4122C9.36926 15.2341 9.55804 15.9558 9.93558 16.5773C10.3131 17.1989 10.8473 17.683 11.5382 18.0297C12.2291 18.3764 13.0497 18.5498 14 18.5498ZM9.91632 21H18.0759C18.2352 21 18.3674 20.9486 18.4727 20.8459C18.578 20.7432 18.6307 20.6147 18.6307 20.4606C18.6307 20.3065 18.578 20.1781 18.4727 20.0754C18.3674 19.9727 18.2352 19.9213 18.0759 19.9213H9.91632C9.76222 19.9213 9.63252 19.9727 9.52722 20.0754C9.42191 20.1781 9.36926 20.3065 9.36926 20.4606C9.36926 20.6147 9.42191 20.7432 9.52722 20.8459C9.63252 20.9486 9.76222 21 9.91632 21Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

core/lib/presentation/resources/image_paths.dart
+3
View File
@@ -128,6 +128,9 @@ class ImagePaths {
String get icCloseAdvancedSearch => _getImagePath('ic_close_advanced_search.svg');
String get icLanguage => _getImagePath('ic_language.svg');
String get icChecked => _getImagePath('ic_checked.svg');
String get icStyleBold => _getImagePath('ic_style_bold.svg');
String get icStyleItalic => _getImagePath('ic_style_italic.svg');
String get icStyleUnderline => _getImagePath('ic_style_underline.svg');
String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
core/lib/presentation/views/button/icon_button_web.dart
+6 -2
View File
@@ -13,12 +13,16 @@ Widget buildIconWeb({
double? iconSize,
double? splashRadius,
double? minSize,
Color? colorSelected,
Color? colorFocus,
ShapeBorder? shapeBorder,
}) {
return Material(
color: Colors.transparent,
shape: CircleBorder(),
color: colorSelected ?? Colors.transparent,
shape: shapeBorder ?? CircleBorder(),
child: IconButton(
icon: icon,
focusColor: colorFocus,
iconSize: iconSize,
constraints: minSize != null ? BoxConstraints(minWidth: minSize, minHeight: minSize) : null,
padding: iconPadding ?? EdgeInsets.all(8.0),
lib/features/composer/presentation/composer_bindings.dart
+4
View File
@@ -19,6 +19,7 @@ import 'package:tmail_ui_user/features/composer/domain/usecases/upload_attachmen
import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete_interactor.dart';
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/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(() => UploadController(Get.find<UploadAttachmentInteractor>()));
Get.lazyPut(() => RichTextWebController());
Get.lazyPut(() => ComposerController(
Get.find<SendEmailInteractor>(),
Get.find<GetAutoCompleteInteractor>(),
@@ -148,11 +150,13 @@ class ComposerBindings extends BaseBindings {
Get.find<UploadController>(),
Get.find<RemoveComposerCacheOnWebInteractor>(),
Get.find<SaveComposerCacheOnWebInteractor>(),
Get.find<RichTextWebController>(),
));
}
void dispose() {
Get.delete<UploadController>();
Get.delete<RichTextWebController>();
Get.delete<ComposerController>();
}
}
lib/features/composer/presentation/composer_controller.dart
+9 -8
View File
@@ -12,7 +12,6 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:html_editor_enhanced/html_editor.dart' as editor_web;
import 'package:http_parser/http_parser.dart';
import 'package:jmap_dart_client/jmap/core/id.dart';
import 'package:jmap_dart_client/jmap/identities/identity.dart';
@@ -34,6 +33,7 @@ import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete
import 'package:tmail_ui_user/features/composer/domain/usecases/save_email_as_drafts_interactor.dart';
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/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';
@@ -87,13 +87,13 @@ class ComposerController extends BaseController {
final UploadController uploadController;
final RemoveComposerCacheOnWebInteractor _removeComposerCacheOnWebInteractor;
final SaveComposerCacheOnWebInteractor _saveComposerCacheOnWebInteractor;
final RichTextWebController richTextWebController;
List<EmailAddress> listToEmailAddress = <EmailAddress>[];
List<EmailAddress> listCcEmailAddress = <EmailAddress>[];
List<EmailAddress> listBccEmailAddress = <EmailAddress>[];
ContactSuggestionSource _contactSuggestionSource = ContactSuggestionSource.tMailContact;
HtmlEditorApi? htmlEditorApi;
final htmlControllerBrowser = editor_web.HtmlEditorController(processNewLineAsBr: true);
final subjectEmailInputController = TextEditingController();
final toEmailAddressController = TextEditingController();
@@ -119,7 +119,7 @@ class ComposerController extends BaseController {
screenDisplayMode.value == ScreenDisplayMode.minimize) {
contentHtml = textEditorWeb ?? '';
} else {
contentHtml = await htmlControllerBrowser.getText();
contentHtml = await richTextWebController.editorController.getText();
}
log('ComposerController::_getEmailBodyText():WEB: contentHtml: $contentHtml');
final newContentHtml = contentHtml.removeEditorStartTag();
@@ -155,6 +155,7 @@ class ComposerController extends BaseController {
this.uploadController,
this._removeComposerCacheOnWebInteractor,
this._saveComposerCacheOnWebInteractor,
this.richTextWebController,
);
@override
@@ -318,7 +319,7 @@ class ComposerController extends BaseController {
}
void setFullScreenEditor() {
htmlControllerBrowser.setFullScreen();
richTextWebController.editorController.setFullScreen();
}
String? _getHeaderEmailQuoted(BuildContext context, ComposerArguments arguments) {
@@ -872,8 +873,8 @@ class ComposerController extends BaseController {
}
void _updateTextForEditor() async {
final textCurrent = await htmlControllerBrowser.getText();
htmlControllerBrowser.setText(textCurrent);
final textCurrent = await richTextWebController.editorController.getText();
richTextWebController.editorController.setText(textCurrent);
}
void deleteComposer() {
@@ -1036,7 +1037,7 @@ class ComposerController extends BaseController {
final signatureAsHtml = '--<br><br>${signature.value}';
log('ComposerController::_applySignature(): $signatureAsHtml');
if (BuildUtils.isWeb) {
htmlControllerBrowser.insertSignature(signatureAsHtml);
richTextWebController.editorController.insertSignature(signatureAsHtml);
} else {
htmlEditorApi?.insertSignature(signatureAsHtml);
}
@@ -1045,7 +1046,7 @@ class ComposerController extends BaseController {
void _removeSignature() {
log('ComposerController::_removeSignature():');
if (BuildUtils.isWeb) {
htmlControllerBrowser.removeSignature();
richTextWebController.editorController.removeSignature();
} else {
htmlEditorApi?.removeSignature();
}
lib/features/composer/presentation/composer_view_web.dart
+73 -40
View File
@@ -6,13 +6,15 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:html_editor_enhanced/html_editor.dart' as editor_web;
import 'package:html_editor_enhanced/html_editor.dart';
import 'package:jmap_dart_client/jmap/identities/identity.dart';
import 'package:model/model.dart';
import 'package:pointer_interceptor/pointer_interceptor.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/model/screen_display_mode.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';
@@ -21,7 +23,8 @@ 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<ComposerController> with AppLoaderMixin {
class ComposerView extends GetWidget<ComposerController>
with AppLoaderMixin, RichTextButtonMixin {
final responsiveUtils = Get.find<ResponsiveUtils>();
final imagePaths = Get.find<ImagePaths>();
@@ -58,6 +61,7 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
Expanded(child: Column(
children: [
_buildAttachmentsWidget(context),
_buildToolbarRichTextWidget(),
_buildEditorForm(context)
]
)),
@@ -162,11 +166,15 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
return Row(
children: [
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icCloseMailbox, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).saveAndClose,
onTap: () => controller.saveEmailAsDrafts(context)),
if (responsiveUtils.isDesktop(context))
Obx(() => buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(
controller.screenDisplayMode.value == ScreenDisplayMode.fullScreen
? imagePaths.icFullScreenExit
@@ -178,6 +186,8 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
: ScreenDisplayMode.fullScreen))),
if (responsiveUtils.isDesktop(context))
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icMinimize, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).minimize,
onTap: () => controller.displayScreenTypeComposerAction(ScreenDisplayMode.minimize)),
@@ -284,6 +294,7 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
child: Column(
children: [
_buildAttachmentsWidget(context),
_buildToolbarRichTextWidget(),
_buildEditorForm(context)
]
))),
@@ -474,12 +485,18 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
Widget _buildListButton(BuildContext context) {
return Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Row(children: [
buildIconWeb(
icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icAttachmentsComposer,
width: 24,
height: 24,
color: AppColor.colorTextButton,
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).attach_file,
onTap: () => controller.openFilePickerByType(context, FileType.any)),
])
@@ -546,46 +563,48 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
Widget _buildHtmlEditor(BuildContext context, String initContent) {
log('ComposerView::_buildHtmlEditor(): initContent: $initContent');
return Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: responsiveUtils.isMobile(context) ? 8 : 10),
child: editor_web.HtmlEditor(
key: const Key('composer_editor_web'),
controller: controller.htmlControllerBrowser,
htmlEditorOptions: const editor_web.HtmlEditorOptions(
hint: '',
darkMode: false,
),
blockQuotedContent: initContent,
htmlToolbarOptions: const editor_web.HtmlToolbarOptions(
toolbarPosition: editor_web.ToolbarPosition.custom),
otherOptions: const editor_web.OtherOptions(height: 550),
callbacks: editor_web.Callbacks(
onBeforeCommand: (String? currentHtml) {
log('ComposerView::_buildComposerEditor(): onBeforeCommand : $currentHtml');
controller.setTextEditorWeb(currentHtml);
}, onChangeContent: (String? changed) {
log('ComposerView::_buildComposerEditor(): onChangeContent : $changed');
controller.setTextEditorWeb(changed);
}, onInit: () {
log('ComposerView::_buildComposerEditor(): onInit');
controller.setTextEditorWeb(initContent);
controller.setFullScreenEditor();
}, onFocus: () {
FocusManager.instance.primaryFocus?.unfocus();
Future.delayed(const Duration(milliseconds: 500), () {
controller.htmlControllerBrowser.setFocus();
});
}, onBlur: () {
controller.onEditorFocusChange(false);
}, onMouseDown: () {
controller.onEditorFocusChange(true);
}),
)
padding: EdgeInsets.symmetric(
horizontal: responsiveUtils.isMobile(context) ? 8 : 10),
child: HtmlEditor(
key: const Key('composer_editor_web'),
controller: controller.richTextWebController.editorController,
htmlEditorOptions: const HtmlEditorOptions(
hint: '',
darkMode: false,
),
blockQuotedContent: initContent,
htmlToolbarOptions: const HtmlToolbarOptions(
toolbarType: ToolbarType.hide,
defaultToolbarButtons: []),
otherOptions: const OtherOptions(height: 550),
callbacks: Callbacks(onBeforeCommand: (String? currentHtml) {
log('ComposerView::_buildHtmlEditor(): onBeforeCommand : $currentHtml');
controller.setTextEditorWeb(currentHtml);
}, onChangeContent: (String? changed) {
log('ComposerView::_buildHtmlEditor(): onChangeContent : $changed');
controller.setTextEditorWeb(changed);
}, onInit: () {
log('ComposerView::_buildHtmlEditor(): onInit');
controller.setTextEditorWeb(initContent);
controller.setFullScreenEditor();
}, onFocus: () {
FocusManager.instance.primaryFocus?.unfocus();
Future.delayed(const Duration(milliseconds: 500), () {
controller.richTextWebController.editorController.setFocus();
});
}, onBlur: () {
controller.onEditorFocusChange(false);
}, onMouseDown: () {
controller.onEditorFocusChange(true);
}, onChangeSelection: (settings) {
controller.richTextWebController.onEditorSettingsChange(settings);
}),
)
)
);
// });
}
Widget _buildAttachmentsWidget(BuildContext context) {
@@ -713,4 +732,18 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin {
return constraints.maxHeight > 0 ? constraints.maxHeight * 0.4 : 150.0;
}
}
Widget _buildToolbarRichTextWidget() {
return Padding(
padding: const EdgeInsets.only(left: 20, top: 4, bottom: 8),
child: Row(
children: RichTextStyleType.values.map((textType) => Obx(() {
return buildIconStyleText(
path: textType.getIcon(imagePaths),
isSelected: controller.richTextWebController.isTextStyleTypeSelected(textType),
onTap: () => controller.richTextWebController.applyRichTextStyle(textType));
})).toList()
),
);
}
}
lib/features/composer/presentation/mixin/rich_text_button_mixin.dart
+27
View File
@@ -0,0 +1,27 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
mixin RichTextButtonMixin {
Widget buildIconStyleText({
required String path,
required bool? isSelected,
required VoidCallback onTap,
}){
return buildIconWeb(
icon: SvgPicture.asset(
path,
color: isSelected == true
? Colors.black
: AppColor.colorDividerMailbox,
fit: BoxFit.fill),
iconPadding: const EdgeInsets.all(4),
colorFocus: Colors.white,
minSize: 26,
onTap: onTap,
);
}
}