fix: some list icons don't align with the paragraph (#5439)

This commit is contained in:
Lucas.Xu
2024-05-30 11:58:36 +08:00
committed by GitHub
parent 526de2eb5c
commit a1395cb54a
8 changed files with 37 additions and 22 deletions

View File

@ -55,9 +55,8 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
configuration: configuration.copyWith(
placeholderText: (_) => LocaleKeys.blockPlaceholders_todoList.tr(),
),
iconBuilder: PlatformExtension.isMobile
? (_, node, onCheck) => TodoListIcon(node: node, onCheck: onCheck)
: null,
iconBuilder: (_, node, onCheck) =>
TodoListIcon(node: node, onCheck: onCheck),
toggleChildrenTriggers: [
LogicalKeyboardKey.shift,
LogicalKeyboardKey.shiftLeft,
@ -68,18 +67,14 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
configuration: configuration.copyWith(
placeholderText: (_) => LocaleKeys.blockPlaceholders_bulletList.tr(),
),
iconBuilder: PlatformExtension.isMobile
? (_, node) => BulletedListIcon(node: node)
: null,
iconBuilder: (_, node) => BulletedListIcon(node: node),
),
NumberedListBlockKeys.type: NumberedListBlockComponentBuilder(
configuration: configuration.copyWith(
placeholderText: (_) => LocaleKeys.blockPlaceholders_numberList.tr(),
),
iconBuilder: PlatformExtension.isMobile
? (_, node, textDirection) =>
NumberedListIcon(node: node, textDirection: textDirection)
: null,
iconBuilder: (_, node, textDirection) =>
NumberedListIcon(node: node, textDirection: textDirection),
),
QuoteBlockKeys.type: QuoteBlockComponentBuilder(
configuration: configuration.copyWith(
@ -169,7 +164,10 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
),
),
CalloutBlockKeys.type: CalloutBlockComponentBuilder(
configuration: configuration,
configuration: configuration.copyWith(
textStyle: (_) => styleCustomizer.calloutBlockStyleBuilder(),
placeholderTextStyle: (_) => styleCustomizer.calloutBlockStyleBuilder(),
),
defaultColor: calloutBGColor,
),
DividerBlockKeys.type: DividerBlockComponentBuilder(

View File

@ -37,7 +37,9 @@ class BulletedListIcon extends StatelessWidget {
@override
Widget build(BuildContext context) {
final iconPadding = context.read<DocumentPageStyleBloc>().state.iconPadding;
final iconPadding = PlatformExtension.isMobile
? context.read<DocumentPageStyleBloc>().state.iconPadding
: 0.0;
return Container(
constraints: const BoxConstraints(
minWidth: 22,

View File

@ -17,7 +17,9 @@ class TodoListIcon extends StatelessWidget {
@override
Widget build(BuildContext context) {
final iconPadding = context.read<DocumentPageStyleBloc>().state.iconPadding;
final iconPadding = PlatformExtension.isMobile
? context.read<DocumentPageStyleBloc>().state.iconPadding
: 0.0;
final checked = node.attributes[TodoListBlockKeys.checked] ?? false;
return GestureDetector(
behavior: HitTestBehavior.opaque,

View File

@ -1,5 +1,3 @@
import 'dart:math';
import 'package:appflowy/core/helpers/url_launcher.dart';
import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
@ -60,6 +58,9 @@ class EditorStyleCustomizer {
DefaultAppearanceSettings.getDefaultSelectionColor(context),
defaultTextDirection: appearance.defaultTextDirection,
textStyleConfiguration: TextStyleConfiguration(
lineHeight: 1.2,
applyHeightToFirstAscent: true,
applyHeightToLastDescent: true,
text: baseTextStyle(fontFamily).copyWith(
fontSize: fontSize,
color: afThemeExtension.onBackground,
@ -80,7 +81,7 @@ class EditorStyleCustomizer {
),
code: GoogleFonts.robotoMono(
textStyle: baseTextStyle(fontFamily).copyWith(
fontSize: fontSize - 2,
fontSize: fontSize,
fontWeight: FontWeight.normal,
color: Colors.red,
backgroundColor: theme.colorScheme.inverseSurface.withOpacity(0.8),
@ -105,7 +106,6 @@ class EditorStyleCustomizer {
final textScaleFactor =
context.read<AppearanceSettingsCubit>().state.textScaleFactor;
final baseTextStyle = this.baseTextStyle(fontFamily);
final codeFontSize = max(0.0, fontSize - 2);
return EditorStyle.mobile(
padding: padding,
defaultTextDirection: defaultTextDirection,
@ -127,7 +127,7 @@ class EditorStyleCustomizer {
),
code: GoogleFonts.robotoMono(
textStyle: baseTextStyle.copyWith(
fontSize: codeFontSize,
fontSize: fontSize,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
color: Colors.red,
@ -183,6 +183,14 @@ class EditorStyleCustomizer {
);
}
TextStyle calloutBlockStyleBuilder() {
final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
return baseTextStyle(null).copyWith(
fontSize: fontSize,
height: 1.5,
);
}
TextStyle outlineBlockPlaceholderStyleBuilder() {
final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
return TextStyle(