feat: improve more action in document (#4639)

frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_slider.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class FontSizeStepper extends StatelessWidget {
+  const FontSizeStepper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
+      builder: (context, state) {
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 10),
+          child: Row(
+            children: [
+              const FlowyText('A', fontSize: 14),
+              const HSpace(6),
+              Expanded(
+                child: SliderTheme(
+                  data: Theme.of(context).sliderTheme.copyWith(
+                        showValueIndicator: ShowValueIndicator.never,
+                        thumbShape: const RoundSliderThumbShape(
+                          enabledThumbRadius: 8,
+                        ),
+                        overlayShape: const RoundSliderOverlayShape(
+                          overlayRadius: 16,
+                        ),
+                      ),
+                  child: Slider(
+                    value: state.fontSize,
+                    min: 10,
+                    max: 24,
+                    divisions: 8,
+                    onChanged: (fontSize) => context
+                        .read<DocumentAppearanceCubit>()
+                        .syncFontSize(fontSize),
+                  ),
+                ),
+              ),
+              const HSpace(6),
+              const FlowyText('A', fontSize: 20),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart

@@ -1,24 +1,55 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
-import 'package:appflowy/plugins/document/presentation/more/font_size_switcher.dart';
+import 'package:appflowy/plugins/document/presentation/more/font_size_slider.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 
 class DocumentMoreButton extends StatelessWidget {
-  const DocumentMoreButton({
-    super.key,
-  });
+  const DocumentMoreButton({super.key});
 
   @override
   Widget build(BuildContext context) {
     return AppFlowyPopover(
-      constraints: const BoxConstraints(maxWidth: 400, maxHeight: 320),
+      constraints: BoxConstraints.loose(const Size(200, 400)),
       offset: const Offset(0, 30),
+      popupBuilder: (_) {
+        final actions = [
+          AppFlowyPopover(
+            direction: PopoverDirection.leftWithCenterAligned,
+            constraints: const BoxConstraints(maxHeight: 40, maxWidth: 240),
+            offset: const Offset(-10, 0),
+            popupBuilder: (context) => const FontSizeStepper(),
+            child: FlowyButton(
+              text: FlowyText.regular(
+                LocaleKeys.moreAction_fontSize.tr(),
+                color: AFThemeExtension.of(context).textColor,
+              ),
+              leftIcon: Icon(
+                Icons.format_size_sharp,
+                color: Theme.of(context).iconTheme.color,
+                size: 18,
+              ),
+              leftIconSize: const Size(18, 18),
+              hoverColor: AFThemeExtension.of(context).lightGreyHover,
+            ),
+          ),
+        ];
+
+        return ListView.separated(
+          shrinkWrap: true,
+          padding: EdgeInsets.zero,
+          itemCount: actions.length,
+          separatorBuilder: (_, __) => const VSpace(4),
+          physics: StyledScrollPhysics(),
+          itemBuilder: (_, index) => actions[index],
+        );
+      },
       child: FlowyTooltip(
         message: LocaleKeys.moreAction_moreOptions.tr(),
         child: FlowyHover(
@@ -32,20 +63,6 @@ class DocumentMoreButton extends StatelessWidget {
           ),
         ),
       ),
-      popupBuilder: (context) {
-        return Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              BlocProvider.value(
-                value: context.read<DocumentAppearanceCubit>(),
-                child: const FontSizeSwitcher(),
-              ),
-            ],
-          ),
-        );
-      },
     );
   }
 }

frontend/resources/translations/en.json

@@ -73,10 +73,7 @@
     "copyLink": "Copy Link"
   },
   "moreAction": {
-    "small": "small",
-    "medium": "medium",
-    "large": "large",
-    "fontSize": "Font Size",
+    "fontSize": "Font size",
     "import": "Import",
     "moreOptions": "More options"
   },