[PR #3939] [MERGED] chore: improve mobile grid page #5960

New issue

Closed

opened 2026-03-23 22:21:05 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:21:05 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/3939
Author: @richardshiue
Created: 11/14/2023
Status: ✅ Merged
Merged: 11/21/2023
Merged by: @richardshiue

Base: main ← Head: mobile-grid-page

📝 Commits (10+)

33011a4 chore: more typo
d27251a chore: improve appearance of mobile grid page
8619e3c fix: focus problems with editable grid cells
5bcceb9 chore: apply suggestions from Mathias
8167059 revert: the dragged header looks ugly
5a6300a chore: more suggestions from Mathias
91ff7e1 chore: more tarbars
585f9e9 chore: merge remote-tracking branch 'upstream/main' into mobile-grid-page
7c9e3f1 fix: scrollbar padding is a bit off
ca37be3 chore: add launch tasks and fix android debug

📊 Changes

31 files changed (+958 additions, -325 deletions)

View changed files

📝 frontend/.vscode/launch.json (+33 -0)
📝 frontend/appflowy_flutter/integration_test/database_field_settings_test.dart (+3 -3)
📝 frontend/appflowy_flutter/integration_test/database_view_test.dart (+5 -6)
📝 frontend/appflowy_flutter/integration_test/util/database_test_op.dart (+7 -5)
📝 frontend/appflowy_flutter/lib/plugins/database_view/application/tab_bar_bloc.dart (+12 -8)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/grid_page.dart (+13 -14)
➕ frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/mobile_grid_page.dart (+436 -0)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart (+5 -2)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart (+1 -6)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart (+33 -17)
➕ frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart (+65 -0)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/row.dart (+22 -30)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_layout.dart (+1 -1)
➕ frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/mobile_grid_setting.dart (+63 -0)
📝 frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/desktop/setting_menu.dart (+27 -22)
📝 frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/desktop/tab_bar_add_button.dart (+15 -58)
📝 frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/desktop/tab_bar_header.dart (+51 -53)
➕ frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/mobile/mobile_tab_bar_header.dart (+52 -0)
📝 frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/tab_bar_view.dart (+12 -11)
📝 frontend/appflowy_flutter/lib/plugins/database_view/widgets/database_layout_ext.dart (+23 -19)

...and 11 more files

📄 Description

fix doubled divider on the grid header. resolves https://github.com/AppFlowy-IO/AppFlowy/issues/3421
fix the textfield input border for text cells (text, url, number)
implement row reordering via delayed drag
adjust grid footer (new row, count) sizing and position
fix a bug where the cell container will throw an exception after focus is changed from an editable grid cell
fix cell focus problems on mobile
lazy load grid rows properly on desktop and mobile
use i18n on new database view names
implement a rudimentary grid header

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/3939 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 11/14/2023 **Status:** ✅ Merged **Merged:** 11/21/2023 **Merged by:** [@richardshiue](https://github.com/richardshiue) **Base:** `main` ← **Head:** `mobile-grid-page` --- ### 📝 Commits (10+) - [`33011a4`](https://github.com/AppFlowy-IO/AppFlowy/commit/33011a4a349e3852af93c9080d37b983df3c3cb5) chore: more typo - [`d27251a`](https://github.com/AppFlowy-IO/AppFlowy/commit/d27251aefdef187d7d0aaf6a2ccd75c9c060454e) chore: improve appearance of mobile grid page - [`8619e3c`](https://github.com/AppFlowy-IO/AppFlowy/commit/8619e3c77faa60893bedd1bd2c4632ce077ffd77) fix: focus problems with editable grid cells - [`5bcceb9`](https://github.com/AppFlowy-IO/AppFlowy/commit/5bcceb9ab7aabf63c6b8b41bab17b6b520e9ecc3) chore: apply suggestions from Mathias - [`8167059`](https://github.com/AppFlowy-IO/AppFlowy/commit/81670595d437daaca2ff9e140f1cc161a5faf8d2) revert: the dragged header looks ugly - [`5a6300a`](https://github.com/AppFlowy-IO/AppFlowy/commit/5a6300a8af05df27eadbe1f547dab4effe1b2f95) chore: more suggestions from Mathias - [`91ff7e1`](https://github.com/AppFlowy-IO/AppFlowy/commit/91ff7e1c9f019129a46b66155873d5151037aee2) chore: more tarbars - [`585f9e9`](https://github.com/AppFlowy-IO/AppFlowy/commit/585f9e9c386518a9e584bc2ca2443e85b22621b7) chore: merge remote-tracking branch 'upstream/main' into mobile-grid-page - [`7c9e3f1`](https://github.com/AppFlowy-IO/AppFlowy/commit/7c9e3f12004935f5aca1eeeb8e5c15549f74b876) fix: scrollbar padding is a bit off - [`ca37be3`](https://github.com/AppFlowy-IO/AppFlowy/commit/ca37be38d33cfe302d0470ffbe920b50e581f46c) chore: add launch tasks and fix android debug ### 📊 Changes **31 files changed** (+958 additions, -325 deletions) <details> <summary>View changed files</summary> 📝 `frontend/.vscode/launch.json` (+33 -0) 📝 `frontend/appflowy_flutter/integration_test/database_field_settings_test.dart` (+3 -3) 📝 `frontend/appflowy_flutter/integration_test/database_view_test.dart` (+5 -6) 📝 `frontend/appflowy_flutter/integration_test/util/database_test_op.dart` (+7 -5) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/application/tab_bar_bloc.dart` (+12 -8) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/grid_page.dart` (+13 -14) ➕ `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/mobile_grid_page.dart` (+436 -0) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart` (+5 -2) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart` (+1 -6) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart` (+33 -17) ➕ `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart` (+65 -0) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/row.dart` (+22 -30) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_layout.dart` (+1 -1) ➕ `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/mobile_grid_setting.dart` (+63 -0) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/desktop/setting_menu.dart` (+27 -22) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/desktop/tab_bar_add_button.dart` (+15 -58) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/desktop/tab_bar_header.dart` (+51 -53) ➕ `frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/mobile/mobile_tab_bar_header.dart` (+52 -0) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/tab_bar_view.dart` (+12 -11) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/widgets/database_layout_ext.dart` (+23 -19) _...and 11 more files_ </details> ### 📄 Description 1. fix doubled divider on the grid header. resolves https://github.com/AppFlowy-IO/AppFlowy/issues/3421 2. fix the textfield input border for text cells (text, url, number) 3. implement row reordering via delayed drag 4. adjust grid footer (new row, count) sizing and position 5. fix a bug where the cell container will throw an exception after focus is changed from an editable grid cell 6. fix cell focus problems on mobile 7. lazy load grid rows properly on desktop and mobile 8. use i18n on new database view names 9. implement a rudimentary grid header ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/71320345/ce357365-ffbc-4b69-856c-d0f97de227ec) #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>