From 016e131bd3780341335c0a0d248aef872247769e Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Thu, 2 May 2024 12:08:35 +0800
Subject: [PATCH] feat: adjust toolbar count based on the screen size (#5243)

---
 .../appflowy_mobile_toolbar.dart              | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart
index ae23a83925..7b76767120 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart
@@ -461,8 +461,13 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
 
   @override
   Widget build(BuildContext context) {
+    const left = 8.0;
+    const right = 4.0;
+    // 68.0 is the width of the close keyboard/menu button
+    final padding = _calculatePadding(left + right + 68.0);
+
     final children = [
-      const HSpace(8),
+      const HSpace(left),
       ...widget.toolbarItems
           .mapIndexed(
             (index, element) => element.itemBuilder.call(
@@ -481,9 +486,9 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
                   : null,
             ),
           )
-          .map((e) => [e, const HSpace(10)])
+          .map((e) => [e, HSpace(padding)])
           .flattened,
-      const HSpace(4),
+      const HSpace(right),
     ];
 
     return PageStorage(
@@ -499,6 +504,23 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
     );
   }
 
+  double _calculatePadding(double extent) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    final width = screenWidth - extent;
+    final int count;
+    if (screenWidth <= 340) {
+      count = 5;
+    } else if (screenWidth <= 384) {
+      count = 6;
+    } else if (screenWidth <= 430) {
+      count = 7;
+    } else {
+      count = 8;
+    }
+    // left + item count * width + item count * padding + right + close button width = screenWidth
+    return (width - count * 40.0) / count;
+  }
+
   void _debounceUpdatePilotPosition() {
     Debounce.debounce(
       'updatePilotPosition',
@@ -539,17 +561,3 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> {
     previousSelection = selection;
   }
 }
-
-// class _MyClipper extends CustomClipper<Rect> {
-//   const _MyClipper({
-//     this.offset = 0,
-//   });
-
-//   final double offset;
-
-//   @override
-//   Rect getClip(Size size) => Rect.fromLTWH(offset, 0, 64.0, 46.0);
-
-//   @override
-//   bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
-// }