Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor font size design

Browse Source
This commit is contained in:
Lucas.Xu 2022-12-06 18:36:22 +08:00
parent 64ee3140a3
commit 4da786a439
3 changed files with 52 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app_flowy/lib/plugins/document/editor_styles.dart
View File

@ -4,8 +4,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
EditorStyle customEditorTheme(BuildContext context) { EditorStyle customEditorTheme(BuildContext context) {
final documentStyle = final documentStyle = context.watch<DocumentAppearanceCubit>().state;
context.watch<DocumentAppearanceCubit>().documentAppearance;
var editorStyle = Theme.of(context).brightness == Brightness.dark var editorStyle = Theme.of(context).brightness == Brightness.dark
? EditorStyle.dark ? EditorStyle.dark
: EditorStyle.light; : EditorStyle.light;
@ -29,8 +28,7 @@ EditorStyle customEditorTheme(BuildContext context) {
} }
Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) { Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
final documentStyle = final documentStyle = context.watch<DocumentAppearanceCubit>().state;
context.watch<DocumentAppearanceCubit>().documentAppearance;
final baseFontSize = documentStyle.fontSize; final baseFontSize = documentStyle.fontSize;
const basePadding = 12.0; const basePadding = 12.0;
var headingPluginStyle = Theme.of(context).brightness == Brightness.dark var headingPluginStyle = Theme.of(context).brightness == Brightness.dark

16
frontend/app_flowy/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart
View File

@ -22,19 +22,19 @@ class DocumentAppearance {
class DocumentAppearanceCubit extends Cubit<DocumentAppearance> { class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 14.0)); DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 14.0));
late DocumentAppearance documentAppearance;
void fetch() async { void fetch() async {
final prefs = await SharedPreferences.getInstance(); final prefs = await SharedPreferences.getInstance();
final fontSize = prefs.getDouble(_kDocumentAppearenceFontSize) ?? 14.0; final fontSize = prefs.getDouble(_kDocumentAppearenceFontSize) ?? 14.0;
documentAppearance = DocumentAppearance(fontSize: fontSize); emit(state.copyWith(
emit(documentAppearance); fontSize: fontSize,
));
} }
void sync(DocumentAppearance documentAppearance) async { void syncFontSize(double fontSize) async {
final prefs = await SharedPreferences.getInstance(); final prefs = await SharedPreferences.getInstance();
prefs.setDouble(_kDocumentAppearenceFontSize, documentAppearance.fontSize); prefs.setDouble(_kDocumentAppearenceFontSize, fontSize);
this.documentAppearance = documentAppearance; emit(state.copyWith(
emit(documentAppearance); fontSize: fontSize,
));
} }
} }

44
frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart
View File

@ -2,7 +2,7 @@ import 'package:app_flowy/plugins/document/presentation/more/cubit/document_appe
import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:provider/provider.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tuple/tuple.dart'; import 'package:tuple/tuple.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
@ -16,25 +16,16 @@ class FontSizeSwitcher extends StatefulWidget {
} }
class _FontSizeSwitcherState extends State<FontSizeSwitcher> { class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
final List<bool> _selectedFontSizes = [false, true, false]; final List<Tuple3<String, double, bool>> _fontSizes = [
final List<Tuple2<String, double>> _fontSizes = [ Tuple3(LocaleKeys.moreAction_small.tr(), 12.0, false),
Tuple2(LocaleKeys.moreAction_small.tr(), 12.0), Tuple3(LocaleKeys.moreAction_medium.tr(), 14.0, true),
Tuple2(LocaleKeys.moreAction_medium.tr(), 14.0), Tuple3(LocaleKeys.moreAction_large.tr(), 18.0, false),
Tuple2(LocaleKeys.moreAction_large.tr(), 18.0),
]; ];
@override
void initState() {
super.initState();
final fontSize =
context.read<DocumentAppearanceCubit>().documentAppearance.fontSize;
final index = _fontSizes.indexWhere((element) => element.item2 == fontSize);
_updateSelectedFontSize(index);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
builder: (context, state) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -46,10 +37,10 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
height: 5, height: 5,
), ),
ToggleButtons( ToggleButtons(
isSelected: _selectedFontSizes, isSelected:
_fontSizes.map((e) => e.item2 == state.fontSize).toList(),
onPressed: (int index) { onPressed: (int index) {
_updateSelectedFontSize(index); _updateSelectedFontSize(_fontSizes[index].item2);
_sync(index);
}, },
borderRadius: const BorderRadius.all(Radius.circular(5)), borderRadius: const BorderRadius.all(Radius.circular(5)),
selectedBorderColor: Theme.of(context).colorScheme.primaryContainer, selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
@ -69,21 +60,10 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
), ),
], ],
); );
}
void _updateSelectedFontSize(int index) {
setState(() {
for (int i = 0; i < _selectedFontSizes.length; i++) {
_selectedFontSizes[i] = i == index;
}
}); });
} }
void _sync(int index) { void _updateSelectedFontSize(double fontSize) {
if (index < 0 || index >= _fontSizes.length) return; context.read<DocumentAppearanceCubit>().syncFontSize(fontSize);
final fontSize = _fontSizes[index].item2;
final cubit = context.read<DocumentAppearanceCubit>();
final documentAppearance = cubit.documentAppearance;
cubit.sync(documentAppearance.copyWith(fontSize: fontSize));
} }
} }