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/font_size_switcher.dart

@@ -1,92 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
-import 'package:collection/collection.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-
-typedef _FontSizeSelection = (String, double, bool);
-
-class FontSizeSwitcher extends StatefulWidget {
-  const FontSizeSwitcher({
-    super.key,
-  });
-
-  @override
-  State<FontSizeSwitcher> createState() => _FontSizeSwitcherState();
-}
-
-class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
-  final List<_FontSizeSelection> _fontSizes = [
-    (LocaleKeys.moreAction_small.tr(), 14.0, false),
-    (LocaleKeys.moreAction_medium.tr(), 18.0, true),
-    (LocaleKeys.moreAction_large.tr(), 22.0, false),
-  ];
-
-  _FontSizeSelection? _selection;
-
-  @override
-  Widget build(BuildContext context) {
-    final selectedBgColor = AFThemeExtension.of(context).toggleButtonBGColor;
-    final foregroundColor = Theme.of(context).colorScheme.onBackground;
-    return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
-      builder: (context, state) {
-        _selection = _fontSizes.firstWhereOrNull(
-          (element) => element.$2 == state.fontSize,
-        );
-        return Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            FlowyText.semibold(
-              LocaleKeys.moreAction_fontSize.tr(),
-              fontSize: 12,
-              color: Theme.of(context).colorScheme.tertiary,
-            ),
-            const SizedBox(
-              height: 5,
-            ),
-            SegmentedButton<_FontSizeSelection>(
-              showSelectedIcon: false,
-              style: TextButton.styleFrom(
-                foregroundColor: foregroundColor,
-                shadowColor: selectedBgColor.withOpacity(0.3),
-                padding: const EdgeInsets.all(16),
-                side: BorderSide(
-                  width: 0.5,
-                  color: foregroundColor,
-                ),
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(5),
-                ),
-              ),
-              segments: _fontSizes
-                  .map(
-                    (e) => ButtonSegment(
-                      value: e,
-                      label: FlowyText(
-                        e.$1,
-                        fontSize: e.$2,
-                      ),
-                    ),
-                  )
-                  .toList(),
-              selected: {
-                _selection ?? _fontSizes.first,
-              },
-              onSelectionChanged: (Set<(String, double, bool)> newSelection) {
-                _selection = newSelection.firstOrNull;
-                _updateSelectedFontSize(newSelection.first.$2);
-              },
-            ),
-          ],
-        );
-      },
-    );
-  }
-
-  void _updateSelectedFontSize(double fontSize) {
-    context.read<DocumentAppearanceCubit>().syncFontSize(fontSize);
-  }
-}

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_slider.dart';
-import 'package:appflowy/plugins/document/presentation/more/font_size_switcher.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({
+  const DocumentMoreButton({super.key});
-    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",
+    "fontSize": "Font size",
-    "medium": "medium",
-    "large": "large",
-    "fontSize": "Font Size",
     "import": "Import",
     "moreOptions": "More options"
   },