fix: #1732 the actions of an image look different than the ones of a code block

This commit is contained in:
Lucas.Xu 2023-01-27 17:10:47 +08:00
parent 243a781b6c
commit baa5d0c59b
5 changed files with 75 additions and 10 deletions

View File

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 4.3999H4.11111H13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.77799 4.4V3.2C5.77799 2.88174 5.89506 2.57652 6.10343 2.35147C6.31181 2.12643 6.59442 2 6.88911 2H9.11133C9.40601 2 9.68863 2.12643 9.897 2.35147C10.1054 2.57652 10.2224 2.88174 10.2224 3.2V4.4M11.8891 4.4V12.8C11.8891 13.1183 11.772 13.4235 11.5637 13.6485C11.3553 13.8736 11.0727 14 10.778 14H5.22244C4.92775 14 4.64514 13.8736 4.43676 13.6485C4.22839 13.4235 4.11133 13.1183 4.11133 12.8V4.4H11.8891Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.88867 7.3999V10.9999" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.11133 7.3999V10.9999" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 875 B

View File

@ -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

View File

@ -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 =
'<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><text x="30" y="150" fill="black" font-size="160">$number.</text></svg>';
return SvgPicture.string(
numberText,
width: width ?? _defaultWidth,
height: height ?? _defaultHeight,
);
}
return Container();
}
}

View File

@ -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

View File

@ -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