Selaa lähdekoodia

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

Lucas.Xu 2 vuotta sitten
vanhempi
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/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/src/infra/svg.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/material.dart';
 import 'package:highlight/highlight.dart' as highlight;
 import 'package:highlight/highlight.dart' as highlight;
 import 'package:highlight/languages/all.dart';
 import 'package:highlight/languages/all.dart';
@@ -141,10 +142,11 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
       top: -5,
       top: -5,
       right: -5,
       right: -5,
       child: IconButton(
       child: IconButton(
-        icon: Icon(
-          Icons.delete_forever_outlined,
+        icon: Svg(
+          name: 'delete',
           color: widget.editorState.editorStyle.selectionMenuItemIconColor,
           color: widget.editorState.editorStyle.selectionMenuItemIconColor,
-          size: 16,
+          width: 16,
+          height: 16,
         ),
         ),
         onPressed: () {
         onPressed: () {
           final transaction = widget.editorState.transaction
           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/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/src/infra/svg.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_math_fork/flutter_math.dart';
 import 'package:flutter_math_fork/flutter_math.dart';
@@ -141,10 +142,11 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
       top: -5,
       top: -5,
       right: -5,
       right: -5,
       child: IconButton(
       child: IconButton(
-        icon: Icon(
-          Icons.delete_forever_outlined,
+        icon: Svg(
+          name: 'delete',
           color: widget.editorState.editorStyle.selectionMenuItemIconColor,
           color: widget.editorState.editorStyle.selectionMenuItemIconColor,
-          size: 16,
+          width: 16,
+          height: 16,
         ),
         ),
         onPressed: () {
         onPressed: () {
           final transaction = widget.editorState.transaction
           final transaction = widget.editorState.transaction

+ 5 - 4
frontend/app_flowy/packages/appflowy_editor_plugins/pubspec.yaml

@@ -12,13 +12,14 @@ environment:
 dependencies:
 dependencies:
   flutter:
   flutter:
     sdk: flutter
     sdk: flutter
-  appflowy_editor: 
+  appflowy_editor:
     path: ../appflowy_editor
     path: ../appflowy_editor
-  flowy_infra_ui: 
+  flowy_infra_ui:
     path: ../flowy_infra_ui
     path: ../flowy_infra_ui
   flutter_math_fork: ^0.6.3+1
   flutter_math_fork: ^0.6.3+1
   highlight: ^0.7.0
   highlight: ^0.7.0
   shared_preferences: ^2.0.15
   shared_preferences: ^2.0.15
+  flutter_svg: ^1.1.1+1
 
 
 dev_dependencies:
 dev_dependencies:
   flutter_test:
   flutter_test:
@@ -32,8 +33,8 @@ dev_dependencies:
 flutter:
 flutter:
 
 
   # To add assets to your package, add an assets section, like this:
   # 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
   #   - images/a_dot_ham.jpeg
   #
   #
   # For details regarding assets in packages, see
   # For details regarding assets in packages, see