From d6ba69424abd17aeea80157d0a1a7fb37bab1003 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 27 Jul 2022 12:03:47 +0700 Subject: [PATCH] TF-740 Implement apply order list in composer web --- assets/images/ic_order_bullet.svg | 3 ++ assets/images/ic_order_number.svg | 3 ++ .../presentation/resources/image_paths.dart | 2 + .../presentation/composer_view_web.dart | 41 +++++++++++++++---- .../controller/rich_text_web_controller.dart | 17 ++++++++ .../mixin/rich_text_button_mixin.dart | 1 - .../presentation/model/header_style_type.dart | 2 +- .../model/rich_text_style_type.dart | 5 ++- 8 files changed, 63 insertions(+), 11 deletions(-) create mode 100644 assets/images/ic_order_bullet.svg create mode 100644 assets/images/ic_order_number.svg diff --git a/assets/images/ic_order_bullet.svg b/assets/images/ic_order_bullet.svg new file mode 100644 index 000000000..a47f78e06 --- /dev/null +++ b/assets/images/ic_order_bullet.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_order_number.svg b/assets/images/ic_order_number.svg new file mode 100644 index 000000000..b9d9104c5 --- /dev/null +++ b/assets/images/ic_order_number.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 5e5884f74..bfb146677 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -143,6 +143,8 @@ class ImagePaths { String get icAlignJustify => _getImagePath('ic_align_justify.svg'); String get icAlignIndent => _getImagePath('ic_align_indent.svg'); String get icAlignOutdent => _getImagePath('ic_align_outdent.svg'); + String get icOrderNumber => _getImagePath('ic_order_number.svg'); + String get icOrderBullet => _getImagePath('ic_order_bullet.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index 4730c877a..8315d492d 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -18,6 +18,7 @@ import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_but import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/header_style_type.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/order_list_type.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_type.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'; @@ -804,8 +805,8 @@ class ComposerView extends GetWidget AbsorbPointer( absorbing: codeViewEnabled, child: Container( - width: 200, - padding: const EdgeInsets.only(left: 8, right: 8), + width: 130, + padding: const EdgeInsets.only(left: 4.0, right: 4.0), child: DropDownButtonWidget( items: FontNameType.values, itemSelected: richTextController.selectedFontName.value, @@ -829,7 +830,7 @@ class ComposerView extends GetWidget supportSelectionIcon: true)), ), Padding( - padding: const EdgeInsets.only(right: 8), + padding: const EdgeInsets.only(right: 4.0), child: AbsorbPointer( absorbing: codeViewEnabled, child: buildWrapIconStyleText( @@ -842,7 +843,7 @@ class ComposerView extends GetWidget ), ), Padding( - padding: const EdgeInsets.only(right: 8), + padding: const EdgeInsets.only(right: 4.0), child: AbsorbPointer( absorbing: codeViewEnabled, child: buildWrapIconStyleText( @@ -857,7 +858,7 @@ class ComposerView extends GetWidget ), ), Padding( - padding: const EdgeInsets.only(right: 8.0), + padding: const EdgeInsets.only(right: 4.0), child: buildWrapIconStyleText( hasDropdown: false, padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5), @@ -902,7 +903,7 @@ class ComposerView extends GetWidget ])), ), Padding( - padding: const EdgeInsets.only(right: 8.0), + padding: const EdgeInsets.only(right: 4.0), child: AbsorbPointer( absorbing: codeViewEnabled, child: PopupMenuOverlayWidget( @@ -916,14 +917,38 @@ class ComposerView extends GetWidget iconButton: buildWrapIconStyleText( padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5), spacing: 3, - opacity: opacity, isSelected: richTextController.focusMenuParagraph.value, icon: buildIconWithTooltip( path: richTextController.selectedParagraph.value.getIcon(imagePaths), - color: AppColor.colorDefaultRichTextButton.withOpacity(opacity), + color: AppColor.colorDefaultRichTextButton, + opacity: opacity, tooltip: RichTextStyleType.paragraph.getTooltipButton(context))), ), ), + ), + Padding( + padding: const EdgeInsets.only(right: 4.0), + child: AbsorbPointer( + absorbing: codeViewEnabled, + child: PopupMenuOverlayWidget( + controller: richTextController.menuOrderListController, + listButtonAction: OrderListType.values + .map((orderType) => orderType.buildButtonWidget( + context, + imagePaths, + (orderType) => richTextController.applyOrderListType(orderType))) + .toList(), + iconButton: buildWrapIconStyleText( + padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5), + spacing: 3, + isSelected: richTextController.focusMenuOrderList.value, + icon: buildIconWithTooltip( + path: richTextController.selectedOrderList.value.getIcon(imagePaths), + color: AppColor.colorDefaultRichTextButton, + opacity: opacity, + tooltip: RichTextStyleType.orderList.getTooltipButton(context))), + ), + ), ) ] ), diff --git a/lib/features/composer/presentation/controller/rich_text_web_controller.dart b/lib/features/composer/presentation/controller/rich_text_web_controller.dart index 143a11c55..de577f087 100644 --- a/lib/features/composer/presentation/controller/rich_text_web_controller.dart +++ b/lib/features/composer/presentation/controller/rich_text_web_controller.dart @@ -16,6 +16,7 @@ import 'package:tmail_ui_user/features/composer/presentation/model/image_source. import 'package:tmail_ui_user/features/composer/presentation/model/inline_image.dart'; import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart'; +import 'package:tmail_ui_user/features/composer/presentation/model/order_list_type.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_type.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'; @@ -30,11 +31,14 @@ class RichTextWebController extends BaseRichTextController { final selectedFontName = FontNameType.sansSerif.obs; final codeViewState = CodeViewState.disabled.obs; final selectedParagraph = ParagraphType.alignLeft.obs; + final selectedOrderList = OrderListType.bulletedList.obs; + final focusMenuOrderList = RxBool(false); final focusMenuParagraph = RxBool(false); final menuFontStatus = DropdownMenuFontStatus.closed.obs; final menuHeaderStyleStatus = DropdownMenuFontStatus.closed.obs; final menuParagraphController = CustomPopupMenuController(); + final menuOrderListController = CustomPopupMenuController(); @override void onReady() { @@ -42,6 +46,9 @@ class RichTextWebController extends BaseRichTextController { menuParagraphController.addListener(() { focusMenuParagraph.value = menuParagraphController.menuIsShowing; }); + menuOrderListController.addListener(() { + focusMenuOrderList.value = menuOrderListController.menuIsShowing; + }); } void onEditorSettingsChange(EditorSettings settings) async { @@ -255,11 +262,21 @@ class RichTextWebController extends BaseRichTextController { if (menuParagraphController.menuIsShowing) { menuParagraphController.hideMenu(); } + if (menuOrderListController.menuIsShowing) { + menuOrderListController.hideMenu(); + } + } + + void applyOrderListType(OrderListType newOrderList) { + selectedOrderList.value = newOrderList; + editorController.execCommand(newOrderList.commandAction); + menuOrderListController.hideMenu(); } @override void onClose() { menuParagraphController.dispose(); + menuOrderListController.dispose(); super.onClose(); } } \ No newline at end of file diff --git a/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart b/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart index 139e8323d..57c4a4a84 100644 --- a/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart +++ b/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart @@ -13,7 +13,6 @@ mixin RichTextButtonMixin { VoidCallback? onTap, bool isSelected = false, bool hasDropdown = true, - double opacity = 1.0, EdgeInsets? padding, double? spacing, String tooltip = '', diff --git a/lib/features/composer/presentation/model/header_style_type.dart b/lib/features/composer/presentation/model/header_style_type.dart index 522f6adb5..cbe3c04d8 100644 --- a/lib/features/composer/presentation/model/header_style_type.dart +++ b/lib/features/composer/presentation/model/header_style_type.dart @@ -93,7 +93,7 @@ enum HeaderStyleType { case HeaderStyleType.h4: case HeaderStyleType.h5: case HeaderStyleType.h6: - return FontWeight.bold; + return FontWeight.bold; } } } \ No newline at end of file diff --git a/lib/features/composer/presentation/model/rich_text_style_type.dart b/lib/features/composer/presentation/model/rich_text_style_type.dart index 57823f49e..baefb60c7 100644 --- a/lib/features/composer/presentation/model/rich_text_style_type.dart +++ b/lib/features/composer/presentation/model/rich_text_style_type.dart @@ -12,7 +12,8 @@ enum RichTextStyleType { strikeThrough, textColor, textBackgroundColor, - paragraph; + paragraph, + orderList; String get commandAction { switch (this) { @@ -88,6 +89,8 @@ enum RichTextStyleType { return AppLocalizations.of(context).fontFamily; case paragraph: return AppLocalizations.of(context).paragraph; + case orderList: + return AppLocalizations.of(context).orderList; default: return ''; }