diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 3143ae773..62214bd42 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -220,6 +220,9 @@ extension AppColor on Color { static const colorProgressLoadingBackground = Color(0xFFE3F1FF); static const colorDropZoneBackground = Color(0xFFF6FAFF); static const colorDropZoneBorder = Color(0xFF46A2FF); + static const colorLabelRichText = Color(0xFFADADC0); + static const dropdownButtonBorderColor = Color(0xFFCFD7E2); + static const dropdownLabelButtonBackgroundColor = Color(0xFFF4F4F4); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], 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 0eaac828f..c1eb49b12 100644 --- a/lib/features/composer/presentation/model/rich_text_style_type.dart +++ b/lib/features/composer/presentation/model/rich_text_style_type.dart @@ -6,6 +6,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; enum RichTextStyleType { headerStyle, fontName, + fontSize, bold, italic, underline, @@ -19,20 +20,6 @@ enum RichTextStyleType { switch (this) { case headerStyle: return 'formatBlock'; - case fontName: - return 'fontName'; - case bold: - return 'bold'; - case italic: - return 'italic'; - case underline: - return 'underline'; - case strikeThrough: - return 'strikeThrough'; - case textColor: - return 'foreColor'; - case textBackgroundColor: - return 'hiliteColor'; default: return ''; } @@ -40,11 +27,11 @@ enum RichTextStyleType { String get summernoteNameAPI { switch (this) { - case RichTextStyleType.textColor: + case textColor: return 'foreColor'; - case RichTextStyleType.textBackgroundColor: + case textBackgroundColor: return 'backColor'; - case RichTextStyleType.fontName: + case fontName: return 'fontName'; case bold: return 'bold'; @@ -108,6 +95,8 @@ enum RichTextStyleType { return AppLocalizations.of(context).headerStyle; case fontName: return AppLocalizations.of(context).fontFamily; + case fontSize: + return AppLocalizations.of(context).textSize; case paragraph: return AppLocalizations.of(context).paragraph; case orderList: diff --git a/lib/features/composer/presentation/styles/web/dropdown_button_font_size_widget_style.dart b/lib/features/composer/presentation/styles/web/dropdown_button_font_size_widget_style.dart new file mode 100644 index 000000000..5f1f07540 --- /dev/null +++ b/lib/features/composer/presentation/styles/web/dropdown_button_font_size_widget_style.dart @@ -0,0 +1,22 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class DropdownButtonFontSizeWidgetStyle { + static const double borderWidth = 0.5; + static const double radius = 8; + static const double height = 36; + static const double labelRadius = 4; + static const double space = 4; + + static const Color borderColor = AppColor.dropdownButtonBorderColor; + static const Color labelBackgroundColor = AppColor.dropdownLabelButtonBackgroundColor; + + static const EdgeInsetsGeometry padding = EdgeInsets.all(4); + static const EdgeInsetsGeometry labelPadding = EdgeInsets.symmetric(horizontal: 16); + + static const TextStyle labelTextStyle = TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: AppColor.colorLabelRichText + ); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/styles/web/dropdown_menu_font_size_widget_style.dart b/lib/features/composer/presentation/styles/web/dropdown_menu_font_size_widget_style.dart new file mode 100644 index 000000000..a3c3b10aa --- /dev/null +++ b/lib/features/composer/presentation/styles/web/dropdown_menu_font_size_widget_style.dart @@ -0,0 +1,11 @@ + +import 'package:flutter/cupertino.dart'; + +class DropdownMenuFontSizeWidgetStyle { + static const double menuMaxHeight = 200.0; + static const double menuWidth = 128.0; + static const double menuRadius = 16.0; + static const double menuItemHeight = 44.0; + + static const EdgeInsetsGeometry menuItemPadding = EdgeInsets.symmetric(horizontal: 12); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/styles/web/item_menu_font_size_widget_style.dart b/lib/features/composer/presentation/styles/web/item_menu_font_size_widget_style.dart new file mode 100644 index 000000000..a96d9d377 --- /dev/null +++ b/lib/features/composer/presentation/styles/web/item_menu_font_size_widget_style.dart @@ -0,0 +1,12 @@ + +import 'package:flutter/material.dart'; + +class ItemMenuFontSizeWidgetStyle { + static const TextStyle labelTextStyle = TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Colors.black, + ); + + static const EdgeInsetsGeometry selectIconPadding = EdgeInsetsDirectional.only(start: 12); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/web/dropdown_button_font_size_widget.dart b/lib/features/composer/presentation/widgets/web/dropdown_button_font_size_widget.dart new file mode 100644 index 000000000..6b1abf80a --- /dev/null +++ b/lib/features/composer/presentation/widgets/web/dropdown_button_font_size_widget.dart @@ -0,0 +1,60 @@ + +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(); + + final int value; + + DropdownButtonFontSizeWidget({ + Key? key, + required this.value, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Tooltip( + message: RichTextStyleType.fontSize.getTooltipButton(context), + child: Container( + padding: DropdownButtonFontSizeWidgetStyle.padding, + decoration: const ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide( + width: DropdownButtonFontSizeWidgetStyle.borderWidth, + color: DropdownButtonFontSizeWidgetStyle.borderColor + ), + borderRadius: BorderRadius.all(Radius.circular(DropdownButtonFontSizeWidgetStyle.radius)), + ), + ), + height: DropdownButtonFontSizeWidgetStyle.height, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: DropdownButtonFontSizeWidgetStyle.labelPadding, + decoration: const ShapeDecoration( + color: DropdownButtonFontSizeWidgetStyle.labelBackgroundColor, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(DropdownButtonFontSizeWidgetStyle.labelRadius)) + ), + ), + alignment: Alignment.center, + child: Text( + '$value', + style: DropdownButtonFontSizeWidgetStyle.labelTextStyle, + ), + ), + const SizedBox(width: DropdownButtonFontSizeWidgetStyle.space), + SvgPicture.asset(_imagePaths.icStyleArrowDown) + ], + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/web/dropdown_menu_font_size_widget.dart b/lib/features/composer/presentation/widgets/web/dropdown_menu_font_size_widget.dart new file mode 100644 index 000000000..d3446bee6 --- /dev/null +++ b/lib/features/composer/presentation/widgets/web/dropdown_menu_font_size_widget.dart @@ -0,0 +1,50 @@ + +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'; +import 'package:tmail_ui_user/features/composer/presentation/styles/web/dropdown_menu_font_size_widget_style.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/web/dropdown_button_font_size_widget.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/web/item_menu_font_size_widget.dart'; + +class DropdownMenuFontSizeWidget extends StatelessWidget { + + final Function(int?)? onChanged; + final int selectedFontSize; + + const DropdownMenuFontSizeWidget({ + Key? key, + required this.selectedFontSize, + this.onChanged, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return DropdownButtonHideUnderline( + child: DropdownButton2( + value: selectedFontSize, + items: RichTextWebController.fontSizeList.map((value) { + return DropdownMenuItem( + value: value, + child: ItemMenuFontSizeWidget( + value: value, + selectedValue: selectedFontSize + ) + ); + }).toList(), + customButton: DropdownButtonFontSizeWidget(value: selectedFontSize), + onChanged: onChanged, + dropdownStyleData: const DropdownStyleData( + maxHeight: DropdownMenuFontSizeWidgetStyle.menuMaxHeight, + width: DropdownMenuFontSizeWidgetStyle.menuWidth, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(DropdownMenuFontSizeWidgetStyle.menuRadius)), + ), + ), + menuItemStyleData: const MenuItemStyleData( + height: DropdownMenuFontSizeWidgetStyle.menuItemHeight, + padding: DropdownMenuFontSizeWidgetStyle.menuItemPadding, + ) + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/web/item_menu_font_size_widget.dart b/lib/features/composer/presentation/widgets/web/item_menu_font_size_widget.dart new file mode 100644 index 000000000..576bea5e8 --- /dev/null +++ b/lib/features/composer/presentation/widgets/web/item_menu_font_size_widget.dart @@ -0,0 +1,48 @@ + +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:pointer_interceptor/pointer_interceptor.dart'; +import 'package:tmail_ui_user/features/composer/presentation/styles/web/item_menu_font_size_widget_style.dart'; + +class ItemMenuFontSizeWidget extends StatelessWidget { + + final _imagePaths = Get.find(); + + final int? value; + final int selectedValue; + + ItemMenuFontSizeWidget({ + Key? key, + required this.value, + required this.selectedValue, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return PointerInterceptor( + child: Container( + alignment: Alignment.center, + color: Colors.transparent, + child: Stack( + alignment: Alignment.center, + children: [ + Text( + '$value', + style: ItemMenuFontSizeWidgetStyle.labelTextStyle, + ), + if (value == selectedValue) + Align( + alignment: AlignmentDirectional.centerStart, + child: Padding( + padding: ItemMenuFontSizeWidgetStyle.selectIconPadding, + child: SvgPicture.asset(_imagePaths.icSelectedSB), + ) + ) + ], + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 436c87666..efed42e90 100644 --- a/lib/l10n/intl_messages.arb +++ b/lib/l10n/intl_messages.arb @@ -1,5 +1,5 @@ { - "@@last_modified": "2023-10-05T15:38:07.324902", + "@@last_modified": "2023-10-11T09:37:10.790631", "initializing_data": "Initializing data...", "@initializing_data": { "type": "text", @@ -3257,5 +3257,11 @@ "type": "text", "placeholders_order": [], "placeholders": {} + }, + "textSize": "Text Size", + "@textSize": { + "type": "text", + "placeholders_order": [], + "placeholders": {} } } \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index 24e191e7f..8c66b4ebf 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -3361,4 +3361,11 @@ class AppLocalizations { name: 'newSubfolder', ); } + + String get textSize { + return Intl.message( + 'Text Size', + name: 'textSize' + ); + } } \ No newline at end of file