chore: refactor mobile toolbar and divider block component (AppFlowy-…

…IO#583) * feat: adjust toggle list block * chore: refactor mobile toolbar and divider block component * chore: adjust indentation padding in block component configuration and indent command test
JaymoCodes · Nov 8, 2023 · 50117b6 · 50117b6
1 parent a47fc6f
commit 50117b6
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 33 deletions.
diff --git a/lib/src/editor/block_component/base_component/block_component_configuration.dart b/lib/src/editor/block_component/base_component/block_component_configuration.dart
@@ -71,9 +71,9 @@ EdgeInsets _padding(Node node) {
 EdgeInsets _indentPadding(Node node, TextDirection textDirection) {
   switch (textDirection) {
     case TextDirection.ltr:
-      return const EdgeInsets.only(left: 30.0);
+      return const EdgeInsets.only(left: 24.0);
     case TextDirection.rtl:
-      return const EdgeInsets.only(right: 30.0);
+      return const EdgeInsets.only(right: 24.0);
   }
 }
 

diff --git a/lib/src/editor/block_component/base_component/widget/nested_list_widget.dart b/lib/src/editor/block_component/base_component/widget/nested_list_widget.dart
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 class NestedListWidget extends StatelessWidget {
   const NestedListWidget({
     super.key,
-    this.indentPadding = const EdgeInsets.only(left: 30),
+    this.indentPadding = const EdgeInsets.only(left: 28),
     required this.child,
     required this.children,
   });

diff --git a/lib/src/editor/block_component/divider_block_component/divider_block_component.dart b/lib/src/editor/block_component/divider_block_component/divider_block_component.dart
@@ -15,15 +15,23 @@ Node dividerNode() {
   );
 }
 
+typedef DividerBlockWrapper = Widget Function(
+  BuildContext context,
+  Node node,
+  Widget child,
+);
+
 class DividerBlockComponentBuilder extends BlockComponentBuilder {
   DividerBlockComponentBuilder({
     super.configuration,
     this.lineColor = Colors.grey,
     this.height = 10,
+    this.wrapper,
   });
 
   final Color lineColor;
   final double height;
+  final DividerBlockWrapper? wrapper;
 
   @override
   BlockComponentWidget build(BlockComponentContext blockComponentContext) {
@@ -34,6 +42,7 @@ class DividerBlockComponentBuilder extends BlockComponentBuilder {
       configuration: configuration,
       lineColor: lineColor,
       height: height,
+      wrapper: wrapper,
       showActions: showActions(node),
       actionBuilder: (context, state) => actionBuilder(
         blockComponentContext,
@@ -55,10 +64,12 @@ class DividerBlockComponentWidget extends BlockComponentStatefulWidget {
     super.configuration = const BlockComponentConfiguration(),
     this.lineColor = Colors.grey,
     this.height = 10,
+    this.wrapper,
   });
 
   final Color lineColor;
   final double height;
+  final DividerBlockWrapper? wrapper;
 
   @override
   State<DividerBlockComponentWidget> createState() =>
@@ -119,6 +130,10 @@ class _DividerBlockComponentWidgetState
       );
     }
 
+    if (widget.wrapper != null) {
+      child = widget.wrapper!(context, node, child);
+    }
+
     return child;
   }
 

diff --git a/lib/src/editor/toolbar/mobile/mobile_toolbar.dart b/lib/src/editor/toolbar/mobile/mobile_toolbar.dart
@@ -52,29 +52,31 @@ class MobileToolbar extends StatelessWidget {
         if (selection == null) {
           return const SizedBox.shrink();
         }
-        return MobileToolbarStyle(
-          backgroundColor: backgroundColor,
-          foregroundColor: foregroundColor,
-          clearDiagonalLineColor: clearDiagonalLineColor,
-          itemHighlightColor: itemHighlightColor,
-          itemOutlineColor: itemOutlineColor,
-          tabbarSelectedBackgroundColor: tabbarSelectedBackgroundColor,
-          tabbarSelectedForegroundColor: tabbarSelectedForegroundColor,
-          primaryColor: primaryColor,
-          onPrimaryColor: onPrimaryColor,
-          outlineColor: outlineColor,
-          toolbarHeight: toolbarHeight,
-          borderRadius: borderRadius,
-          buttonHeight: buttonHeight,
-          buttonSpacing: buttonSpacing,
-          buttonBorderWidth: buttonBorderWidth,
-          buttonSelectedBorderWidth: buttonSelectedBorderWidth,
-          child: MobileToolbarWidget(
-            // Use selection as key to force rebuild toolbar widget when selection changed.
-            // key: ValueKey(selection),
-            editorState: editorState,
-            selection: selection,
-            toolbarItems: toolbarItems,
+        return RepaintBoundary(
+          child: MobileToolbarStyle(
+            backgroundColor: backgroundColor,
+            foregroundColor: foregroundColor,
+            clearDiagonalLineColor: clearDiagonalLineColor,
+            itemHighlightColor: itemHighlightColor,
+            itemOutlineColor: itemOutlineColor,
+            tabbarSelectedBackgroundColor: tabbarSelectedBackgroundColor,
+            tabbarSelectedForegroundColor: tabbarSelectedForegroundColor,
+            primaryColor: primaryColor,
+            onPrimaryColor: onPrimaryColor,
+            outlineColor: outlineColor,
+            toolbarHeight: toolbarHeight,
+            borderRadius: borderRadius,
+            buttonHeight: buttonHeight,
+            buttonSpacing: buttonSpacing,
+            buttonBorderWidth: buttonBorderWidth,
+            buttonSelectedBorderWidth: buttonSelectedBorderWidth,
+            child: MobileToolbarWidget(
+              // Use selection as key to force rebuild toolbar widget when selection changed.
+              // key: ValueKey(selection),
+              editorState: editorState,
+              selection: selection,
+              toolbarItems: toolbarItems,
+            ),
           ),
         );
       },

diff --git a/test/new/service/shortcuts/command_shortcut_events/indent_command_test.dart b/test/new/service/shortcuts/command_shortcut_events/indent_command_test.dart
@@ -4,6 +4,8 @@ import 'package:flutter_test/flutter_test.dart';
 
 import '../../../infra/testable_editor.dart';
 
+const _padding = 24.0;
+
 void main() async {
   group('indentCommand - widget test indent padding', () {
     testWidgets("indent LTR line under LTR line", (tester) async {
@@ -17,7 +19,7 @@ void main() async {
       final nestedBlock = node.key.currentState!
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
-      expect(nestedBlock?.indentPadding.left, 30);
+      expect(nestedBlock?.indentPadding.left, _padding);
       expect(nestedBlock?.indentPadding.right, 0);
 
       await editor.dispose();
@@ -34,7 +36,7 @@ void main() async {
       final nestedBlock = node.key.currentState!
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
-      expect(nestedBlock?.indentPadding.left, 30);
+      expect(nestedBlock?.indentPadding.left, _padding);
       expect(nestedBlock?.indentPadding.right, 0);
 
       await editor.dispose();
@@ -55,7 +57,7 @@ void main() async {
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
       expect(nestedBlock?.indentPadding.left, 0);
-      expect(nestedBlock?.indentPadding.right, 30);
+      expect(nestedBlock?.indentPadding.right, _padding);
 
       await editor.dispose();
     });
@@ -75,7 +77,7 @@ void main() async {
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
       expect(nestedBlock?.indentPadding.left, 0);
-      expect(nestedBlock?.indentPadding.right, 30);
+      expect(nestedBlock?.indentPadding.right, _padding);
 
       await editor.dispose();
     });
@@ -95,7 +97,7 @@ void main() async {
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
       expect(nestedBlock?.indentPadding.left, 0);
-      expect(nestedBlock?.indentPadding.right, 30);
+      expect(nestedBlock?.indentPadding.right, _padding);
 
       await editor.dispose();
     });
@@ -120,7 +122,7 @@ void main() async {
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
       expect(nestedBlock?.indentPadding.left, 0);
-      expect(nestedBlock?.indentPadding.right, 30);
+      expect(nestedBlock?.indentPadding.right, _padding);
 
       final selection = Selection.single(
         path: [0, 0],
@@ -134,7 +136,7 @@ void main() async {
       final nestedBlockAfter = node.key.currentState!
           .unwrapOrNull<NestedBlockComponentStatefulWidgetMixin>();
 
-      expect(nestedBlockAfter?.indentPadding.left, 30);
+      expect(nestedBlockAfter?.indentPadding.left, _padding);
       expect(nestedBlockAfter?.indentPadding.right, 0);
 
       await editor.dispose();