Sfoglia il codice sorgente

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

Lucas.Xu 2 anni fa
parent
commit
baa5d0c59b

+ 6 - 0
frontend/app_flowy/packages/appflowy_editor_plugins/assets/images/delete.svg

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

+ 5 - 3
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

+ 54 - 0
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 =
+          '<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();
+  }
+}

+ 5 - 3
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

+ 5 - 4
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