TF-3956 Add font size in toolbar of vacation editor
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
@@ -1,3 +1,4 @@
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/views/button/tmail_button_widget.dart';
|
||||
import 'package:core/utils/platform_info.dart';
|
||||
@@ -60,17 +61,24 @@ class BottomBarComposerWidget extends StatelessWidget {
|
||||
color: BottomBarComposerWidgetStyle.backgroundColor,
|
||||
child: Row(
|
||||
children: [
|
||||
TMailButtonWidget.fromIcon(
|
||||
icon: imagePaths.icRichToolbar,
|
||||
borderRadius: BottomBarComposerWidgetStyle.iconRadius,
|
||||
padding: BottomBarComposerWidgetStyle.iconPadding,
|
||||
backgroundColor: Colors.transparent,
|
||||
iconSize: BottomBarComposerWidgetStyle.iconSize,
|
||||
iconColor: isFormattingOptionsEnabled
|
||||
? BottomBarComposerWidgetStyle.selectedIconColor
|
||||
: BottomBarComposerWidgetStyle.iconColor,
|
||||
tooltipMessage: AppLocalizations.of(context).formattingOptions,
|
||||
onTapActionCallback: openRichToolbarAction,
|
||||
AbsorbPointer(
|
||||
absorbing: isCodeViewEnabled,
|
||||
child: TMailButtonWidget.fromIcon(
|
||||
icon: imagePaths.icRichToolbar,
|
||||
borderRadius: BottomBarComposerWidgetStyle.iconRadius,
|
||||
padding: BottomBarComposerWidgetStyle.iconPadding,
|
||||
backgroundColor: isFormattingOptionsEnabled
|
||||
? AppColor.m3Primary95
|
||||
: Colors.transparent,
|
||||
iconSize: BottomBarComposerWidgetStyle.iconSize,
|
||||
iconColor: isCodeViewEnabled
|
||||
? BottomBarComposerWidgetStyle.disabledIconColor
|
||||
: isFormattingOptionsEnabled
|
||||
? BottomBarComposerWidgetStyle.selectedIconColor
|
||||
: BottomBarComposerWidgetStyle.iconColor,
|
||||
tooltipMessage: AppLocalizations.of(context).formattingOptions,
|
||||
onTapActionCallback: openRichToolbarAction,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: BottomBarComposerWidgetStyle.space),
|
||||
TMailButtonWidget.fromIcon(
|
||||
|
||||
+4
-5
@@ -2,19 +2,18 @@
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
|
||||
import 'package:tmail_ui_user/features/composer/presentation/styles/web/dropdown_button_font_size_widget_style.dart';
|
||||
|
||||
class DropdownButtonFontSizeWidget extends StatelessWidget {
|
||||
|
||||
final _imagePaths = Get.find<ImagePaths>();
|
||||
|
||||
final ImagePaths imagePaths;
|
||||
final int value;
|
||||
|
||||
DropdownButtonFontSizeWidget({
|
||||
const DropdownButtonFontSizeWidget({
|
||||
Key? key,
|
||||
required this.value,
|
||||
required this.imagePaths,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
@@ -51,7 +50,7 @@ class DropdownButtonFontSizeWidget extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
const SizedBox(width: DropdownButtonFontSizeWidgetStyle.space),
|
||||
SvgPicture.asset(_imagePaths.icStyleArrowDown)
|
||||
SvgPicture.asset(imagePaths.icStyleArrowDown)
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:dropdown_button2/dropdown_button2.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart';
|
||||
@@ -8,12 +9,14 @@ import 'package:tmail_ui_user/features/composer/presentation/widgets/web/item_me
|
||||
|
||||
class DropdownMenuFontSizeWidget extends StatelessWidget {
|
||||
|
||||
final Function(int?)? onChanged;
|
||||
final int selectedFontSize;
|
||||
final ImagePaths imagePaths;
|
||||
final Function(int?)? onChanged;
|
||||
|
||||
const DropdownMenuFontSizeWidget({
|
||||
Key? key,
|
||||
required this.selectedFontSize,
|
||||
required this.imagePaths,
|
||||
this.onChanged,
|
||||
}) : super(key: key);
|
||||
|
||||
@@ -31,7 +34,10 @@ class DropdownMenuFontSizeWidget extends StatelessWidget {
|
||||
)
|
||||
);
|
||||
}).toList(),
|
||||
customButton: DropdownButtonFontSizeWidget(value: selectedFontSize),
|
||||
customButton: DropdownButtonFontSizeWidget(
|
||||
value: selectedFontSize,
|
||||
imagePaths: imagePaths,
|
||||
),
|
||||
onChanged: onChanged,
|
||||
dropdownStyleData: const DropdownStyleData(
|
||||
maxHeight: DropdownMenuFontSizeWidgetStyle.menuMaxHeight,
|
||||
|
||||
@@ -1,301 +0,0 @@
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/utils/responsive_utils.dart';
|
||||
import 'package:custom_pop_up_menu/custom_pop_up_menu.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:pointer_interceptor/pointer_interceptor.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';
|
||||
import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_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/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/styles/web/toolbar_rich_text_builder_style.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/web/dropdown_menu_font_size_widget.dart';
|
||||
|
||||
class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin {
|
||||
|
||||
final RichTextWebController richTextWebController;
|
||||
final ImagePaths _imagePaths = Get.find<ImagePaths>();
|
||||
final ResponsiveUtils _responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
final EdgeInsetsGeometry? padding;
|
||||
final List<Widget>? extendedOption;
|
||||
final Decoration? decoration;
|
||||
final bool isHorizontalArrange;
|
||||
|
||||
ToolbarRichTextWebBuilder({
|
||||
Key? key,
|
||||
required this.richTextWebController,
|
||||
this.padding,
|
||||
this.extendedOption,
|
||||
this.decoration,
|
||||
this.isHorizontalArrange = false,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Obx(() {
|
||||
final codeViewEnabled = richTextWebController.codeViewEnabled;
|
||||
final opacity = codeViewEnabled ? 0.5 : 1.0;
|
||||
|
||||
final listAction = [
|
||||
if (extendedOption?.isNotEmpty == true) ...extendedOption!,
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: DropDownMenuHeaderStyleWidget(
|
||||
icon: buildWrapIconStyleText(
|
||||
isSelected: richTextWebController.isMenuHeaderStyleOpen,
|
||||
icon: SvgPicture.asset(
|
||||
RichTextStyleType.headerStyle.getIcon(_imagePaths),
|
||||
colorFilter: AppColor.colorDefaultRichTextButton
|
||||
.withValues(alpha: opacity)
|
||||
.asFilter(),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
tooltip: RichTextStyleType.headerStyle.getTooltipButton(context),
|
||||
),
|
||||
items: HeaderStyleType.values,
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextWebController.menuHeaderStyleStatus.value = newStatus;
|
||||
},
|
||||
onChanged: richTextWebController.applyHeaderStyle,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: DropdownMenuFontSizeWidget(
|
||||
onChanged: richTextWebController.applyNewFontSize,
|
||||
selectedFontSize: richTextWebController.selectedFontSize.value,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: SizedBox(
|
||||
width: 130,
|
||||
child: DropDownButtonWidget<FontNameType>(
|
||||
items: FontNameType.values,
|
||||
itemSelected: richTextWebController.selectedFontName.value,
|
||||
onChanged: (newFont) =>
|
||||
richTextWebController.applyNewFontStyle(newFont),
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextWebController.menuFontStatus.value = newStatus;
|
||||
},
|
||||
heightItem: 40,
|
||||
sizeIconChecked: 16,
|
||||
radiusButton: 8,
|
||||
opacity: opacity,
|
||||
dropdownWidth: 200,
|
||||
colorButton: richTextWebController.isMenuFontOpen
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: Colors.white,
|
||||
iconArrowDown: SvgPicture.asset(_imagePaths.icStyleArrowDown),
|
||||
tooltip: RichTextStyleType.fontName.getTooltipButton(context),
|
||||
supportSelectionIcon: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildWrapIconStyleText(
|
||||
icon: buildIconWithTooltip(
|
||||
path: RichTextStyleType.textColor.getIcon(_imagePaths),
|
||||
color: richTextWebController.selectedTextColor.value,
|
||||
tooltip: RichTextStyleType.textColor.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
),
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
|
||||
spacing: 3,
|
||||
icon: buildIconColorBackgroundText(
|
||||
iconData: RichTextStyleType.textBackgroundColor.getIconData(),
|
||||
colorSelected:
|
||||
richTextWebController.selectedTextBackgroundColor.value,
|
||||
tooltip: RichTextStyleType.textBackgroundColor
|
||||
.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
),
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textBackgroundColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
buildWrapIconStyleText(
|
||||
hasDropdown: false,
|
||||
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
|
||||
icon: Wrap(
|
||||
children: [
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.bold.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.bold),
|
||||
tooltip: RichTextStyleType.bold.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.italic.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.italic),
|
||||
tooltip: RichTextStyleType.italic.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.italic,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.underline.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.underline),
|
||||
tooltip:
|
||||
RichTextStyleType.underline.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.underline,
|
||||
),
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: buildIconStyleText(
|
||||
path: RichTextStyleType.strikeThrough.getIcon(_imagePaths),
|
||||
isSelected: richTextWebController
|
||||
.isTextStyleTypeSelected(RichTextStyleType.strikeThrough),
|
||||
tooltip:
|
||||
RichTextStyleType.strikeThrough.getTooltipButton(context),
|
||||
opacity: opacity,
|
||||
onTap: () => richTextWebController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.strikeThrough,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextWebController.menuParagraphController,
|
||||
listButtonAction: ParagraphType.values
|
||||
.map((paragraph) => paragraph.buildButtonWidget(
|
||||
context,
|
||||
_imagePaths,
|
||||
(paragraph) =>
|
||||
richTextWebController.applyParagraphType(paragraph)))
|
||||
.toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
iconButton: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
spacing: 3,
|
||||
isSelected: richTextWebController.focusMenuParagraph.value,
|
||||
icon: buildIconWithTooltip(
|
||||
path: richTextWebController.selectedParagraph.value
|
||||
.getIcon(_imagePaths),
|
||||
color: AppColor.colorDefaultRichTextButton,
|
||||
opacity: opacity,
|
||||
tooltip: RichTextStyleType.paragraph.getTooltipButton(context),
|
||||
),
|
||||
),
|
||||
position: _responsiveUtils.isMobile(context)
|
||||
? PreferredPosition.top
|
||||
: PreferredPosition.bottom,
|
||||
),
|
||||
),
|
||||
AbsorbPointer(
|
||||
absorbing: codeViewEnabled,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextWebController.menuOrderListController,
|
||||
listButtonAction: OrderListType.values
|
||||
.map((orderType) => orderType.buildButtonWidget(
|
||||
context,
|
||||
_imagePaths,
|
||||
(orderType) =>
|
||||
richTextWebController.applyOrderListType(orderType)))
|
||||
.toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
iconButton: buildWrapIconStyleText(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
|
||||
spacing: 3,
|
||||
isSelected: richTextWebController.focusMenuOrderList.value,
|
||||
icon: buildIconWithTooltip(
|
||||
path: richTextWebController.selectedOrderList.value
|
||||
.getIcon(_imagePaths),
|
||||
color: AppColor.colorDefaultRichTextButton,
|
||||
opacity: opacity,
|
||||
tooltip: RichTextStyleType.orderList.getTooltipButton(context),
|
||||
),
|
||||
),
|
||||
position: _responsiveUtils.isMobile(context)
|
||||
? PreferredPosition.top
|
||||
: PreferredPosition.bottom,
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
Widget bodyWidget;
|
||||
|
||||
if (isHorizontalArrange) {
|
||||
bodyWidget = SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
physics: const ClampingScrollPhysics(),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: listAction,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
bodyWidget = Wrap(
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
runSpacing: ToolbarRichTextBuilderStyle.itemVerticalSpace,
|
||||
spacing: ToolbarRichTextBuilderStyle.itemHorizontalSpace,
|
||||
children: listAction,
|
||||
);
|
||||
}
|
||||
|
||||
return PointerInterceptor(
|
||||
child: Container(
|
||||
padding: padding ?? ToolbarRichTextBuilderStyle.padding,
|
||||
decoration: decoration,
|
||||
width: double.infinity,
|
||||
child: bodyWidget,
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,335 @@
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/views/button/tmail_button_widget.dart';
|
||||
import 'package:custom_pop_up_menu/custom_pop_up_menu.dart';
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:tmail_ui_user/features/base/widget/arrow_down_icon_border_button_widget.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';
|
||||
import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
|
||||
import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_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/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/styles/web/toolbar_rich_text_builder_style.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/web/dropdown_menu_font_size_widget.dart';
|
||||
|
||||
class ToolbarRichTextWidget extends StatelessWidget {
|
||||
final RichTextWebController richTextController;
|
||||
final ImagePaths imagePaths;
|
||||
final bool isMobile;
|
||||
final bool isHorizontalArrange;
|
||||
final EdgeInsetsGeometry? padding;
|
||||
final List<Widget>? extendedOption;
|
||||
final Decoration? decoration;
|
||||
final ScrollController? scrollListController;
|
||||
|
||||
const ToolbarRichTextWidget({
|
||||
Key? key,
|
||||
required this.richTextController,
|
||||
required this.imagePaths,
|
||||
this.isMobile = false,
|
||||
this.isHorizontalArrange = false,
|
||||
this.padding,
|
||||
this.extendedOption,
|
||||
this.decoration,
|
||||
this.scrollListController,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final textColorOption = Obx(
|
||||
() {
|
||||
final textColor = richTextController.selectedTextColor.value;
|
||||
|
||||
return ArrowDownIconBorderButtonWidget(
|
||||
imagePaths: imagePaths,
|
||||
icon: RichTextStyleType.textColor.getIcon(imagePaths),
|
||||
iconColor: textColor.toInt() == Colors.white.toInt() ||
|
||||
textColor.toInt() == 0
|
||||
? AppColor.colorDefaultRichTextButton
|
||||
: textColor,
|
||||
tooltipMessage: RichTextStyleType.textColor.getTooltipButton(
|
||||
context,
|
||||
),
|
||||
height: 40,
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
onTap: () => richTextController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textColor,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
final backgroundColorOption = Obx(
|
||||
() {
|
||||
final backgroundColor =
|
||||
richTextController.selectedTextBackgroundColor.value;
|
||||
|
||||
return ArrowDownIconBorderButtonWidget(
|
||||
imagePaths: imagePaths,
|
||||
iconData: RichTextStyleType.textBackgroundColor.getIconData(),
|
||||
iconColor: backgroundColor.toInt() == Colors.white.toInt() ||
|
||||
backgroundColor.toInt() == 0
|
||||
? AppColor.colorDefaultRichTextButton
|
||||
: backgroundColor,
|
||||
tooltipMessage:
|
||||
RichTextStyleType.textBackgroundColor.getTooltipButton(
|
||||
context,
|
||||
),
|
||||
height: 40,
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
onTap: () => richTextController.applyRichTextStyle(
|
||||
context,
|
||||
RichTextStyleType.textBackgroundColor,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
final styleOption = Container(
|
||||
margin: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: AppColor.m3Neutral90,
|
||||
),
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
height: 40,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <RichTextStyleType>[
|
||||
RichTextStyleType.bold,
|
||||
RichTextStyleType.italic,
|
||||
RichTextStyleType.underline,
|
||||
RichTextStyleType.strikeThrough,
|
||||
].map((style) {
|
||||
return Obx(
|
||||
() {
|
||||
final isSelected =
|
||||
richTextController.isTextStyleTypeSelected(style);
|
||||
|
||||
return TMailButtonWidget.fromIcon(
|
||||
icon: style.getIcon(imagePaths),
|
||||
iconColor: isSelected ? Colors.black : AppColor.gray99A2AD,
|
||||
backgroundColor: Colors.transparent,
|
||||
padding: const EdgeInsets.all(5),
|
||||
tooltipMessage: style.getTooltipButton(context),
|
||||
onTapActionCallback: () =>
|
||||
richTextController.applyRichTextStyle(context, style),
|
||||
);
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
|
||||
final paragraphOption = Padding(
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextController.menuParagraphController,
|
||||
listButtonAction: ParagraphType.values.map((paragraph) {
|
||||
return paragraph.buildButtonWidget(
|
||||
context,
|
||||
imagePaths,
|
||||
richTextController.applyParagraphType,
|
||||
);
|
||||
}).toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
position: isMobile ? PreferredPosition.top : PreferredPosition.bottom,
|
||||
iconButton: Obx(
|
||||
() {
|
||||
return ArrowDownIconBorderButtonWidget(
|
||||
imagePaths: imagePaths,
|
||||
icon: richTextController.selectedParagraph.value
|
||||
.getIcon(imagePaths),
|
||||
backgroundColor: richTextController.focusMenuParagraph.isTrue
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: null,
|
||||
iconColor: AppColor.colorDefaultRichTextButton,
|
||||
height: 40,
|
||||
tooltipMessage:
|
||||
RichTextStyleType.paragraph.getTooltipButton(context),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
final orderListOption = Padding(
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
child: PopupMenuOverlayWidget(
|
||||
controller: richTextController.menuOrderListController,
|
||||
listButtonAction: OrderListType.values.map((orderType) {
|
||||
return orderType.buildButtonWidget(
|
||||
context,
|
||||
imagePaths,
|
||||
richTextController.applyOrderListType,
|
||||
);
|
||||
}).toList(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
position: isMobile ? PreferredPosition.top : PreferredPosition.bottom,
|
||||
iconButton: Obx(
|
||||
() {
|
||||
return ArrowDownIconBorderButtonWidget(
|
||||
imagePaths: imagePaths,
|
||||
icon: richTextController.selectedOrderList.value
|
||||
.getIcon(imagePaths),
|
||||
backgroundColor: richTextController.focusMenuOrderList.isTrue
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: null,
|
||||
iconColor: AppColor.colorDefaultRichTextButton,
|
||||
height: 40,
|
||||
tooltipMessage:
|
||||
RichTextStyleType.orderList.getTooltipButton(context),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
final listOptions = <Widget>[
|
||||
if (extendedOption?.isNotEmpty == true) ...extendedOption!,
|
||||
Padding(
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
child: DropDownMenuHeaderStyleWidget(
|
||||
icon: Obx(
|
||||
() {
|
||||
return ArrowDownIconBorderButtonWidget(
|
||||
imagePaths: imagePaths,
|
||||
icon: RichTextStyleType.headerStyle.getIcon(imagePaths),
|
||||
iconColor: AppColor.colorDefaultRichTextButton,
|
||||
backgroundColor: richTextController.isMenuHeaderStyleOpen
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: null,
|
||||
height: 40,
|
||||
tooltipMessage:
|
||||
RichTextStyleType.headerStyle.getTooltipButton(context),
|
||||
);
|
||||
},
|
||||
),
|
||||
items: HeaderStyleType.values,
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextController.menuHeaderStyleStatus.value = newStatus;
|
||||
},
|
||||
onChanged: richTextController.applyHeaderStyle,
|
||||
),
|
||||
),
|
||||
Obx(
|
||||
() {
|
||||
return Padding(
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
child: DropdownMenuFontSizeWidget(
|
||||
selectedFontSize: richTextController.selectedFontSize.value,
|
||||
imagePaths: imagePaths,
|
||||
onChanged: richTextController.applyNewFontSize,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
Container(
|
||||
width: 130,
|
||||
padding: ToolbarRichTextBuilderStyle.optionPadding,
|
||||
child: Obx(
|
||||
() {
|
||||
return DropDownButtonWidget<FontNameType>(
|
||||
items: FontNameType.values,
|
||||
itemSelected: richTextController.selectedFontName.value,
|
||||
onChanged: richTextController.applyNewFontStyle,
|
||||
onMenuStateChange: (isOpen) {
|
||||
final newStatus = isOpen
|
||||
? DropdownMenuFontStatus.open
|
||||
: DropdownMenuFontStatus.closed;
|
||||
richTextController.menuFontStatus.value = newStatus;
|
||||
},
|
||||
heightItem: 40,
|
||||
sizeIconChecked: 16,
|
||||
radiusButton: 8,
|
||||
dropdownWidth: 200,
|
||||
colorButton: richTextController.isMenuFontOpen
|
||||
? AppColor.colorBackgroundWrapIconStyleCode
|
||||
: Colors.white,
|
||||
iconArrowDown: SvgPicture.asset(imagePaths.icStyleArrowDown),
|
||||
tooltip: RichTextStyleType.fontName.getTooltipButton(context),
|
||||
supportSelectionIcon: true,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
if (isHorizontalArrange)
|
||||
Center(child: textColorOption)
|
||||
else
|
||||
textColorOption,
|
||||
if (isHorizontalArrange)
|
||||
Center(child: backgroundColorOption)
|
||||
else
|
||||
backgroundColorOption,
|
||||
if (isHorizontalArrange) Center(child: styleOption) else styleOption,
|
||||
if (isHorizontalArrange)
|
||||
Center(child: paragraphOption)
|
||||
else
|
||||
paragraphOption,
|
||||
if (isHorizontalArrange)
|
||||
Center(child: orderListOption)
|
||||
else
|
||||
orderListOption,
|
||||
];
|
||||
|
||||
if (isHorizontalArrange) {
|
||||
Widget listViewOption = ListView(
|
||||
shrinkWrap: true,
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: scrollListController,
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
children: listOptions,
|
||||
);
|
||||
|
||||
if (scrollListController != null) {
|
||||
listViewOption = ScrollbarListView(
|
||||
scrollBehavior: ScrollConfiguration.of(context).copyWith(
|
||||
physics: const BouncingScrollPhysics(),
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
PointerDeviceKind.trackpad,
|
||||
},
|
||||
scrollbars: false,
|
||||
),
|
||||
scrollController: scrollListController!,
|
||||
child: listViewOption,
|
||||
);
|
||||
}
|
||||
|
||||
return Container(
|
||||
alignment: AlignmentDirectional.bottomCenter,
|
||||
padding: padding,
|
||||
decoration: decoration,
|
||||
height: 50,
|
||||
child: listViewOption,
|
||||
);
|
||||
} else {
|
||||
return Container(
|
||||
padding: padding ?? ToolbarRichTextBuilderStyle.padding,
|
||||
decoration: decoration,
|
||||
width: double.infinity,
|
||||
child: Wrap(
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
runSpacing: ToolbarRichTextBuilderStyle.itemVerticalSpace,
|
||||
spacing: 0.0,
|
||||
children: listOptions,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user