[PR #2899] [MERGED] refactor: cover node widget code #5466

New issue

Closed

opened 2026-03-23 22:18:52 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:18:52 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/2899
Author: @richardshiue
Created: 6/25/2023
Status: ✅ Merged
Merged: 6/27/2023
Merged by: @LucasXu0

Base: main ← Head: cover-node-refactor

📝 Commits (10+)

2d8a1a4 chore: change initial cover type's name to none
339b7b9 chore: refactor cover node widget
1c35a74 chore: use a constant instead of magic value
f25b908 fix: make the size of icon hover effect smaller
8a283fd chore: improve appearance of selected color
3452873 test: add cover integration tests
d8e7c40 fix: inner ring of selected color in dark mode
5613844 refactor: cover node to document header node
8cf7a98 test: simplify tests
320e6dd chore: rename files

📊 Changes

17 files changed (+863 additions, -670 deletions)

View changed files

📝 frontend/appflowy_flutter/integration_test/database_row_page_test.dart (+1 -0)
📝 frontend/appflowy_flutter/integration_test/document/cover_image_test.dart (+100 -4)
📝 frontend/appflowy_flutter/integration_test/util/database_test_op.dart (+0 -11)
📝 frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart (+79 -6)
➕ frontend/appflowy_flutter/integration_test/util/emoji.dart (+17 -0)
📝 frontend/appflowy_flutter/integration_test/util/expectation.dart (+51 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/document_page.dart (+1 -1)
➖ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/cover_node_widget.dart (+0 -555)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart (+54 -37)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor_bloc.dart (+8 -8)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker_bloc.dart (+3 -2)
➕ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart (+507 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart (+2 -5)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_popover.dart (+35 -35)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart (+3 -3)
📝 frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart (+1 -1)

📄 Description

less ternary widgets in build methods
less magic values, the height of the cover is now strictly at 250 px.
fixes #2849
addresses https://github.com/AppFlowy-IO/AppFlowy/issues/2850#issuecomment-1598355075
fixes bug where the trash icon has a slighly more opaque background than the change cover button
bump up height of add/remove icon, add cover, etc. to 28 to follow the change cover button
clicking on change cover or add icon will show the popover but won't hide the button itself any more (better imo)
improve the appearance of the selected solid color in the cover picker popup
renamed cover_node_widget to document_header_node_widget. These changes are code-level and file-level.

Feature Preview

https://github.com/AppFlowy-IO/AppFlowy/assets/71320345/12483b18-eb25-4754-b586-47122172bd9f

PR Checklist

My code adheres to the AppFlowy Style Guide
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/2899 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 6/25/2023 **Status:** ✅ Merged **Merged:** 6/27/2023 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `cover-node-refactor` --- ### 📝 Commits (10+) - [`2d8a1a4`](https://github.com/AppFlowy-IO/AppFlowy/commit/2d8a1a4c18767a14ff45fdb9ff51350eba6f6586) chore: change initial cover type's name to none - [`339b7b9`](https://github.com/AppFlowy-IO/AppFlowy/commit/339b7b9554a8e1693dae1162cb9171ee48f49193) chore: refactor cover node widget - [`1c35a74`](https://github.com/AppFlowy-IO/AppFlowy/commit/1c35a741ced64c433d237afa139610466127d156) chore: use a constant instead of magic value - [`f25b908`](https://github.com/AppFlowy-IO/AppFlowy/commit/f25b908cd32d11a997dea9cd9806f95c29ef9a19) fix: make the size of icon hover effect smaller - [`8a283fd`](https://github.com/AppFlowy-IO/AppFlowy/commit/8a283fdb870f58159e4df69b7db47207c570a50f) chore: improve appearance of selected color - [`3452873`](https://github.com/AppFlowy-IO/AppFlowy/commit/345287342be41ddd6008efbd6f2457de0e6d7296) test: add cover integration tests - [`d8e7c40`](https://github.com/AppFlowy-IO/AppFlowy/commit/d8e7c4087d65e777f5c6081d5294f7b739f8ae43) fix: inner ring of selected color in dark mode - [`5613844`](https://github.com/AppFlowy-IO/AppFlowy/commit/5613844d1b2704d8d196a4f12b01ca7c5cf2beda) refactor: cover node to document header node - [`8cf7a98`](https://github.com/AppFlowy-IO/AppFlowy/commit/8cf7a98718d97b9056157b7df41ff9663eee9fe1) test: simplify tests - [`320e6dd`](https://github.com/AppFlowy-IO/AppFlowy/commit/320e6dd40aa632e2d7e31df89df2ee2cdcfdecc9) chore: rename files ### 📊 Changes **17 files changed** (+863 additions, -670 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/integration_test/database_row_page_test.dart` (+1 -0) 📝 `frontend/appflowy_flutter/integration_test/document/cover_image_test.dart` (+100 -4) 📝 `frontend/appflowy_flutter/integration_test/util/database_test_op.dart` (+0 -11) 📝 `frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart` (+79 -6) ➕ `frontend/appflowy_flutter/integration_test/util/emoji.dart` (+17 -0) 📝 `frontend/appflowy_flutter/integration_test/util/expectation.dart` (+51 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/document_page.dart` (+1 -1) ➖ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/cover_node_widget.dart` (+0 -555) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart` (+54 -37) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor_bloc.dart` (+8 -8) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker_bloc.dart` (+3 -2) ➕ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart` (+507 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart` (+2 -5) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_popover.dart` (+35 -35) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart` (+3 -3) 📝 `frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart` (+1 -1) </details> ### 📄 Description - less ternary widgets in build methods - less magic values, the height of the cover is now strictly at 250 px. - fixes #2849 - addresses https://github.com/AppFlowy-IO/AppFlowy/issues/2850#issuecomment-1598355075 - fixes bug where the trash icon has a slighly more opaque background than the `change cover` button - bump up height of `add/remove icon`, `add cover`, etc. to 28 to follow the `change cover` button - clicking on change cover or add icon will show the popover but won't hide the button itself any more (better imo) - improve the appearance of the selected solid color in the cover picker popup - renamed `cover_node_widget` to `document_header_node_widget`. These changes are code-level and file-level. ### Feature Preview https://github.com/AppFlowy-IO/AppFlowy/assets/71320345/12483b18-eb25-4754-b586-47122172bd9f #### PR Checklist - [x] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [x] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>