From 95f9c30804b3cf730827605e22e4834b19ac443a Mon Sep 17 00:00:00 2001 From: ManhNTX Date: Thu, 28 Jul 2022 00:25:33 +0700 Subject: [PATCH] add header style --- .../composer/presentation/composer_view.dart | 146 +++++++++--------- .../rich_text_mobile_tablet_controller.dart | 18 ++- 2 files changed, 87 insertions(+), 77 deletions(-) diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index 817b9bfe9..c0bfa83ba 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -5,7 +5,6 @@ import 'package:file_picker/file_picker.dart'; import 'package:filesize/filesize.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/identities/identity.dart'; @@ -15,9 +14,10 @@ import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart' import 'package:tmail_ui_user/features/composer/domain/state/download_image_as_base64_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/dropdown_menu_font_status.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/header_style_type.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/drop_down_menu_header_style_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/email_address_input_builder.dart'; import 'package:tmail_ui_user/features/upload/domain/state/attachment_upload_state.dart'; import 'package:tmail_ui_user/features/upload/presentation/extensions/list_upload_file_state_extension.dart'; @@ -508,75 +508,82 @@ class ComposerView extends GetWidget with AppLoaderMixin, Ri } Widget _buildToolbarRichTextWidget(BuildContext context) { - return Obx(() => Container( + return Obx(() { + final richTextMobileTabletController = 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: [ - Container( - width: 200, - padding: const EdgeInsets.only(right: 2), - child: DropDownButtonWidget( - items: SafeFont.values, - itemSelected: controller.richTextMobileTabletController.selectedFontName.value, - onChanged: (newFont) => controller.richTextMobileTabletController.applyNewFontStyle(newFont), - onMenuStateChange: (isOpen) { - final newStatus = isOpen - ? DropdownMenuFontStatus.open - : DropdownMenuFontStatus.closed; - controller.richTextMobileTabletController.menuFontStatus = newStatus; - }, - heightItem: 38, - sizeIconChecked: 16, - radiusButton: 5, - colorButton: Colors.white, - supportSelectionIcon: true)), - Padding( - padding: const EdgeInsets.only(left: 8), - child: buildWrapIconStyleText( - padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5), - icon: buildIconColorBackgroundTextWithoutTooltip( - iconData: RichTextStyleType.textColor.getIconData(), - colorSelected: controller.richTextMobileTabletController.selectedTextColor.value, - ), - onTap: () => controller.richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.textColor)), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 8), - child: buildWrapIconStyleText( - padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5), - icon: buildIconColorBackgroundTextWithoutTooltip( - iconData: RichTextStyleType.textBackgroundColor.getIconData(), - colorSelected: controller.richTextMobileTabletController.selectedTextBackgroundColor.value, - ), - onTap: () => controller.richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.textBackgroundColor)), - ), - buildWrapIconStyleText( - hasDropdown: false, - padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5), - icon: Wrap(children: [ - buildIconStyleText( - path: RichTextStyleType.bold.getIcon(imagePaths), - isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.bold), - onTap: () => controller.richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.bold)), - buildIconStyleText( - path: RichTextStyleType.italic.getIcon(imagePaths), - isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.italic), - onTap: () => controller.richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.italic)), - buildIconStyleText( - path: RichTextStyleType.underline.getIcon(imagePaths), - isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.underline), - onTap: () => controller.richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.underline)), - buildIconStyleText( - path: RichTextStyleType.strikeThrough.getIcon(imagePaths), - isSelected: controller.richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.strikeThrough), - onTap: () => controller.richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.strikeThrough)) - ])), - ], + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + DropDownMenuHeaderStyleWidget( + icon: buildWrapIconStyleText( + isSelected: richTextMobileTabletController.isMenuHeaderStyleOpen, + icon: SvgPicture.asset(RichTextStyleType.headerStyle.getIcon(imagePaths), + color: AppColor.colorDefaultRichTextButton, + fit: BoxFit.fill), + padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5), + ), + items: HeaderStyleType.values, + onChanged: (newStyle) => richTextMobileTabletController.applyHeaderStyle(newStyle)), + Container( + width: 200, + padding: const EdgeInsets.only(right: 2, left: 8), + child: DropDownButtonWidget( + items: SafeFont.values, + itemSelected: richTextMobileTabletController.selectedFontName.value, + onChanged: (newFont) => richTextMobileTabletController.applyNewFontStyle(newFont), + heightItem: 38, + sizeIconChecked: 16, + radiusButton: 5, + colorButton: Colors.white, + supportSelectionIcon: true)), + Padding( + padding: const EdgeInsets.only(left: 8), + child: buildWrapIconStyleText( + padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5), + icon: buildIconColorBackgroundTextWithoutTooltip( + iconData: RichTextStyleType.textColor.getIconData(), + colorSelected: richTextMobileTabletController.selectedTextColor.value, + ), + onTap: () => richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.textColor)), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: buildWrapIconStyleText( + padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5), + icon: buildIconColorBackgroundTextWithoutTooltip( + iconData: RichTextStyleType.textBackgroundColor.getIconData(), + colorSelected: richTextMobileTabletController.selectedTextBackgroundColor.value, + ), + onTap: () => richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.textBackgroundColor)), + ), + buildWrapIconStyleText( + hasDropdown: false, + padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5), + icon: Wrap(children: [ + buildIconStyleText( + path: RichTextStyleType.bold.getIcon(imagePaths), + isSelected: richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.bold), + onTap: () => richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.bold)), + buildIconStyleText( + path: RichTextStyleType.italic.getIcon(imagePaths), + isSelected: richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.italic), + onTap: () => richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.italic)), + buildIconStyleText( + path: RichTextStyleType.underline.getIcon(imagePaths), + isSelected: richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.underline), + onTap: () => richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.underline)), + buildIconStyleText( + path: RichTextStyleType.strikeThrough.getIcon(imagePaths), + isSelected: richTextMobileTabletController.isTextStyleTypeSelected(RichTextStyleType.strikeThrough), + onTap: () => richTextMobileTabletController.applyRichTextStyle(context, RichTextStyleType.strikeThrough)) + ])), + ], ), - ), + ); + }, ); } @@ -628,6 +635,7 @@ class ComposerView extends GetWidget with AppLoaderMixin, Ri } Widget _buildHtmlEditor(String initialContent) { + final richTextMobileTabletController = controller.richTextMobileTabletController; return Padding( padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20, top: 10), child: HtmlEditor( @@ -635,8 +643,8 @@ class ComposerView extends GetWidget with AppLoaderMixin, Ri minHeight: 550, initialContent: initialContent, onCreated: (editorApi) { - controller.richTextMobileTabletController.htmlEditorApi = editorApi; - controller.richTextMobileTabletController.listenHtmlEditorApi(); + richTextMobileTabletController.htmlEditorApi = editorApi; + richTextMobileTabletController.listenHtmlEditorApi(); }), ); } 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 index 878dcece6..d11b3964f 100644 --- a/lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart +++ b/lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart @@ -8,10 +8,10 @@ import 'package:html/parser.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/header_style_type.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/image_source.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/inline_image.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart'; -import 'package:tmail_ui_user/main/routes/route_navigation.dart'; class RichTextMobileTabletController extends BaseRichTextController { HtmlEditorApi? htmlEditorApi; @@ -19,8 +19,10 @@ class RichTextMobileTabletController extends BaseRichTextController { final selectedTextColor = Colors.black.obs; final selectedTextBackgroundColor = Colors.white.obs; final selectedFontName = SafeFont.sansSerif.obs; + + final menuHeaderStyleStatus = DropdownMenuFontStatus.closed.obs; - DropdownMenuFontStatus menuFontStatus = DropdownMenuFontStatus.closed; + bool get isMenuHeaderStyleOpen => menuHeaderStyleStatus.value == DropdownMenuFontStatus.open; void listenHtmlEditorApi() { htmlEditorApi?.onFormatSettingsChanged = (formatSettings) { @@ -138,12 +140,6 @@ class RichTextMobileTabletController extends BaseRichTextController { htmlEditorApi?.setFont(selectedFontName.value); } - bool get isMenuFontOpen => menuFontStatus == DropdownMenuFontStatus.open; - - void closeDropdownMenuFont() { - popBack(); - } - void insertImage(InlineImage image, {double? maxWithEditor}) async { log('RichTextMobileTabletController::insertImage(): $image | maxWithEditor: $maxWithEditor'); if (image.source == ImageSource.network) { @@ -154,4 +150,10 @@ class RichTextMobileTabletController extends BaseRichTextController { htmlEditorApi?.insertHtml(htmlContent); } } + + void applyHeaderStyle(HeaderStyleType? newStyle) { + final styleSelected = newStyle ?? HeaderStyleType.normal; + htmlEditorApi?.formatHeader(styleSelected.styleValue); + } + }