TF-740 Implement apply order list in composer web
This commit is contained in:
dab246
@@ -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="M10.2849 9.3288H22.5451C22.8109 9.3288 23.0375 9.23668 23.2247 9.05243C23.412 8.86818 23.5056 8.64013 23.5056 8.36828C23.5056 8.10248 23.412 7.87594 23.2247 7.68867C23.0375 7.5014 22.8109 7.40777 22.5451 7.40777H10.2849C10.0131 7.40777 9.78503 7.5014 9.60078 7.68867C9.41653 7.87594 9.3244 8.10248 9.3244 8.36828C9.3244 8.64013 9.41653 8.86818 9.60078 9.05243C9.78503 9.23668 10.0131 9.3288 10.2849 9.3288ZM10.2849 14.956H22.5451C22.8109 14.956 23.0375 14.8639 23.2247 14.6796C23.412 14.4954 23.5056 14.2673 23.5056 13.9955C23.5056 13.7297 23.412 13.5046 23.2247 13.3204C23.0375 13.1361 22.8109 13.044 22.5451 13.044H10.2849C10.0131 13.044 9.78503 13.1361 9.60078 13.3204C9.41653 13.5046 9.3244 13.7297 9.3244 13.9955C9.3244 14.2613 9.41653 14.4878 9.60078 14.6751C9.78503 14.8624 10.0131 14.956 10.2849 14.956ZM10.2849 20.5832H22.5451C22.8109 20.5832 23.0375 20.491 23.2247 20.3068C23.412 20.1225 23.5056 19.8945 23.5056 19.6227C23.5056 19.3569 23.412 19.1303 23.2247 18.943C23.0375 18.7558 22.8109 18.6621 22.5451 18.6621H10.2849C10.0131 18.6621 9.78503 18.7558 9.60078 18.943C9.41653 19.1303 9.3244 19.3569 9.3244 19.6227C9.3244 19.8945 9.41653 20.1225 9.60078 20.3068C9.78503 20.491 10.0131 20.5832 10.2849 20.5832ZM5.87198 9.73657C6.24652 9.73657 6.56971 9.60367 6.84155 9.33786C7.1134 9.07206 7.24932 8.74887 7.24932 8.36828C7.24932 7.9877 7.1134 7.66451 6.84155 7.39871C6.56971 7.1329 6.24652 7 5.87198 7C5.49139 7 5.16669 7.1329 4.89787 7.39871C4.62904 7.66451 4.49463 7.9877 4.49463 8.36828C4.49463 8.74887 4.62904 9.07206 4.89787 9.33786C5.16669 9.60367 5.49139 9.73657 5.87198 9.73657ZM5.87198 15.3728C6.24652 15.3728 6.56971 15.2369 6.84155 14.965C7.1134 14.6932 7.24932 14.37 7.24932 13.9955C7.24932 13.6209 7.1134 13.2977 6.84155 13.0259C6.56971 12.754 6.24652 12.6181 5.87198 12.6181C5.49139 12.6181 5.16669 12.754 4.89787 13.0259C4.62904 13.2977 4.49463 13.6209 4.49463 13.9955C4.49463 14.37 4.62904 14.6932 4.89787 14.965C5.16669 15.2369 5.49139 15.3728 5.87198 15.3728ZM5.87198 21C6.24652 21 6.56971 20.8656 6.84155 20.5968C7.1134 20.3279 7.24932 20.0032 7.24932 19.6227C7.24932 19.2421 7.1134 18.9189 6.84155 18.6531C6.56971 18.3873 6.24652 18.2544 5.87198 18.2544C5.49139 18.2544 5.16669 18.3873 4.89787 18.6531C4.62904 18.9189 4.49463 19.2421 4.49463 19.6227C4.49463 20.0032 4.62904 20.3279 4.89787 20.5968C5.16669 20.8656 5.49139 21 5.87198 21Z" fill="#99A2AD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -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="M10.9607 9.95035H21.6224C21.8595 9.95035 22.0616 9.86817 22.2286 9.70381C22.3957 9.53945 22.4792 9.33603 22.4792 9.09353C22.4792 8.85643 22.3957 8.65435 22.2286 8.4873C22.0616 8.32025 21.8595 8.23672 21.6224 8.23672H10.9607C10.7182 8.23672 10.5148 8.32025 10.3504 8.4873C10.1861 8.65435 10.1039 8.85643 10.1039 9.09353C10.1039 9.33603 10.1861 9.53945 10.3504 9.70381C10.5148 9.86817 10.7182 9.95035 10.9607 9.95035ZM10.9607 14.97H21.6224C21.8595 14.97 22.0616 14.8878 22.2286 14.7234C22.3957 14.5591 22.4792 14.3557 22.4792 14.1132C22.4792 13.8761 22.3957 13.6753 22.2286 13.511C22.0616 13.3466 21.8595 13.2644 21.6224 13.2644H10.9607C10.7182 13.2644 10.5148 13.3466 10.3504 13.511C10.1861 13.6753 10.1039 13.8761 10.1039 14.1132C10.1039 14.3503 10.1861 14.5523 10.3504 14.7194C10.5148 14.8865 10.7182 14.97 10.9607 14.97ZM10.9607 19.9896H21.6224C21.8595 19.9896 22.0616 19.9074 22.2286 19.7431C22.3957 19.5787 22.4792 19.3753 22.4792 19.1328C22.4792 18.8957 22.3957 18.6936 22.2286 18.5266C22.0616 18.3595 21.8595 18.276 21.6224 18.276H10.9607C10.7182 18.276 10.5148 18.3595 10.3504 18.5266C10.1861 18.6936 10.1039 18.8957 10.1039 19.1328C10.1039 19.3753 10.1861 19.5787 10.3504 19.7431C10.5148 19.9074 10.7182 19.9896 10.9607 19.9896ZM7.36371 10.8557C7.53615 10.8557 7.67491 10.8072 7.77999 10.7102C7.88507 10.6132 7.93761 10.4623 7.93761 10.2575V7.61432C7.93761 7.42571 7.87699 7.27617 7.75574 7.1657C7.63449 7.05523 7.47687 7 7.28288 7C7.13199 7 7.00266 7.0229 6.89489 7.06871C6.78711 7.11451 6.67395 7.17513 6.55539 7.25058L5.98149 7.64665C5.80905 7.75982 5.72283 7.89992 5.72283 8.06697C5.72283 8.18553 5.7592 8.27983 5.83195 8.34988C5.9047 8.41994 5.99227 8.45497 6.09465 8.45497C6.14854 8.45497 6.19569 8.44823 6.23611 8.43476C6.27653 8.42129 6.33176 8.3903 6.40181 8.3418L6.75747 8.10739H6.77364V10.2575C6.77364 10.4623 6.82753 10.6132 6.9353 10.7102C7.04308 10.8072 7.18588 10.8557 7.36371 10.8557ZM6.02191 15.851H8.17202C8.29596 15.851 8.3997 15.8133 8.48322 15.7379C8.56675 15.6624 8.60851 15.5574 8.60851 15.4226C8.60851 15.2933 8.56675 15.1896 8.48322 15.1114C8.3997 15.0333 8.29596 14.9942 8.17202 14.9942H7.04847V14.97L7.69512 14.4527C7.97533 14.2263 8.17876 14.031 8.30539 13.8666C8.43203 13.7023 8.49535 13.4935 8.49535 13.2402C8.49535 12.9007 8.36063 12.6272 8.09119 12.4197C7.82175 12.2123 7.45532 12.1085 6.99188 12.1085C6.58773 12.1085 6.25497 12.1988 5.99362 12.3793C5.73226 12.5599 5.60158 12.7821 5.60158 13.0462C5.60158 13.3372 5.76325 13.4827 6.08657 13.4827C6.26979 13.4827 6.42337 13.3992 6.54731 13.2321C6.67125 13.0543 6.82483 12.9654 7.00805 12.9654C7.12121 12.9654 7.21417 12.9977 7.28692 13.0624C7.35967 13.127 7.39604 13.2132 7.39604 13.321C7.39604 13.4126 7.36101 13.5069 7.29096 13.6039C7.22091 13.7009 7.0808 13.8329 6.87064 14L5.7875 14.8811C5.62583 15.0158 5.545 15.1828 5.545 15.3822C5.545 15.5169 5.58811 15.6288 5.67433 15.7177C5.76055 15.8066 5.87641 15.851 6.02191 15.851ZM7.00805 21C7.52537 21 7.92549 20.8963 8.2084 20.6888C8.49131 20.4813 8.63276 20.1998 8.63276 19.8441C8.63276 19.6178 8.55462 19.4292 8.39835 19.2783C8.24208 19.1274 8.02114 19.0412 7.73553 19.0196V18.9954C7.94031 18.9577 8.11544 18.8674 8.26094 18.7246C8.40643 18.5818 8.47918 18.3891 8.47918 18.1467C8.47918 17.8179 8.33773 17.5687 8.05482 17.399C7.77191 17.2292 7.42029 17.1443 6.99997 17.1443C6.78442 17.1443 6.57021 17.178 6.35736 17.2454C6.1445 17.3127 5.96802 17.4097 5.82791 17.5364C5.6878 17.663 5.61775 17.8233 5.61775 18.0173C5.61775 18.1359 5.65817 18.2356 5.739 18.3164C5.81983 18.3972 5.9303 18.4376 6.07041 18.4376C6.16201 18.4376 6.23611 18.4215 6.29269 18.3891C6.34927 18.3568 6.4072 18.3083 6.46648 18.2436C6.56348 18.1467 6.65374 18.0793 6.73726 18.0416C6.82079 18.0038 6.90836 17.985 6.99997 17.985C7.11852 17.985 7.21821 18.0133 7.29904 18.0699C7.37987 18.1264 7.42029 18.2113 7.42029 18.3245C7.42029 18.4323 7.37718 18.5144 7.29096 18.571C7.20474 18.6276 7.08349 18.6559 6.92722 18.6559H6.82214C6.56887 18.6559 6.44223 18.7825 6.44223 19.0358C6.44223 19.2891 6.56887 19.4157 6.82214 19.4157H6.9353C7.28557 19.4157 7.46071 19.5316 7.46071 19.7633C7.46609 19.8657 7.42433 19.9505 7.33542 20.0179C7.2465 20.0853 7.13738 20.1189 7.00805 20.1189C6.86794 20.1189 6.74535 20.0839 6.64027 20.0139C6.53519 19.9438 6.44223 19.8764 6.3614 19.8118C6.3129 19.7741 6.26305 19.739 6.21186 19.7067C6.16067 19.6744 6.09465 19.6582 6.01382 19.6582C5.86833 19.6582 5.74977 19.6986 5.65817 19.7794C5.56656 19.8603 5.52075 19.9707 5.52075 20.1109C5.52075 20.3911 5.68107 20.6093 6.0017 20.7656C6.32233 20.9219 6.65778 21 7.00805 21Z" fill="#99A2AD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -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;
|
||||
|
||||
@@ -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<ComposerController>
|
||||
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<FontNameType>(
|
||||
items: FontNameType.values,
|
||||
itemSelected: richTextController.selectedFontName.value,
|
||||
@@ -829,7 +830,7 @@ class ComposerView extends GetWidget<ComposerController>
|
||||
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<ComposerController>
|
||||
),
|
||||
),
|
||||
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<ComposerController>
|
||||
),
|
||||
),
|
||||
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<ComposerController>
|
||||
])),
|
||||
),
|
||||
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<ComposerController>
|
||||
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))),
|
||||
),
|
||||
),
|
||||
)
|
||||
]
|
||||
),
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,6 @@ mixin RichTextButtonMixin {
|
||||
VoidCallback? onTap,
|
||||
bool isSelected = false,
|
||||
bool hasDropdown = true,
|
||||
double opacity = 1.0,
|
||||
EdgeInsets? padding,
|
||||
double? spacing,
|
||||
String tooltip = '',
|
||||
|
||||
@@ -93,7 +93,7 @@ enum HeaderStyleType {
|
||||
case HeaderStyleType.h4:
|
||||
case HeaderStyleType.h5:
|
||||
case HeaderStyleType.h6:
|
||||
return FontWeight.bold;
|
||||
return FontWeight.bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 '';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user