diff --git a/frontend/app_flowy/lib/plugins/document/document.dart b/frontend/app_flowy/lib/plugins/document/document.dart index 7f38db17b7..0d0107b23c 100644 --- a/frontend/app_flowy/lib/plugins/document/document.dart +++ b/frontend/app_flowy/lib/plugins/document/document.dart @@ -12,6 +12,7 @@ import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; +import 'package:shared_preferences/shared_preferences.dart'; class DocumentPluginBuilder extends PluginBuilder { @override @@ -37,7 +38,9 @@ class DocumentPluginBuilder extends PluginBuilder { } class DocumentStyle with ChangeNotifier { - DocumentStyle(); + DocumentStyle() { + sync(); + } double _fontSize = 14.0; double get fontSize => _fontSize; @@ -45,6 +48,11 @@ class DocumentStyle with ChangeNotifier { _fontSize = fontSize; notifyListeners(); } + + void sync() async { + final prefs = await SharedPreferences.getInstance(); + fontSize = prefs.getDouble('kSelectFontSize') ?? _fontSize; + } } class DocumentPlugin extends Plugin { diff --git a/frontend/app_flowy/lib/plugins/document/editor_styles.dart b/frontend/app_flowy/lib/plugins/document/editor_styles.dart index ecd75838e2..e001622700 100644 --- a/frontend/app_flowy/lib/plugins/document/editor_styles.dart +++ b/frontend/app_flowy/lib/plugins/document/editor_styles.dart @@ -28,13 +28,13 @@ EditorStyle customEditorTheme(BuildContext context) { Iterable> customPluginTheme(BuildContext context) { final documentStyle = context.watch(); + final baseFontSize = documentStyle.fontSize; const basePadding = 12.0; var headingPluginStyle = Theme.of(context).brightness == Brightness.dark ? HeadingPluginStyle.dark : HeadingPluginStyle.light; headingPluginStyle = headingPluginStyle.copyWith( textStyle: (EditorState editorState, Node node) { - final baseFontSize = documentStyle.fontSize; final headingToFontSize = { 'h1': baseFontSize + 12, 'h2': baseFontSize + 8, @@ -60,10 +60,28 @@ Iterable> customPluginTheme(BuildContext context) { return EdgeInsets.only(bottom: padding); }, ); + var numberListPluginStyle = Theme.of(context).brightness == Brightness.dark + ? NumberListPluginStyle.dark + : NumberListPluginStyle.light; + + numberListPluginStyle = numberListPluginStyle.copyWith( + icon: (_, textNode) { + const iconPadding = EdgeInsets.only(left: 5.0, right: 5.0); + return Container( + padding: iconPadding, + child: Text( + '${textNode.attributes.number.toString()}.', + style: customEditorTheme(context).textStyle, + ), + ); + }, + ); final pluginTheme = Theme.of(context).brightness == Brightness.dark ? darkPlguinStyleExtension : lightPlguinStyleExtension; return pluginTheme.toList() - ..removeWhere((element) => element is HeadingPluginStyle) - ..add(headingPluginStyle); + ..removeWhere((element) => + element is HeadingPluginStyle || element is NumberListPluginStyle) + ..add(headingPluginStyle) + ..add(numberListPluginStyle); } diff --git a/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart b/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart index af5858c851..d27a60a810 100644 --- a/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart +++ b/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart @@ -3,8 +3,9 @@ import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flutter/material.dart'; import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:provider/provider.dart'; -import 'package:easy_localization/easy_localization.dart'; +import 'package:shared_preferences/shared_preferences.dart'; import 'package:tuple/tuple.dart'; +import 'package:easy_localization/easy_localization.dart'; class FontSizeSwitcher extends StatefulWidget { const FontSizeSwitcher({ @@ -15,14 +16,29 @@ class FontSizeSwitcher extends StatefulWidget { State createState() => _FontSizeSwitcherState(); } +const String _kSelectFontSize = 'kSelectFontSize'; + class _FontSizeSwitcherState extends State { - final _selectedFontSizes = [false, true, false]; + final List _selectedFontSizes = [false, true, false]; final List> _fontSizes = [ Tuple2(LocaleKeys.moreAction_small.tr(), 12.0), Tuple2(LocaleKeys.moreAction_medium.tr(), 14.0), Tuple2(LocaleKeys.moreAction_large.tr(), 18.0), ]; + @override + void initState() { + super.initState(); + + SharedPreferences.getInstance().then((prefs) { + final index = _fontSizes.indexWhere( + (element) => element.item2 == prefs.getDouble(_kSelectFontSize)); + if (index != -1) { + _updateSelectedFontSize(index); + } + }); + } + @override Widget build(BuildContext context) { return Column( @@ -38,12 +54,7 @@ class _FontSizeSwitcherState extends State { ToggleButtons( isSelected: _selectedFontSizes, onPressed: (int index) { - setState(() { - for (int i = 0; i < _selectedFontSizes.length; i++) { - _selectedFontSizes[i] = i == index; - } - context.read().fontSize = _fontSizes[index].item2; - }); + _updateSelectedFontSize(index); }, borderRadius: const BorderRadius.all(Radius.circular(5)), selectedBorderColor: Theme.of(context).colorScheme.primaryContainer, @@ -54,22 +65,27 @@ class _FontSizeSwitcherState extends State { minHeight: 40.0, minWidth: 80.0, ), - children: const [ - Text( - 'small', - style: TextStyle(fontSize: 12), - ), - Text( - 'medium', - style: TextStyle(fontSize: 14), - ), - Text( - 'large', - style: TextStyle(fontSize: 18), - ) - ], - ) + children: _fontSizes + .map((e) => Text( + e.item1, + style: TextStyle(fontSize: e.item2), + )) + .toList(), + ), ], ); } + + void _updateSelectedFontSize(int index) { + final fontSize = _fontSizes[index].item2; + context.read().fontSize = fontSize; + SharedPreferences.getInstance().then( + (prefs) => prefs.setDouble(_kSelectFontSize, fontSize), + ); + setState(() { + for (int i = 0; i < _selectedFontSizes.length; i++) { + _selectedFontSizes[i] = i == index; + } + }); + } } diff --git a/frontend/app_flowy/lib/plugins/document/presentation/more/more_button.dart b/frontend/app_flowy/lib/plugins/document/presentation/more/more_button.dart index 3ee0a867e0..1dc5047584 100644 --- a/frontend/app_flowy/lib/plugins/document/presentation/more/more_button.dart +++ b/frontend/app_flowy/lib/plugins/document/presentation/more/more_button.dart @@ -28,7 +28,11 @@ class DocumentMoreButton extends StatelessWidget { ) ]; }, - child: svgWithSize('editor/details', const Size(18, 18)), + child: svgWidget( + 'editor/details', + size: const Size(18, 18), + color: Theme.of(context).colorScheme.onSurface, + ), ); } } diff --git a/frontend/app_flowy/packages/flowy_infra/lib/image.dart b/frontend/app_flowy/packages/flowy_infra/lib/image.dart index e70c8b4bff..21ef1a2970 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/image.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/image.dart @@ -1,15 +1,26 @@ import 'package:flutter/widgets.dart'; import 'package:flutter_svg/flutter_svg.dart'; -Widget svgWidget(String name, {Color? color}) { - final Widget svg = SvgPicture.asset('assets/images/$name.svg', color: color); - - return svg; -} - Widget svgWithSize(String name, Size size) { return SizedBox.fromSize( size: size, child: svgWidget(name), ); } + +Widget svgWidget(String name, {Size? size, Color? color}) { + if (size != null) { + return SizedBox.fromSize( + size: size, + child: _svgWidget(name, color: color), + ); + } else { + return _svgWidget(name, color: color); + } +} + +Widget _svgWidget(String name, {Color? color}) { + final Widget svg = SvgPicture.asset('assets/images/$name.svg', color: color); + + return svg; +}