[PR #8102] Feat cover image reposition(#2462) #8299

New issue

Open

opened 2026-03-23 23:23:31 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:23:31 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/8102
Author: @PirateBrook
Created: 7/3/2025
Status: 🔄 Open

Base: main ← Head: feat_cover_image_reposition

📝 Commits (10+)

8199139 feat: cover image reposition add baisc code
bed09e0 feat: cover image reposition change cover auto reset to Aliginment.center
cda7c13 feat: cover image reposition add coverAlignController dispose
6e1f9b6 feat: cover image reposition rename to alignEnable
a445eb1 feat: conver image reposition add support method
4bd8638 fix: ViewListener in the DocumentCoverWidget use the shaowed value
15b4089 feat: cover image reposition rename the align to coverOffset and add comment on it
e72f53b feat: cover image reposition remove unused ImageInfo? _imageInfo in _DesktopCoverAlignState
3094dee feat: cover image reposition resolve potential null dereference of _imageStreamListener.
23c0b15 chore: code style in document_cover_widget.dart

📊 Changes

11 files changed (+856 additions, -59 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/mobile/application/page_style/document_page_style_bloc.dart (+1 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart (+66 -13)
➕ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover_align.dart (+227 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart (+185 -46)
📝 frontend/appflowy_flutter/lib/shared/appflowy_network_image.dart (+5 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/buttons/buttons_page.dart (+53 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/button.dart (+4 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_button.dart (+98 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_button_const.dart (+3 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_icon_button.dart (+108 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_text_button.dart (+106 -0)

📄 Description

Feature Preview

Kapture 2025-07-02 at 18.35.13.webm

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.

Summary by Sourcery

Enable repositioning of document cover images on desktop and web by introducing an alignment mode, draggable reposition controls, and persistent alignment offsets.

New Features:

Add cover image repositioning mode with drag gestures on desktop/web.
Introduce overlay align, save, and cancel buttons for cover alignment editing.
Persist cover alignment offsets as a new coverOffset attribute in document metadata.
Add DesktopCoverAlign widget and DesktopCoverAlignController to render and manage image alignment.

Enhancements:

Extend FlowyNetworkImage with an optional imageBuilder to wrap network images in the alignment widget.
Update onChangeCover callbacks and toolbar logic to pass and handle alignment parameters.
Add isAlignEnable flags to PageStyleCover and CoverType for conditional alignment support.

_{🔄 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/8102 **Author:** [@PirateBrook](https://github.com/PirateBrook) **Created:** 7/3/2025 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat_cover_image_reposition` --- ### 📝 Commits (10+) - [`8199139`](https://github.com/AppFlowy-IO/AppFlowy/commit/8199139b90f25447b87e7d7dd07b88d67b0e12f7) feat: cover image reposition add baisc code - [`bed09e0`](https://github.com/AppFlowy-IO/AppFlowy/commit/bed09e0432f834568f5a1c9fa9d187d8de258d26) feat: cover image reposition change cover auto reset to Aliginment.center - [`cda7c13`](https://github.com/AppFlowy-IO/AppFlowy/commit/cda7c13875f34bf9b53ded7678c7730d02fd5776) feat: cover image reposition add coverAlignController dispose - [`6e1f9b6`](https://github.com/AppFlowy-IO/AppFlowy/commit/6e1f9b65a059c582d66da203d0940f28ed120bbd) feat: cover image reposition rename to alignEnable - [`a445eb1`](https://github.com/AppFlowy-IO/AppFlowy/commit/a445eb15e553a39575cbb5eeb03692d8cec2d74d) feat: conver image reposition add support method - [`4bd8638`](https://github.com/AppFlowy-IO/AppFlowy/commit/4bd86386f7832c6564b6a20076d5b24dfe090bc7) fix: ViewListener in the DocumentCoverWidget use the shaowed value - [`15b4089`](https://github.com/AppFlowy-IO/AppFlowy/commit/15b408919c32879db1d97527aa96746c7a3429db) feat: cover image reposition rename the align to coverOffset and add comment on it - [`e72f53b`](https://github.com/AppFlowy-IO/AppFlowy/commit/e72f53bb2abef94610e999e81fb680381a12891d) feat: cover image reposition remove unused ImageInfo? _imageInfo in _DesktopCoverAlignState - [`3094dee`](https://github.com/AppFlowy-IO/AppFlowy/commit/3094dee4a13a5cb0df9b760e600ac7ea817a04ec) feat: cover image reposition resolve potential null dereference of _imageStreamListener. - [`23c0b15`](https://github.com/AppFlowy-IO/AppFlowy/commit/23c0b15a9ed65556cdea932ff7e9f2e0c8942f61) chore: code style in document_cover_widget.dart ### 📊 Changes **11 files changed** (+856 additions, -59 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/mobile/application/page_style/document_page_style_bloc.dart` (+1 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart` (+66 -13) ➕ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover_align.dart` (+227 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart` (+185 -46) 📝 `frontend/appflowy_flutter/lib/shared/appflowy_network_image.dart` (+5 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/buttons/buttons_page.dart` (+53 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/button.dart` (+4 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_button.dart` (+98 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_button_const.dart` (+3 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_icon_button.dart` (+108 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/overlay_button/overlay_text_button.dart` (+106 -0) </details> ### 📄 Description   ### Feature Preview related feat https://github.com/AppFlowy-IO/AppFlowy/issues/2462 [Kapture 2025-07-02 at 18.35.13.webm](https://github.com/user-attachments/assets/0323da28-eb5d-4cbf-b3b9-6a7123f6a9b4)  ---  #### 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. ## Summary by Sourcery Enable repositioning of document cover images on desktop and web by introducing an alignment mode, draggable reposition controls, and persistent alignment offsets. New Features: - Add cover image repositioning mode with drag gestures on desktop/web. - Introduce overlay align, save, and cancel buttons for cover alignment editing. - Persist cover alignment offsets as a new coverOffset attribute in document metadata. - Add DesktopCoverAlign widget and DesktopCoverAlignController to render and manage image alignment. Enhancements: - Extend FlowyNetworkImage with an optional imageBuilder to wrap network images in the alignment widget. - Update onChangeCover callbacks and toolbar logic to pass and handle alignment parameters. - Add isAlignEnable flags to PageStyleCover and CoverType for conditional alignment support. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>