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

TF-880: Apply rich text toolbar at keyboard

Browse Source
This commit is contained in:
ManhNTX
2022-09-22 06:00:16 +07:00
committed by Dat H. Pham
parent 6ac4952a37
commit 00f781b67f
5 changed files with 211 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+1
View File
@@ -147,6 +147,7 @@ extension AppColor on Color {
static const colorDividerVertical = Color(0xFF99A2AD);
static const colorCloseButton = Color(0xFF818C99);
static const colorDropShadow = Color(0x0F000000);
static const colorBackgroundKeyboard = Color(0xFFD2D5DC);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
lib/features/composer/presentation/composer_controller.dart
+5
View File
@@ -28,6 +28,7 @@ import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
import 'package:model/model.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:receive_sharing_intent/receive_sharing_intent.dart';
import 'package:rich_text_composer/rich_text_composer.dart';
import 'package:tmail_ui_user/features/base/base_controller.dart';
import 'package:tmail_ui_user/features/composer/domain/model/contact_suggestion_source.dart';
import 'package:tmail_ui_user/features/composer/domain/model/email_request.dart';
@@ -113,6 +114,8 @@ class ComposerController extends BaseController {
final ccEmailAddressController = TextEditingController();
final bccEmailAddressController = TextEditingController();
final RichTextController keyboardRichTextController = RichTextController();
List<Attachment> initialAttachments = <Attachment>[];
String? _textEditorWeb;
List<EmailContent>? _emailContents;
@@ -215,6 +218,7 @@ class ComposerController extends BaseController {
ccEmailAddressController.dispose();
bccEmailAddressController.dispose();
uploadInlineImageWorker.dispose();
keyboardRichTextController.dispose();
super.dispose();
}
@@ -1076,6 +1080,7 @@ class ComposerController extends BaseController {
toAddressExpandMode.value = ExpandMode.COLLAPSE;
ccAddressExpandMode.value = ExpandMode.COLLAPSE;
bccAddressExpandMode.value = ExpandMode.COLLAPSE;
htmlEditorApi?.unfocus();
}
}
lib/features/composer/presentation/composer_view.dart
+55 -105
View File
@@ -9,6 +9,8 @@ import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/identities/identity.dart';
import 'package:model/model.dart';
import 'package:rich_text_composer/rich_text_composer.dart' as rich_text_composer;
import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
import 'package:tmail_ui_user/features/base/widget/popup_menu_overlay_widget.dart';
@@ -51,7 +53,8 @@ class ComposerView extends GetWidget<ComposerController>
controller.saveEmailAsDrafts(context, canPop: false);
return true;
},
child: GestureDetector(
child: LayoutBuilder(
builder: (context, constraints) => GestureDetector(
onTap: () {
controller.clearFocusEditor(context);
},
@@ -65,11 +68,12 @@ class ComposerView extends GetWidget<ComposerController>
child: Column(children: [
Obx(() => _buildAppBar(context, controller.isEnableEmailSendButton.value)),
const Divider(color: AppColor.colorDividerComposer, height: 1),
Expanded(child: _buildBodyMobile(context))
Expanded(child: _buildBodyMobile(context, constraints.maxWidth))
])
)
),
),
)
),
)
);
}
@@ -283,7 +287,13 @@ class ComposerView extends GetWidget<ComposerController>
}
Widget _buildEmailAddress(BuildContext context) {
return Column(
return Focus(
onFocusChange: (focus) {
if(focus) {
controller.htmlEditorApi?.unfocus();
}
},
child: Column(
children: [
Obx(() => Padding(
padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
@@ -298,7 +308,8 @@ class ComposerView extends GetWidget<ComposerController>
..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
..addOnAddEmailAddressTypeAction((prefixEmailAddress) => controller.addEmailAddressType(prefixEmailAddress))
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
..addOnSuggestionEmailAddress(controller.getAutoCompleteSuggestion))
..addOnOpenSuggestionBoxEmailAddress(() => controller.getAutoCompleteSuggestion(''))
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
.build()
)),
Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
@@ -318,7 +329,8 @@ class ComposerView extends GetWidget<ComposerController>
..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
..addOnDeleteEmailAddressTypeAction((prefixEmailAddress) => controller.deleteEmailAddressType(prefixEmailAddress))
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
..addOnSuggestionEmailAddress(controller.getAutoCompleteSuggestion))
..addOnOpenSuggestionBoxEmailAddress(() => controller.getAutoCompleteSuggestion(''))
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
.build())
: const SizedBox.shrink()
),
@@ -339,11 +351,13 @@ class ComposerView extends GetWidget<ComposerController>
..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
..addOnDeleteEmailAddressTypeAction((prefixEmailAddress) => controller.deleteEmailAddressType(prefixEmailAddress))
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
..addOnSuggestionEmailAddress(controller.getAutoCompleteSuggestion))
..addOnOpenSuggestionBoxEmailAddress(() => controller.getAutoCompleteSuggestion(''))
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
.build())
: const SizedBox.shrink()
),
],
),
);
}
@@ -373,34 +387,11 @@ class ComposerView extends GetWidget<ComposerController>
);
}
Widget _buildListButton(BuildContext context, BoxConstraints constraints) {
return Transform(
transform: Matrix4.translationValues(-10.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),
tooltip: AppLocalizations.of(context).attach_file,
onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))),
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icInsertImage,
color: AppColor.colorTextButton,
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).insertImage,
onTap: () => controller.insertImage(context, constraints.maxWidth))
])
)
);
}
Widget _buildBodyMobile(BuildContext context) {
return SingleChildScrollView(
Widget _buildBodyMobile(BuildContext context, double maxWidth) {
return rich_text_composer.KeyboardRichText(
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: LayoutBuilder(
builder: (context, constraints) => Column(children: [
child: Column(children: [
Obx(() => controller.identitySelected.value != null
? _buildFromEmailAddress(context)
: const SizedBox.shrink()),
@@ -411,22 +402,30 @@ class ComposerView extends GetWidget<ComposerController>
const Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: _buildSubjectEmail(context)),
const Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: _buildListButton(context, constraints)),
const Divider(color: AppColor.colorDividerComposer, height: 1),
_buildAttachmentsWidget(context),
_buildToolbarMobileWidget(context),
buildInlineLoadingView(controller),
_buildComposerEditor(context),
]),
)
])
),
richTextController: controller.keyboardRichTextController,
backgroundKeyboardToolBarColor: AppColor.colorBackgroundKeyboard,
keyBroadToolbar: RichTextKeyboardToolBar(
isLandScapeMode: responsiveUtils.isLandscapeMobile(context),
insertAttachment: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context)),
insertImage: () => controller.insertImage(context, maxWidth),
richTextController: controller.keyboardRichTextController,
titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
),
);
}
Widget _buildBodyTablet(BuildContext context) {
return SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: LayoutBuilder(
builder: (context, constraints) => Column(children: [
child: Column(children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
@@ -449,8 +448,6 @@ class ComposerView extends GetWidget<ComposerController>
_buildEmailAddress(context),
const Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(padding: const EdgeInsets.only(right: 16), child: _buildSubjectEmail(context)),
const Divider(color: AppColor.colorDividerComposer, height: 1),
_buildListButton(context, constraints),
]),
))
])),
@@ -464,8 +461,7 @@ class ComposerView extends GetWidget<ComposerController>
_buildComposerEditor(context),
])
)
]),
)
])
);
}
@@ -624,10 +620,10 @@ class ComposerView extends GetWidget<ComposerController>
switch(argsComposer.emailActionType) {
case EmailActionType.compose:
case EmailActionType.composeFromEmailAddress:
return _buildHtmlEditor(HtmlExtension.editorStartTags);
return _buildHtmlEditor('', context);
case EmailActionType.edit:
return controller.emailContentsViewState.value.fold(
(failure) => _buildHtmlEditor(HtmlExtension.editorStartTags),
(failure) => _buildHtmlEditor(HtmlExtension.editorStartTags, context),
(success) {
if (success is GetEmailContentLoading) {
return Padding(
@@ -639,9 +635,9 @@ class ComposerView extends GetWidget<ComposerController>
if (contentHtml.isEmpty == true) {
contentHtml = HtmlExtension.editorStartTags;
}
return _buildHtmlEditor(contentHtml);
return _buildHtmlEditor(contentHtml, context);
} else {
return _buildHtmlEditor(HtmlExtension.editorStartTags);
return _buildHtmlEditor(HtmlExtension.editorStartTags, context);
}
});
case EmailActionType.reply:
@@ -653,26 +649,31 @@ class ComposerView extends GetWidget<ComposerController>
if (contentHtml.isEmpty == true) {
contentHtml = HtmlExtension.editorStartTags;
}
return _buildHtmlEditor(contentHtml);
return _buildHtmlEditor(contentHtml, context);
default:
return _buildHtmlEditor(HtmlExtension.editorStartTags);
return _buildHtmlEditor(HtmlExtension.editorStartTags, context);
}
});
}
Widget _buildHtmlEditor(String initialContent) {
Widget _buildHtmlEditor(String initialContent, BuildContext context) {
final richTextMobileTabletController = controller.richTextMobileTabletController;
return Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20, top: 10),
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
child: HtmlEditor(
key: const Key('composer_editor'),
minHeight: 550,
addDefaultSelectionMenuItems: false,
initialContent: initialContent,
onCreated: (editorApi) {
if(responsiveUtils.isMobile(context)){
controller.keyboardRichTextController.onCreateHTMLEditor(editorApi);
} else {
richTextMobileTabletController.htmlEditorApi = editorApi;
richTextMobileTabletController.listenHtmlEditorApi();
}),
}
},
),
);
}
@@ -765,55 +766,4 @@ class ComposerView extends GetWidget<ComposerController>
double _getMaxWidthItemListAttachment(BuildContext context, BoxConstraints constraints) {
return constraints.maxWidth / _getMaxItemRowListAttachment(context, constraints);
}
Widget _buildToolbarMobileWidget(BuildContext context) {
return Obx(() {
final richTextController = controller.richTextMobileTabletController;
return Container(
padding: const EdgeInsets.only(left: 20, top: 8, bottom: 8),
alignment: Alignment.centerLeft,
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
buildWrapIconStyleText(
hasDropdown: false,
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
icon: Wrap(children: [
RichTextStyleType.bold,
RichTextStyleType.italic,
RichTextStyleType.underline
].map((formatStyle) => buildIconStyleText(
path: formatStyle.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(formatStyle),
onTap: () => richTextController.applyRichTextStyle(context, formatStyle)))
.toList())
),
Padding(
padding: const EdgeInsets.only(left: 4),
child: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5),
icon: buildIconColorBackgroundTextWithoutTooltip(
iconData: RichTextStyleType.textColor.getIconData(),
colorSelected: richTextController.selectedTextColor.value),
onTap: () => richTextController.applyRichTextStyle(
context,
RichTextStyleType.textColor))),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5),
icon: buildIconColorBackgroundTextWithoutTooltip(
iconData: RichTextStyleType.textBackgroundColor.getIconData(),
colorSelected: richTextController.selectedTextBackgroundColor.value,
),
onTap: () => richTextController.applyRichTextStyle(
context,
RichTextStyleType.textBackgroundColor)),
),
],
),
);
});
}
}
lib/main/localizations/app_localizations.dart
+28
View File
@@ -2299,4 +2299,32 @@ class AppLocalizations {
name: 'foreground'
);
}
String get titleFormat {
return Intl.message(
'Format',
name: 'titleFormat'
);
}
String get titleQuickStyles {
return Intl.message(
'Quick styles',
name: 'titleQuickStyles'
);
}
String get titleBackground {
return Intl.message(
'Background',
name: 'titleBackground'
);
}
String get titleForeground {
return Intl.message(
'Foreground',
name: 'titleForeground'
);
}
}
pubspec.yaml
+4
View File
@@ -42,6 +42,10 @@ dependencies:
forward:
path: forward
rich_text_composer:
git:
url: https://github.com/linagora/rich-text-composer.git
ref: apply_rich_text_bottom_sheet
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2