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

Merge pull request #1541 from LucasXu0/refactor_font_size

Browse Source 
chore: refactor font size design
This commit is contained in:
Lucas.Xu 2022-12-06 19:14:14 +08:00 committed by GitHub
commit c64b83c2d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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,
));
} }
} }

104
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,74 +16,54 @@ 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 Column( return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
crossAxisAlignment: CrossAxisAlignment.start, builder: (context, state) {
children: [ return Column(
FlowyText.semibold( crossAxisAlignment: CrossAxisAlignment.start,
LocaleKeys.moreAction_fontSize.tr(), children: [
fontSize: 12, FlowyText.semibold(
), LocaleKeys.moreAction_fontSize.tr(),
const SizedBox( fontSize: 12,
height: 5,
),
ToggleButtons(
isSelected: _selectedFontSizes,
onPressed: (int index) {
_updateSelectedFontSize(index);
_sync(index);
},
borderRadius: const BorderRadius.all(Radius.circular(5)),
selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
selectedColor: Theme.of(context).colorScheme.onSurface,
fillColor: Theme.of(context).colorScheme.primaryContainer,
color: Theme.of(context).hintColor,
constraints: const BoxConstraints(
minHeight: 40.0,
minWidth: 80.0,
), ),
children: _fontSizes const SizedBox(
.map((e) => Text( height: 5,
e.item1, ),
style: TextStyle(fontSize: e.item2), ToggleButtons(
)) isSelected:
.toList(), _fontSizes.map((e) => e.item2 == state.fontSize).toList(),
), onPressed: (int index) {
], _updateSelectedFontSize(_fontSizes[index].item2);
); },
} borderRadius: const BorderRadius.all(Radius.circular(5)),
selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
void _updateSelectedFontSize(int index) { selectedColor: Theme.of(context).colorScheme.onSurface,
setState(() { fillColor: Theme.of(context).colorScheme.primaryContainer,
for (int i = 0; i < _selectedFontSizes.length; i++) { color: Theme.of(context).hintColor,
_selectedFontSizes[i] = i == index; constraints: const BoxConstraints(
} minHeight: 40.0,
minWidth: 80.0,
),
children: _fontSizes
.map((e) => Text(
e.item1,
style: TextStyle(fontSize: e.item2),
))
.toList(),
),
],
);
}); });
} }
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));
} }
} }