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
@@ -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),
+                )
+              )
+          ],
+        ),
+      ),
+    );
+  }
+}