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';
EditorStyle customEditorTheme(BuildContext context) {
final documentStyle =
context.watch<DocumentAppearanceCubit>().documentAppearance;
final documentStyle = context.watch<DocumentAppearanceCubit>().state;
var editorStyle = Theme.of(context).brightness == Brightness.dark
? EditorStyle.dark
: EditorStyle.light;
@ -29,8 +28,7 @@ EditorStyle customEditorTheme(BuildContext context) {
}
Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
final documentStyle =
context.watch<DocumentAppearanceCubit>().documentAppearance;
final documentStyle = context.watch<DocumentAppearanceCubit>().state;
final baseFontSize = documentStyle.fontSize;
const basePadding = 12.0;
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> {
DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 14.0));
late DocumentAppearance documentAppearance;
void fetch() async {
final prefs = await SharedPreferences.getInstance();
final fontSize = prefs.getDouble(_kDocumentAppearenceFontSize) ?? 14.0;
documentAppearance = DocumentAppearance(fontSize: fontSize);
emit(documentAppearance);
emit(state.copyWith(
fontSize: fontSize,
));
}
void sync(DocumentAppearance documentAppearance) async {
void syncFontSize(double fontSize) async {
final prefs = await SharedPreferences.getInstance();
prefs.setDouble(_kDocumentAppearenceFontSize, documentAppearance.fontSize);
this.documentAppearance = documentAppearance;
emit(documentAppearance);
prefs.setDouble(_kDocumentAppearenceFontSize, fontSize);
emit(state.copyWith(
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:flutter/material.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:easy_localization/easy_localization.dart';
@ -16,74 +16,54 @@ class FontSizeSwitcher extends StatefulWidget {
}
class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
final List<bool> _selectedFontSizes = [false, true, false];
final List<Tuple2<String, double>> _fontSizes = [
Tuple2(LocaleKeys.moreAction_small.tr(), 12.0),
Tuple2(LocaleKeys.moreAction_medium.tr(), 14.0),
Tuple2(LocaleKeys.moreAction_large.tr(), 18.0),
final List<Tuple3<String, double, bool>> _fontSizes = [
Tuple3(LocaleKeys.moreAction_small.tr(), 12.0, false),
Tuple3(LocaleKeys.moreAction_medium.tr(), 14.0, true),
Tuple3(LocaleKeys.moreAction_large.tr(), 18.0, false),
];
@override
void initState() {
super.initState();
final fontSize =
context.read<DocumentAppearanceCubit>().documentAppearance.fontSize;
final index = _fontSizes.indexWhere((element) => element.item2 == fontSize);
_updateSelectedFontSize(index);
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlowyText.semibold(
LocaleKeys.moreAction_fontSize.tr(),
fontSize: 12,
),
const SizedBox(
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,
return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
builder: (context, state) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlowyText.semibold(
LocaleKeys.moreAction_fontSize.tr(),
fontSize: 12,
),
children: _fontSizes
.map((e) => Text(
e.item1,
style: TextStyle(fontSize: e.item2),
))
.toList(),
),
],
);
}
void _updateSelectedFontSize(int index) {
setState(() {
for (int i = 0; i < _selectedFontSizes.length; i++) {
_selectedFontSizes[i] = i == index;
}
const SizedBox(
height: 5,
),
ToggleButtons(
isSelected:
_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,
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
.map((e) => Text(
e.item1,
style: TextStyle(fontSize: e.item2),
))
.toList(),
),
],
);
});
}
void _sync(int index) {
if (index < 0 || index >= _fontSizes.length) return;
final fontSize = _fontSizes[index].item2;
final cubit = context.read<DocumentAppearanceCubit>();
final documentAppearance = cubit.documentAppearance;
cubit.sync(documentAppearance.copyWith(fontSize: fontSize));
void _updateSelectedFontSize(double fontSize) {
context.read<DocumentAppearanceCubit>().syncFontSize(fontSize);
}
}