From baa5d0c59bff6324a1b5943c312492b9fa543a47 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Fri, 27 Jan 2023 17:10:47 +0800 Subject: [PATCH] fix: #1732 the actions of an image look different than the ones of a code block --- .../assets/images/delete.svg | 6 +++ .../code_block/code_block_node_widget.dart | 8 +-- .../lib/src/infra/svg.dart | 54 +++++++++++++++++++ .../math_equation_node_widget.dart | 8 +-- .../appflowy_editor_plugins/pubspec.yaml | 9 ++-- 5 files changed, 75 insertions(+), 10 deletions(-) create mode 100644 frontend/app_flowy/packages/appflowy_editor_plugins/assets/images/delete.svg create mode 100644 frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/infra/svg.dart diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/assets/images/delete.svg b/frontend/app_flowy/packages/appflowy_editor_plugins/assets/images/delete.svg new file mode 100644 index 0000000000..5a3d972872 --- /dev/null +++ b/frontend/app_flowy/packages/appflowy_editor_plugins/assets/images/delete.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart index 73676ee95d..bcc30e0c3b 100644 --- a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart +++ b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart @@ -1,4 +1,5 @@ import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:appflowy_editor_plugins/src/infra/svg.dart'; import 'package:flutter/material.dart'; import 'package:highlight/highlight.dart' as highlight; import 'package:highlight/languages/all.dart'; @@ -141,10 +142,11 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge> top: -5, right: -5, child: IconButton( - icon: Icon( - Icons.delete_forever_outlined, + icon: Svg( + name: 'delete', color: widget.editorState.editorStyle.selectionMenuItemIconColor, - size: 16, + width: 16, + height: 16, ), onPressed: () { final transaction = widget.editorState.transaction diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/infra/svg.dart b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/infra/svg.dart new file mode 100644 index 0000000000..a08a37026c --- /dev/null +++ b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/infra/svg.dart @@ -0,0 +1,54 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; + +class Svg extends StatelessWidget { + const Svg({ + Key? key, + this.name, + this.width, + this.height, + this.color, + this.number, + this.padding, + }) : super(key: key); + + final String? name; + final double? width; + final double? height; + final Color? color; + final int? number; + final EdgeInsets? padding; + + final _defaultWidth = 20.0; + final _defaultHeight = 20.0; + + @override + Widget build(BuildContext context) { + return Padding( + padding: padding ?? const EdgeInsets.all(0), + child: _buildSvg(), + ); + } + + Widget _buildSvg() { + if (name != null) { + return SvgPicture.asset( + 'assets/images/$name.svg', + color: color, + fit: BoxFit.fill, + height: height, + width: width, + package: 'appflowy_editor_plugins', + ); + } else if (number != null) { + final numberText = + '$number.'; + return SvgPicture.string( + numberText, + width: width ?? _defaultWidth, + height: height ?? _defaultHeight, + ); + } + return Container(); + } +} diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart index 76121a1ca9..6892d38ba9 100644 --- a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart +++ b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart @@ -1,4 +1,5 @@ import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:appflowy_editor_plugins/src/infra/svg.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_math_fork/flutter_math.dart'; @@ -141,10 +142,11 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> { top: -5, right: -5, child: IconButton( - icon: Icon( - Icons.delete_forever_outlined, + icon: Svg( + name: 'delete', color: widget.editorState.editorStyle.selectionMenuItemIconColor, - size: 16, + width: 16, + height: 16, ), onPressed: () { final transaction = widget.editorState.transaction diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/pubspec.yaml b/frontend/app_flowy/packages/appflowy_editor_plugins/pubspec.yaml index ccd37fb96f..a68a92818c 100644 --- a/frontend/app_flowy/packages/appflowy_editor_plugins/pubspec.yaml +++ b/frontend/app_flowy/packages/appflowy_editor_plugins/pubspec.yaml @@ -12,13 +12,14 @@ environment: dependencies: flutter: sdk: flutter - appflowy_editor: + appflowy_editor: path: ../appflowy_editor - flowy_infra_ui: + flowy_infra_ui: path: ../flowy_infra_ui flutter_math_fork: ^0.6.3+1 highlight: ^0.7.0 shared_preferences: ^2.0.15 + flutter_svg: ^1.1.1+1 dev_dependencies: flutter_test: @@ -32,8 +33,8 @@ dev_dependencies: flutter: # To add assets to your package, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg + assets: + - assets/images/ # - images/a_dot_ham.jpeg # # For details regarding assets in packages, see