mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
[feat] Allow user to select any Google Font (#2895)
* chore: add label for font selection drop down * chore: add method to set font family * feat: add drop down to setting appearance view * feat: add fontFamily to document appearance cubit * feat: add bloc provider to root for document appearance style * feat: syncFont family from setting appearance dialog * feat: plumbing for font style in editor * fix: add blocprovider before pushing overlay * chore: add kv_keys * fix: use fontFamily in document appearance cubit * fix: remove bloc providers because bloc is supplied in ancestor * fix: remove unecessary bloc provider * chore: add constraints to popover * chore: add translation for search box * feat: add levenshtein for string sort * feat: add search bar view * refactor: levenshtein * chore: add tests for levenshtein algorithm * feat: add unit tests for appearance cubit * fix: analyzer warnings * feat: sort by ascending if query is empty * chore: add test for the font family setting widget * feat: make comparison case insensitive * feat: lazy load with listview.builder Co-authored-by: Yijing Huang <hyj891204@gmail.com> * fix: fonts loaded on open application * fix: checkmark doesn't show * fix: try catch before getFont * fix: clear text editing value on close * fix: remove autofocus for search text field * chore: add tests * feat: use sliver protocol Co-authored-by: Yijing Huang <hyj891204@gmail.com> * fix: avoid using intrinsic height Co-authored-by: Yijing Huang <hyj891204@gmail.com> * fix: extra paren caused build failure * feat: switch order of font family setting --------- Co-authored-by: Yijing Huang <hyj891204@gmail.com>
This commit is contained in:
@ -28,30 +28,32 @@ class EditorStyleCustomizer {
|
||||
EditorStyle desktop() {
|
||||
final theme = Theme.of(context);
|
||||
final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
|
||||
final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
|
||||
return EditorStyle.desktop(
|
||||
padding: padding,
|
||||
backgroundColor: theme.colorScheme.surface,
|
||||
cursorColor: theme.colorScheme.primary,
|
||||
textStyleConfiguration: TextStyleConfiguration(
|
||||
text: TextStyle(
|
||||
fontFamily: 'Poppins',
|
||||
text: baseTextStyle(fontFamily).copyWith(
|
||||
fontSize: fontSize,
|
||||
color: theme.colorScheme.onBackground,
|
||||
height: 1.5,
|
||||
),
|
||||
bold: const TextStyle(
|
||||
fontFamily: 'Poppins-Bold',
|
||||
bold: baseTextStyle(fontFamily).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
italic: const TextStyle(fontStyle: FontStyle.italic),
|
||||
underline: const TextStyle(decoration: TextDecoration.underline),
|
||||
strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
|
||||
href: TextStyle(
|
||||
italic: baseTextStyle(fontFamily).copyWith(fontStyle: FontStyle.italic),
|
||||
underline: baseTextStyle(fontFamily)
|
||||
.copyWith(decoration: TextDecoration.underline),
|
||||
strikethrough:
|
||||
baseTextStyle(fontFamily)
|
||||
.copyWith(decoration: TextDecoration.lineThrough),
|
||||
href: baseTextStyle(fontFamily).copyWith(
|
||||
color: theme.colorScheme.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
code: GoogleFonts.robotoMono(
|
||||
textStyle: TextStyle(
|
||||
textStyle: baseTextStyle(fontFamily).copyWith(
|
||||
fontSize: fontSize,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: Colors.red,
|
||||
@ -66,30 +68,33 @@ class EditorStyleCustomizer {
|
||||
EditorStyle mobile() {
|
||||
final theme = Theme.of(context);
|
||||
final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
|
||||
final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
|
||||
|
||||
return EditorStyle.desktop(
|
||||
padding: padding,
|
||||
backgroundColor: theme.colorScheme.surface,
|
||||
cursorColor: theme.colorScheme.primary,
|
||||
textStyleConfiguration: TextStyleConfiguration(
|
||||
text: TextStyle(
|
||||
fontFamily: 'poppins',
|
||||
text: baseTextStyle(fontFamily).copyWith(
|
||||
fontSize: fontSize,
|
||||
color: theme.colorScheme.onBackground,
|
||||
height: 1.5,
|
||||
),
|
||||
bold: const TextStyle(
|
||||
fontFamily: 'poppins-Bold',
|
||||
bold: baseTextStyle(fontFamily).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
italic: const TextStyle(fontStyle: FontStyle.italic),
|
||||
underline: const TextStyle(decoration: TextDecoration.underline),
|
||||
strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
|
||||
href: TextStyle(
|
||||
italic: baseTextStyle(fontFamily).copyWith(fontStyle: FontStyle.italic),
|
||||
underline: baseTextStyle(fontFamily)
|
||||
.copyWith(decoration: TextDecoration.underline),
|
||||
strikethrough:
|
||||
baseTextStyle(fontFamily)
|
||||
.copyWith(decoration: TextDecoration.lineThrough),
|
||||
href: baseTextStyle(fontFamily).copyWith(
|
||||
color: theme.colorScheme.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
code: GoogleFonts.robotoMono(
|
||||
textStyle: TextStyle(
|
||||
textStyle: baseTextStyle(fontFamily).copyWith(
|
||||
fontSize: fontSize,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: Colors.red,
|
||||
@ -119,8 +124,8 @@ class EditorStyleCustomizer {
|
||||
TextStyle codeBlockStyleBuilder() {
|
||||
final theme = Theme.of(context);
|
||||
final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
|
||||
return TextStyle(
|
||||
fontFamily: 'poppins',
|
||||
final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
|
||||
return baseTextStyle(fontFamily).copyWith(
|
||||
fontSize: fontSize,
|
||||
height: 1.5,
|
||||
color: theme.colorScheme.onBackground,
|
||||
@ -157,6 +162,16 @@ class EditorStyleCustomizer {
|
||||
);
|
||||
}
|
||||
|
||||
TextStyle baseTextStyle(String fontFamily) {
|
||||
try {
|
||||
return GoogleFonts.getFont(
|
||||
fontFamily,
|
||||
);
|
||||
} on Exception {
|
||||
return GoogleFonts.getFont('Poppins');
|
||||
}
|
||||
}
|
||||
|
||||
InlineSpan customizeAttributeDecorator(
|
||||
TextInsert textInsert,
|
||||
TextSpan textSpan,
|
||||
|
@ -1,30 +1,53 @@
|
||||
import 'package:appflowy/core/config/kv_keys.dart';
|
||||
import 'package:bloc/bloc.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
const String _kDocumentAppearanceFontSize = 'kDocumentAppearanceFontSize';
|
||||
|
||||
class DocumentAppearance {
|
||||
const DocumentAppearance({
|
||||
required this.fontSize,
|
||||
required this.fontFamily,
|
||||
});
|
||||
|
||||
final double fontSize;
|
||||
// Will be supported...
|
||||
// final String fontName;
|
||||
final String fontFamily;
|
||||
|
||||
DocumentAppearance copyWith({double? fontSize}) {
|
||||
DocumentAppearance copyWith({
|
||||
double? fontSize,
|
||||
String? fontFamily,
|
||||
}) {
|
||||
return DocumentAppearance(
|
||||
fontSize: fontSize ?? this.fontSize,
|
||||
fontFamily: fontFamily ?? this.fontFamily,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
|
||||
DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 16.0));
|
||||
DocumentAppearanceCubit()
|
||||
: super(const DocumentAppearance(fontSize: 16.0, fontFamily: 'Poppins'));
|
||||
|
||||
void fetch() async {
|
||||
Future<void> fetch() async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
final fontSize = prefs.getDouble(_kDocumentAppearanceFontSize) ?? 16.0;
|
||||
final fontSize =
|
||||
prefs.getDouble(KVKeys.kDocumentAppearanceFontSize) ?? 16.0;
|
||||
final fontFamily =
|
||||
prefs.getString(KVKeys.kDocumentAppearanceFontFamily) ?? 'Poppins';
|
||||
|
||||
if (isClosed) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit(
|
||||
state.copyWith(
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> syncFontSize(double fontSize) async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
prefs.setDouble(KVKeys.kDocumentAppearanceFontSize, fontSize);
|
||||
|
||||
if (isClosed) {
|
||||
return;
|
||||
@ -37,9 +60,9 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
|
||||
);
|
||||
}
|
||||
|
||||
void syncFontSize(double fontSize) async {
|
||||
Future<void> syncFontFamily(String fontFamily) async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
prefs.setDouble(_kDocumentAppearanceFontSize, fontSize);
|
||||
prefs.setString(KVKeys.kDocumentAppearanceFontFamily, fontFamily);
|
||||
|
||||
if (isClosed) {
|
||||
return;
|
||||
@ -47,7 +70,7 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
|
||||
|
||||
emit(
|
||||
state.copyWith(
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user