浏览代码

feat: add clear icon into link menu

Lucas.Xu 2 年之前
父节点
当前提交
a2c4f73e7d

+ 5 - 0
frontend/app_flowy/packages/appflowy_editor/assets/images/clear.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="#F2F2F2"/>
+<path d="M6 6L10 10" stroke="#BDBDBD" stroke-linecap="round"/>
+<path d="M10 6L6 10" stroke="#BDBDBD" stroke-linecap="round"/>
+</svg>

+ 16 - 5
frontend/app_flowy/packages/appflowy_editor/lib/src/render/link_menu/link_menu.dart

@@ -100,15 +100,26 @@ class _LinkMenuState extends State<LinkMenu> {
       textAlign: TextAlign.left,
       controller: _textEditingController,
       onSubmitted: widget.onSubmitted,
-      decoration: const InputDecoration(
+      decoration: InputDecoration(
         hintText: 'URL',
-        hintStyle: TextStyle(fontSize: 14.0),
-        border: OutlineInputBorder(
+        hintStyle: const TextStyle(fontSize: 14.0),
+        contentPadding: const EdgeInsets.all(16.0),
+        isDense: true,
+        suffixIcon: IconButton(
+          padding: const EdgeInsets.all(4.0),
+          icon: const FlowySvg(
+            name: 'clear',
+            width: 24,
+            height: 24,
+          ),
+          onPressed: () {
+            _textEditingController.clear();
+          },
+        ),
+        border: const OutlineInputBorder(
           borderRadius: BorderRadius.all(Radius.circular(12.0)),
           borderSide: BorderSide(color: Color(0xFFBDBDBD)),
         ),
-        contentPadding: EdgeInsets.all(16.0),
-        isDense: true,
       ),
     );
   }