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

feat: support dark mode for number-list and bulleted-list

Browse Source
This commit is contained in:
Lucas.Xu 2022-10-25 14:40:18 +08:00
parent 5a6103f5d6
commit 3fb997af84
4 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/app_flowy/lib/plugins/doc/editor_styles.dart
View File

@ -55,7 +55,25 @@ EditorStyle customEditorStyle(BuildContext context) {
headingToPadding[node.attributes.heading] ?? basePadding;
return EdgeInsets.only(bottom: padding);
},
)
),
'text/number-list': builtInPluginStyle
..addAll(
{
'numberColor': (EditorState editorState, Node node) {
final theme = context.watch<AppTheme>();
return theme.isDark ? Colors.white : Colors.black;
},
},
),
'text/bulleted-list': builtInPluginStyle
..addAll(
{
'bulletColor': (EditorState editorState, Node node) {
final theme = context.watch<AppTheme>();
return theme.isDark ? Colors.white : Colors.black;
},
},
),
},
);
}

13
frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart
View File

@ -64,6 +64,18 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
return super.baseOffset.translate(0, padding.top);
}
Color get bulletColor {
final bulletColor = widget.editorState.editorStyle.style(
widget.editorState,
widget.textNode,
'bulletColor',
);
if (bulletColor is Color) {
return bulletColor;
}
return Colors.black;
}
@override
Widget buildWithSingle(BuildContext context) {
return Padding(
@ -76,6 +88,7 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
width: iconSize?.width,
height: iconSize?.height,
padding: iconPadding,
color: bulletColor,
name: 'point',
),
Flexible(

19
frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart
View File

@ -58,6 +58,18 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
return super.baseOffset.translate(0, padding.top);
}
Color get numberColor {
final numberColor = widget.editorState.editorStyle.style(
widget.editorState,
widget.textNode,
'numberColor',
);
if (numberColor is Color) {
return numberColor;
}
return Colors.black;
}
@override
Widget build(BuildContext context) {
return Padding(
@ -70,8 +82,11 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
padding: iconPadding,
child: Text(
'${widget.textNode.attributes.number.toString()}.',
// FIXME: customize
style: const TextStyle(fontSize: 16.0, color: Colors.black),
style: TextStyle(
fontSize: widget.editorState.editorStyle.textStyle
.defaultTextStyle.fontSize,
color: numberColor,
),
),
),
Flexible(

16
frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart
View File

@ -117,12 +117,20 @@ Map<String, PluginStyle> builtInTextStylers = {
),
'text/bulleted-list': builtInPluginStyle,
'text/number-list': builtInPluginStyle
..update(
'iconPadding',
(_) => (EditorState editorState, Node node) {
..addAll({
'numberColor': (EditorState editorState, Node node) {
return Colors.black;
},
'iconPadding': (EditorState editorState, Node node) {
return const EdgeInsets.only(left: 5.0, right: 5.0);
},
),
}),
'text/bulleted-list': builtInPluginStyle
..addAll({
'bulletColor': (EditorState editorState, Node node) {
return Colors.black;
},
}),
'text/quote': builtInPluginStyle,
'image': builtInPluginStyle,
};