diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_slider.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_slider.dart new file mode 100644 index 0000000000..513833b82b --- /dev/null +++ b/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( + 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() + .syncFontSize(fontSize), + ), + ), + ), + const HSpace(6), + const FlowyText('A', fontSize: 20), + ], + ), + ); + }, + ); + } +} diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart deleted file mode 100644 index 5242db91e0..0000000000 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart +++ /dev/null @@ -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 createState() => _FontSizeSwitcherState(); -} - -class _FontSizeSwitcherState extends State { - 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( - 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().syncFontSize(fontSize); - } -} diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart index 016129e615..338e1bf429 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart +++ b/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(), - child: const FontSizeSwitcher(), - ), - ], - ), - ); - }, ); } } diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index 93842e59c2..83afac352b 100644 --- a/frontend/resources/translations/en.json +++ b/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" },