[PR #3591] [MERGED] feat: emoji picker improvement #5779

New issue

Closed

opened 2026-03-23 22:20:16 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 22:20:16 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/3591
Author: @hyj1204
Created: 10/2/2023
Status: ✅ Merged
Merged: 10/5/2023
Merged by: @LucasXu0

Base: main ← Head: feat/emoji_picker_improvement

📝 Commits (10+)

5185b78 chore: set the same shadow color in dandelion and lavender theme
4b55914 refactor: refactor emoji picker
69f37cc chore: update localization texts
f68c275 chore: update scrollbar handle color
031d67e chore: remove unnecessary code
2fee6e6 chore: update track and its default color
a6bb456 refactor: move emoji picker folder under workspace
b39fe0c refactor: use freezed in EmojiPickerConfig
43abd55 refactor: rename parameters and make methods work in freezed for EmojiPickerConfig
a14b779 Merge branch 'main' into feat/emoji_picker_improvement

📊 Changes

35 files changed (+302 additions, -4606 deletions)

View changed files

📝 frontend/appflowy_flutter/integration_test/util/database_test_op.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_banner.dart (+1 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart (+1 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart (+1 -2)
➖ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/emoji_picker.dart (+0 -4)
➖ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/src/config.dart (+0 -165)
➖ frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/src/emoji_picker.dart (+0 -338)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_popover.dart (+3 -12)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart (+1 -11)
➕ frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart (+6 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/default_emoji_picker_view.dart (+68 -75)
➕ frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emji_picker_config.dart (+94 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_lists.dart (+0 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_picker.dart (+52 -50)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_picker_builder.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_view_state.dart (+4 -4)
➕ frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/flowy_emoji_picker_config.dart (+34 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/models/emoji_category_models.dart (+21 -23)

...and 15 more files

📄 Description

Feature Preview

This PR is to refactor and improve the UI of the emoji picker.

Delete the duplicate code under appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker .
The emoji picker related code is only under appflowy_flutter/lib/workspace/presentation/widgets/emoji_picker.

The following files were impacted by this change.
RowBanner:
appflowy_flutter/lib/plugins/database_view/widgets/row/row_banner.dart
EmojiPickerButton: appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart
DocumentHeaderNodeWidget(Add icon in header): appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
EmojiPopover(The pop menu on DocumentHeaderNodeWidget): appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_popover.dart
AppFlowyEditorPage(slash menu):
appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

Add buildFlowyEmojiPickerConfig method to unify the UI style of the emoji picker we used in EmojiPopover(on the Header) and EmojiSelectionMenu(on slash menu)
Improve and refactor

Improve UI for DefaultEmojiPickerView
Improve EmojiPickerConfig
Add hover effect on the emoji button
Improve parameters in EmojiPickerConfig
Add LocaleKey for prompt texts

Light mode:

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/b9f751d1-c330-48e8-babd-483949d5e2ab

Dark mode:

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/4e131628-5ce8-4c51-bd2a-e68e7bab57fd

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/3591 **Author:** [@hyj1204](https://github.com/hyj1204) **Created:** 10/2/2023 **Status:** ✅ Merged **Merged:** 10/5/2023 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `feat/emoji_picker_improvement` --- ### 📝 Commits (10+) - [`5185b78`](https://github.com/AppFlowy-IO/AppFlowy/commit/5185b78007a8a176b397583e98ca68bf6db3717a) chore: set the same shadow color in dandelion and lavender theme - [`4b55914`](https://github.com/AppFlowy-IO/AppFlowy/commit/4b5591477aeac7e0920edd228eb1326091f27376) refactor: refactor emoji picker - [`69f37cc`](https://github.com/AppFlowy-IO/AppFlowy/commit/69f37ccf917ef03d2013c32974d698424d42d423) chore: update localization texts - [`f68c275`](https://github.com/AppFlowy-IO/AppFlowy/commit/f68c275cd8084a2c33113ec9bb3d9e026c893b1c) chore: update scrollbar handle color - [`031d67e`](https://github.com/AppFlowy-IO/AppFlowy/commit/031d67e3159ba079f8f9e5fba296e063c8583ce0) chore: remove unnecessary code - [`2fee6e6`](https://github.com/AppFlowy-IO/AppFlowy/commit/2fee6e6f6f3a2b956177afb8d5690354419a5779) chore: update track and its default color - [`a6bb456`](https://github.com/AppFlowy-IO/AppFlowy/commit/a6bb456143cd8deccd91a140685906c408aefdef) refactor: move emoji picker folder under workspace - [`b39fe0c`](https://github.com/AppFlowy-IO/AppFlowy/commit/b39fe0c1f5fad87391d28f7a628062c3da2e8f6f) refactor: use freezed in EmojiPickerConfig - [`43abd55`](https://github.com/AppFlowy-IO/AppFlowy/commit/43abd553a7e3fbf64595f2485b2046d3acb7e2d1) refactor: rename parameters and make methods work in freezed for EmojiPickerConfig - [`a14b779`](https://github.com/AppFlowy-IO/AppFlowy/commit/a14b77912bf51cdfd6915d7bcefc4984bf21238c) Merge branch 'main' into feat/emoji_picker_improvement ### 📊 Changes **35 files changed** (+302 additions, -4606 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/integration_test/util/database_test_op.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_banner.dart` (+1 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart` (+1 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart` (+1 -2) ➖ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/emoji_picker.dart` (+0 -4) ➖ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/src/config.dart` (+0 -165) ➖ `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/src/emoji_picker.dart` (+0 -338) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_popover.dart` (+3 -12) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart` (+1 -11) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart` (+6 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/default_emoji_picker_view.dart` (+68 -75) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emji_picker_config.dart` (+94 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_lists.dart` (+0 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_picker.dart` (+52 -50) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_picker_builder.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/emoji_view_state.dart` (+4 -4) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/flowy_emoji_picker_config.dart` (+34 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/models/emoji_category_models.dart` (+21 -23) _...and 15 more files_ </details> ### 📄 Description   ### Feature Preview This PR is to refactor and improve the UI of the emoji picker. 1. Delete the duplicate code under `appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker` . The emoji picker related code is only under `appflowy_flutter/lib/workspace/presentation/widgets/emoji_picker`. **The following files were impacted by this change.** RowBanner: `appflowy_flutter/lib/plugins/database_view/widgets/row/row_banner.dart` EmojiPickerButton: `appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart` DocumentHeaderNodeWidget(Add icon in header): `appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart` EmojiPopover(The pop menu on `DocumentHeaderNodeWidget`): `appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_popover.dart` AppFlowyEditorPage(slash menu): `appflowy_flutter/lib/plugins/document/presentation/editor_page.dart` 2. Add `buildFlowyEmojiPickerConfig` method to unify the UI style of the emoji picker we used in `EmojiPopover`(on the Header) and `EmojiSelectionMenu`(on slash menu) 3. Improve and refactor - Improve UI for DefaultEmojiPickerView - Improve EmojiPickerConfig - Add hover effect on the emoji button - Improve parameters in EmojiPickerConfig - Add LocaleKey for prompt texts Light mode: https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/b9f751d1-c330-48e8-babd-483949d5e2ab Dark mode: https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/4e131628-5ce8-4c51-bd2a-e68e7bab57fd  ---  #### 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. - [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>