TF-1301 Add font size dropdown menu button

Signed-off-by: dab246 <tdvu@linagora.com> (cherry picked from commit 1aee8b4f7dbde30c7fbf2e9aa722632c9df9cd21)
2023-10-13 19:35:51 +07:00
parent 95edd63c04
commit 9419b600aa
10 changed files with 226 additions and 18 deletions
@@ -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)],
@@ -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:
@@ -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
+  );
+}
@@ -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);
+}
@@ -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);
+}
@@ -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<ImagePaths>();
+
+  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)
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -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<int>(
+        value: selectedFontSize,
+        items: RichTextWebController.fontSizeList.map((value) {
+          return DropdownMenuItem<int>(
+            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,
+        )
+      ),
+    );
+  }
+}
@@ -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<ImagePaths>();
+
+  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),
+                )
+              )
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -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": {}
  }
 }
@@ -3361,4 +3361,11 @@ class AppLocalizations {
      name: 'newSubfolder',
    );
  }
+
+  String get textSize {
+    return Intl.message(
+      'Text Size',
+      name: 'textSize'
+    );
+  }
 }