From 7a9cb03c8e6b7582db6c8a72d7c78e012d6d85a9 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Wed, 20 Mar 2024 14:41:12 +0700 Subject: [PATCH] refactor: improve mobile toolbar design (v3) (#4891) * refactor: mobile toolbar v3 design * feat: customize color item * feat: close keyboard directly when clicking the close button even opening Aa menu * feat: enable undo/redo in editing list mode --- .../document/presentation/editor_page.dart | 17 +-- .../_get_selection_color.dart | 28 +++++ .../{ => aa_menu}/_align_items.dart | 12 +- .../{ => aa_menu}/_bius_items.dart | 10 +- .../{ => aa_menu}/_block_items.dart | 16 +-- .../_close_keyboard_or_menu_button.dart | 15 +-- .../{ => aa_menu}/_color_item.dart | 48 ++------ .../{ => aa_menu}/_color_list.dart | 32 +---- .../{ => aa_menu}/_font_item.dart | 5 +- .../_heading_and_text_items.dart | 8 +- .../{ => aa_menu}/_indent_items.dart | 6 +- .../{ => aa_menu}/_menu_item.dart | 2 +- .../{ => aa_menu}/_popup_menu.dart | 2 +- .../{ => aa_menu}/_toolbar_theme.dart | 4 +- .../mobile_toolbar_v3/aa_toolbar_item.dart | 19 ++- .../add_block_toolbar_item.dart | 4 +- .../appflowy_mobile_toolbar.dart | 115 +++++++----------- .../appflowy_mobile_toolbar_item.dart | 38 +++--- ...lbar_item.dart => biusc_toolbar_item.dart} | 72 ++++++++++- .../checkbox_toolbar_item.dart | 24 ---- .../indent_outdent_toolbar_item.dart | 35 ++++++ .../mobile_toolbar_v3/list_toolbar_item.dart | 61 ++++++++++ .../toolbar_item_builder.dart | 81 ++++++++++++ .../undo_redo_toolbar_item.dart | 38 ++++-- .../mobile_toolbar_v3/util.dart | 20 +-- .../presentation/editor_plugins/plugins.dart | 6 +- .../appearance/mobile_appearance.dart | 2 +- .../resources/flowy_icons/16x/m_aa_indent.svg | 10 +- .../flowy_icons/16x/m_aa_outdent.svg | 10 +- .../flowy_icons/24x/m_aa_align_center.svg | 5 + .../flowy_icons/24x/m_aa_align_left.svg | 5 + .../flowy_icons/24x/m_aa_align_right.svg | 5 + .../resources/flowy_icons/24x/m_aa_code.svg | 4 + .../flowy_icons/24x/m_aa_font_color.svg | 4 + .../resources/flowy_icons/24x/m_aa_h1.svg | 4 + .../resources/flowy_icons/24x/m_aa_h2.svg | 4 + .../resources/flowy_icons/24x/m_aa_h3.svg | 4 + .../resources/flowy_icons/24x/m_aa_indent.svg | 6 + .../resources/flowy_icons/24x/m_aa_math.svg | 3 + .../flowy_icons/24x/m_aa_outdent.svg | 6 + .../flowy_icons/24x/m_aa_paragraph.svg | 4 + .../resources/flowy_icons/24x/m_aa_quote.svg | 6 + .../flowy_icons/24x/m_toolbar_aa.svg | 4 + .../flowy_icons/24x/m_toolbar_add.svg | 5 + .../flowy_icons/24x/m_toolbar_bold.svg | 4 + .../24x/m_toolbar_bulleted_list.svg | 8 ++ .../flowy_icons/24x/m_toolbar_calendar.svg | 12 ++ .../flowy_icons/24x/m_toolbar_checkbox.svg | 4 + .../flowy_icons/24x/m_toolbar_image.svg | 5 + .../flowy_icons/24x/m_toolbar_italic.svg | 5 + .../flowy_icons/24x/m_toolbar_keyboard.svg | 4 + .../flowy_icons/24x/m_toolbar_link.svg | 3 + .../24x/m_toolbar_numbered_list.svg | 8 ++ .../flowy_icons/24x/m_toolbar_redo.svg | 3 + .../flowy_icons/24x/m_toolbar_strike.svg | 3 + .../flowy_icons/24x/m_toolbar_underline.svg | 4 + .../flowy_icons/24x/m_toolbar_undo.svg | 3 + 57 files changed, 596 insertions(+), 279 deletions(-) create mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_align_items.dart (92%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_bius_items.dart (87%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_block_items.dart (93%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_close_keyboard_or_menu_button.dart (56%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_color_item.dart (55%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_color_list.dart (91%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_font_item.dart (98%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_heading_and_text_items.dart (94%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_indent_items.dart (92%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_menu_item.dart (97%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_popup_menu.dart (98%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{ => aa_menu}/_toolbar_theme.dart (98%) rename frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/{biuc_toolbar_item.dart => biusc_toolbar_item.dart} (55%) delete mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/checkbox_toolbar_item.dart create mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/indent_outdent_toolbar_item.dart create mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/list_toolbar_item.dart create mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/toolbar_item_builder.dart create mode 100644 frontend/resources/flowy_icons/24x/m_aa_align_center.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_align_left.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_align_right.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_code.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_font_color.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_h1.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_h2.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_h3.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_indent.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_math.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_outdent.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_paragraph.svg create mode 100644 frontend/resources/flowy_icons/24x/m_aa_quote.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_aa.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_add.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_bold.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_bulleted_list.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_calendar.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_checkbox.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_image.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_italic.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_keyboard.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_link.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_numbered_list.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_redo.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_strike.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_underline.svg create mode 100644 frontend/resources/flowy_icons/24x/m_toolbar_undo.svg diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart index 0b3e881904..c40bae7266 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart @@ -297,19 +297,12 @@ class _AppFlowyEditorPageState extends State { if (PlatformExtension.isMobile) { return AppFlowyMobileToolbar( - toolbarHeight: 46.0, + toolbarHeight: 42.0, editorState: editorState, - toolbarItems: [ - undoToolbarItem, - redoToolbarItem, - addBlockToolbarItem, - todoListToolbarItem, - aaToolbarItem, - boldToolbarItem, - italicToolbarItem, - underlineToolbarItem, - colorToolbarItem, - ], + toolbarItemsBuilder: (selection) => buildMobileToolbarItems( + editorState, + selection, + ), child: Column( children: [ Expanded( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart new file mode 100644 index 0000000000..b60eae3006 --- /dev/null +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart @@ -0,0 +1,28 @@ +import 'package:appflowy_editor/appflowy_editor.dart'; + +extension SelectionColor on EditorState { + String? getSelectionColor(String key) { + final selection = this.selection; + if (selection == null) { + return null; + } + String? color = toggledStyle[key]; + if (color == null) { + if (selection.isCollapsed && selection.startIndex != 0) { + color = getDeltaAttributeValueInSelection( + key, + selection.copyWith( + start: selection.start.copyWith( + offset: selection.startIndex - 1, + ), + ), + ); + } else { + color = getDeltaAttributeValueInSelection( + key, + ); + } + } + return color; + } +} diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_align_items.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_align_items.dart similarity index 92% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_align_items.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_align_items.dart index 22b1028871..dccff22664 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_align_items.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_align_items.dart @@ -1,7 +1,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_menu_item.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_popup_menu.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_menu_item.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_popup_menu.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:collection/collection.dart'; @@ -20,9 +20,9 @@ class AlignItems extends StatelessWidget { final EditorState editorState; final List<(String, FlowySvgData)> _alignMenuItems = [ - (_left, FlowySvgs.m_aa_align_left_s), - (_center, FlowySvgs.m_aa_align_center_s), - (_right, FlowySvgs.m_aa_align_right_s), + (_left, FlowySvgs.m_aa_align_left_m), + (_center, FlowySvgs.m_aa_align_center_m), + (_right, FlowySvgs.m_aa_align_right_m), ]; @override diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_bius_items.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_bius_items.dart similarity index 87% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_bius_items.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_bius_items.dart index 2fb2cd5db3..0de86ffd6c 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_bius_items.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_bius_items.dart @@ -1,5 +1,5 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:collection/collection.dart'; @@ -14,10 +14,10 @@ class BIUSItems extends StatelessWidget { final EditorState editorState; final List<(FlowySvgData, String)> _bius = [ - (FlowySvgs.m_aa_bold_s, AppFlowyRichTextKeys.bold), - (FlowySvgs.m_aa_italic_s, AppFlowyRichTextKeys.italic), - (FlowySvgs.m_aa_underline_s, AppFlowyRichTextKeys.underline), - (FlowySvgs.m_aa_strike_s, AppFlowyRichTextKeys.strikethrough), + (FlowySvgs.m_toolbar_bold_m, AppFlowyRichTextKeys.bold), + (FlowySvgs.m_toolbar_italic_m, AppFlowyRichTextKeys.italic), + (FlowySvgs.m_toolbar_underline_m, AppFlowyRichTextKeys.underline), + (FlowySvgs.m_toolbar_strike_m, AppFlowyRichTextKeys.strikethrough), ]; @override diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_block_items.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_block_items.dart similarity index 93% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_block_items.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_block_items.dart index 00d86be244..57670afadd 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_block_items.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_block_items.dart @@ -2,9 +2,9 @@ import 'dart:async'; import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_item/utils.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_menu_item.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_popup_menu.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_menu_item.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_popup_menu.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:collection/collection.dart'; @@ -23,9 +23,9 @@ class BlockItems extends StatelessWidget { final AppFlowyMobileToolbarWidgetService service; final List<(FlowySvgData, String)> _blockItems = [ - (FlowySvgs.m_aa_bulleted_list_s, BulletedListBlockKeys.type), - (FlowySvgs.m_aa_numbered_list_s, NumberedListBlockKeys.type), - (FlowySvgs.m_aa_quote_s, QuoteBlockKeys.type), + (FlowySvgs.m_toolbar_bulleted_list_m, BulletedListBlockKeys.type), + (FlowySvgs.m_toolbar_numbered_list_m, NumberedListBlockKeys.type), + (FlowySvgs.m_aa_quote_m, QuoteBlockKeys.type), ]; @override @@ -82,7 +82,7 @@ class BlockItems extends StatelessWidget { Widget _buildLinkItem(BuildContext context) { final theme = ToolbarColorExtension.of(context); final items = [ - (AppFlowyRichTextKeys.code, FlowySvgs.m_aa_code_s), + (AppFlowyRichTextKeys.code, FlowySvgs.m_aa_code_m), // (InlineMathEquationKeys.formula, FlowySvgs.m_aa_math_s), ]; return PopupMenu( @@ -119,7 +119,7 @@ class BlockItems extends StatelessWidget { showDownArrow: true, onTap: _onLinkItemTap, backgroundColor: theme.toolbarMenuItemBackgroundColor, - icon: FlowySvgs.m_aa_link_s, + icon: FlowySvgs.m_toolbar_link_m, isSelected: false, iconPadding: const EdgeInsets.symmetric( vertical: 14.0, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_close_keyboard_or_menu_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart similarity index 56% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_close_keyboard_or_menu_button.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart index c62f110c50..4c91a00bc7 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_close_keyboard_or_menu_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart @@ -5,27 +5,20 @@ import 'package:flutter/material.dart'; class CloseKeyboardOrMenuButton extends StatelessWidget { const CloseKeyboardOrMenuButton({ super.key, - required this.showingMenu, required this.onPressed, }); - final bool showingMenu; final VoidCallback onPressed; @override Widget build(BuildContext context) { return SizedBox( width: 62, - height: 46, + height: 42, child: FlowyButton( - margin: showingMenu ? const EdgeInsets.only(right: 0.5) : null, - text: showingMenu - ? const FlowySvg( - FlowySvgs.m_toolbar_show_keyboard_s, - ) - : const FlowySvg( - FlowySvgs.m_toolbar_hide_keyboard_s, - ), + text: const FlowySvg( + FlowySvgs.m_toolbar_keyboard_m, + ), onTap: onPressed, ), ); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart similarity index 55% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_item.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart index 417c4d5c0a..c5f4b77d62 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart @@ -1,8 +1,9 @@ import 'dart:async'; import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; @@ -20,7 +21,10 @@ class ColorItem extends StatelessWidget { @override Widget build(BuildContext context) { final theme = ToolbarColorExtension.of(context); - final selectedBackgroundColor = _getBackgroundColor(context); + final String? selectedTextColor = + editorState.getSelectionColor(AppFlowyRichTextKeys.textColor); + final String? selectedBackgroundColor = + editorState.getSelectionColor(AppFlowyRichTextKeys.backgroundColor); return MobileToolbarMenuItemWrapper( size: const Size(82, 52), @@ -43,10 +47,11 @@ class ColorItem extends StatelessWidget { selection: editorState.selection!, ); }, - icon: FlowySvgs.m_aa_color_s, - backgroundColor: - selectedBackgroundColor ?? theme.toolbarMenuItemBackgroundColor, - selectedBackgroundColor: selectedBackgroundColor, + icon: FlowySvgs.m_aa_font_color_m, + iconColor: selectedTextColor?.tryToColor(), + backgroundColor: selectedBackgroundColor?.tryToColor() ?? + theme.toolbarMenuItemBackgroundColor, + selectedBackgroundColor: selectedBackgroundColor?.tryToColor(), isSelected: selectedBackgroundColor != null, showRightArrow: true, iconPadding: const EdgeInsets.only( @@ -56,33 +61,4 @@ class ColorItem extends StatelessWidget { ), ); } - - Color? _getBackgroundColor(BuildContext context) { - final selection = editorState.selection; - if (selection == null) { - return null; - } - String? backgroundColor = - editorState.toggledStyle[AppFlowyRichTextKeys.backgroundColor]; - if (backgroundColor == null) { - if (selection.isCollapsed && selection.startIndex != 0) { - backgroundColor = editorState.getDeltaAttributeValueInSelection( - AppFlowyRichTextKeys.backgroundColor, - selection.copyWith( - start: selection.start.copyWith( - offset: selection.startIndex - 1, - ), - ), - ); - } else { - backgroundColor = editorState.getDeltaAttributeValueInSelection( - AppFlowyRichTextKeys.backgroundColor, - ); - } - } - if (backgroundColor != null && int.tryParse(backgroundColor) != null) { - return Color(int.parse(backgroundColor)); - } - return null; - } } diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart similarity index 91% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart index c8498cd872..6b03ff6301 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart @@ -1,7 +1,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:collection/collection.dart'; import 'package:easy_localization/easy_localization.dart'; @@ -65,9 +66,10 @@ class _TextColorAndBackgroundColorState extends State<_TextColorAndBackgroundColor> { @override Widget build(BuildContext context) { - final String? selectedTextColor = _getColor(AppFlowyRichTextKeys.textColor); - final String? selectedBackgroundColor = - _getColor(AppFlowyRichTextKeys.backgroundColor); + final String? selectedTextColor = + widget.editorState.getSelectionColor(AppFlowyRichTextKeys.textColor); + final String? selectedBackgroundColor = widget.editorState + .getSelectionColor(AppFlowyRichTextKeys.backgroundColor); return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -149,28 +151,6 @@ class _TextColorAndBackgroundColorState ], ); } - - String? _getColor(String key) { - final selection = widget.selection; - String? color = widget.editorState.toggledStyle[key]; - if (color == null) { - if (selection.isCollapsed && selection.startIndex != 0) { - color = widget.editorState.getDeltaAttributeValueInSelection( - key, - selection.copyWith( - start: selection.start.copyWith( - offset: selection.startIndex - 1, - ), - ), - ); - } else { - color = widget.editorState.getDeltaAttributeValueInSelection( - key, - ); - } - } - return color; - } } class _BackgroundColors extends StatelessWidget { diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_font_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart similarity index 98% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_font_item.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart index 13384f9b87..0265ea2c02 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_font_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart @@ -1,13 +1,12 @@ import 'dart:async'; -import 'package:flutter/material.dart'; - import 'package:appflowy/mobile/presentation/setting/font/font_picker_screen.dart'; import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy/util/google_font_family_extension.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:provider/provider.dart'; diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_heading_and_text_items.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_heading_and_text_items.dart similarity index 94% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_heading_and_text_items.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_heading_and_text_items.dart index bce94a397c..b98a6fddff 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_heading_and_text_items.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_heading_and_text_items.dart @@ -19,25 +19,25 @@ class HeadingsAndTextItems extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ _HeadingOrTextItem( - icon: FlowySvgs.m_aa_h1_s, + icon: FlowySvgs.m_aa_h1_m, blockType: HeadingBlockKeys.type, editorState: editorState, level: 1, ), _HeadingOrTextItem( - icon: FlowySvgs.m_aa_h2_s, + icon: FlowySvgs.m_aa_h2_m, blockType: HeadingBlockKeys.type, editorState: editorState, level: 2, ), _HeadingOrTextItem( - icon: FlowySvgs.m_aa_h3_s, + icon: FlowySvgs.m_aa_h3_m, blockType: HeadingBlockKeys.type, editorState: editorState, level: 3, ), _HeadingOrTextItem( - icon: FlowySvgs.m_aa_text_s, + icon: FlowySvgs.m_aa_paragraph_m, blockType: ParagraphBlockKeys.type, editorState: editorState, ), diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_indent_items.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_indent_items.dart similarity index 92% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_indent_items.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_indent_items.dart index 0188ceef2e..2ddcd4dacb 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_indent_items.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_indent_items.dart @@ -1,5 +1,5 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; @@ -22,7 +22,7 @@ class IndentAndOutdentItems extends StatelessWidget { children: [ MobileToolbarMenuItemWrapper( size: const Size(95, 52), - icon: FlowySvgs.m_aa_outdent_s, + icon: FlowySvgs.m_aa_outdent_m, enable: isOutdentable(editorState), isSelected: false, enableTopRightRadius: false, @@ -37,7 +37,7 @@ class IndentAndOutdentItems extends StatelessWidget { const ScaledVerticalDivider(), MobileToolbarMenuItemWrapper( size: const Size(95, 52), - icon: FlowySvgs.m_aa_indent_s, + icon: FlowySvgs.m_aa_indent_m, enable: isIndentable(editorState), isSelected: false, enableTopLeftRadius: false, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_menu_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_menu_item.dart similarity index 97% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_menu_item.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_menu_item.dart index 156f743b12..7464514f93 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_menu_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_menu_item.dart @@ -1,4 +1,4 @@ -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:flowy_svg/flowy_svg.dart'; import 'package:flutter/material.dart'; diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_popup_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_popup_menu.dart similarity index 98% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_popup_menu.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_popup_menu.dart index 6eb948fa1b..d678d7c0ba 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_popup_menu.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_popup_menu.dart @@ -1,4 +1,4 @@ -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart similarity index 98% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart index 6bc3d401af..d35b8d56df 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart @@ -4,11 +4,11 @@ import 'package:flutter/material.dart'; class ToolbarColorExtension extends ThemeExtension { factory ToolbarColorExtension.light() => const ToolbarColorExtension( - toolbarBackgroundColor: Color(0xFFF3F3F8), + toolbarBackgroundColor: Color(0xFFFFFFFF), toolbarItemIconColor: Color(0xFF1F2329), toolbarItemIconDisabledColor: Color(0xFF999BA0), toolbarItemIconSelectedColor: Color(0x1F232914), - toolbarItemSelectedBackgroundColor: Color(0x1F232914), + toolbarItemSelectedBackgroundColor: Color(0xFFF2F2F2), toolbarMenuBackgroundColor: Color(0xFFFFFFFF), toolbarMenuItemBackgroundColor: Color(0xFFF2F2F7), toolbarMenuItemSelectedBackgroundColor: Color(0xFF00BCF0), diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_toolbar_item.dart index c26a33adb2..7489911fb7 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_toolbar_item.dart @@ -1,24 +1,23 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_align_items.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_bius_items.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_block_items.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_item.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_font_item.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_heading_and_text_items.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_indent_items.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_align_items.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_bius_items.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_block_items.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_heading_and_text_items.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_indent_items.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; final aaToolbarItem = AppFlowyMobileToolbarItem( - pilotAtExpandedSelection: true, itemBuilder: (context, editorState, service, onMenu, _) { return AppFlowyMobileToolbarIconItem( editorState: editorState, isSelected: () => service.showMenuNotifier.value, keepSelectedStatus: true, - icon: FlowySvgs.m_toolbar_aa_s, + icon: FlowySvgs.m_toolbar_aa_m, onTap: () => onMenu?.call(), ); }, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart index aac7306be5..0b1ae151d3 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart @@ -7,7 +7,7 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_placeholder.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_item/mobile_add_block_toolbar_item.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy/startup/tasks/app_widget.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; @@ -19,7 +19,7 @@ final addBlockToolbarItem = AppFlowyMobileToolbarItem( itemBuilder: (context, editorState, service, __, onAction) { return AppFlowyMobileToolbarIconItem( editorState: editorState, - icon: FlowySvgs.m_toolbar_add_s, + icon: FlowySvgs.m_toolbar_add_m, onTap: () { final selection = editorState.selection; service.closeKeyboard(); 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 e76e7d51ab..bf7d7d098f 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 @@ -1,8 +1,8 @@ import 'dart:async'; import 'dart:io'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_close_keyboard_or_menu_button.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/keyboard_height_observer.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; @@ -26,13 +26,15 @@ class AppFlowyMobileToolbar extends StatefulWidget { super.key, this.toolbarHeight = 50.0, required this.editorState, - required this.toolbarItems, + required this.toolbarItemsBuilder, required this.child, }); final EditorState editorState; final double toolbarHeight; - final List toolbarItems; + final List Function( + Selection? selection, + ) toolbarItemsBuilder; final Widget child; @override @@ -108,7 +110,7 @@ class _AppFlowyMobileToolbarState extends State { return RepaintBoundary( child: _MobileToolbar( editorState: widget.editorState, - toolbarItems: widget.toolbarItems, + toolbarItems: widget.toolbarItemsBuilder(selection), toolbarHeight: widget.toolbarHeight, ), ); @@ -234,14 +236,14 @@ class _MobileToolbarState extends State<_MobileToolbar> // - otherwise, add a spacer to push the toolbar up when the keyboard is shown return Column( children: [ - Divider( + const Divider( height: 0.5, - color: Colors.grey.withOpacity(0.5), + color: Color(0xFFEDEDED), ), _buildToolbar(context), - Divider( + const Divider( height: 0.5, - color: Colors.grey.withOpacity(0.5), + color: Color(0xFFEDEDED), ), _buildMenuOrSpacer(context), ], @@ -342,62 +344,29 @@ class _MobileToolbarState extends State<_MobileToolbar> }, ), ), + const Padding( + padding: EdgeInsets.symmetric(vertical: 13.0), + child: VerticalDivider( + width: 1.0, + thickness: 1.0, + color: Color(0xFFD9D9D9), + ), + ), // close menu or close keyboard button - ClipRect( - clipper: const _MyClipper( - offset: -20, - ), - child: ValueListenableBuilder( - valueListenable: showMenuNotifier, - builder: (_, showingMenu, __) { - return ValueListenableBuilder( - valueListenable: toolbarOffset, - builder: (_, offset, __) { - final showShadow = offset > 0; - return DecoratedBox( - decoration: BoxDecoration( - color: theme.toolbarBackgroundColor, - boxShadow: showShadow - ? [ - BoxShadow( - color: theme.toolbarShadowColor, - blurRadius: 20, - offset: const Offset(-2, 0), - spreadRadius: -10, - ), - ] - : null, - ), - child: CloseKeyboardOrMenuButton( - showingMenu: showingMenu, - onPressed: () { - if (showingMenu) { - // close the menu and show the keyboard - closeItemMenu(); - _showKeyboard(); - } else { - closeKeyboardInitiative = true; - // close the keyboard and clear the selection - // if the selection is null, the keyboard and the toolbar will be hidden automatically - widget.editorState.selection = null; + CloseKeyboardOrMenuButton( + onPressed: () { + closeKeyboardInitiative = true; + // close the keyboard and clear the selection + // if the selection is null, the keyboard and the toolbar will be hidden automatically + widget.editorState.selection = null; - // sometimes, the keyboard is not closed after the selection is cleared - if (Platform.isAndroid) { - SystemChannels.textInput - .invokeMethod('TextInput.hide'); - } - } - }, - ), - ); - }, - ); - }, - ), - ), - const SizedBox( - width: 4.0, + // sometimes, the keyboard is not closed after the selection is cleared + if (Platform.isAndroid) { + SystemChannels.textInput.invokeMethod('TextInput.hide'); + } + }, ), + const HSpace(4.0), ], ), ); @@ -489,7 +458,7 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> { @override Widget build(BuildContext context) { final children = [ - const HSpace(16), + const HSpace(8), ...widget.toolbarItems .mapIndexed( (index, element) => element.itemBuilder.call( @@ -567,16 +536,16 @@ class _ToolbarItemListViewState extends State<_ToolbarItemListView> { } } -class _MyClipper extends CustomClipper { - const _MyClipper({ - this.offset = 0, - }); +// class _MyClipper extends CustomClipper { +// const _MyClipper({ +// this.offset = 0, +// }); - final double offset; +// final double offset; - @override - Rect getClip(Size size) => Rect.fromLTWH(offset, 0, 64.0, 46.0); +// @override +// Rect getClip(Size size) => Rect.fromLTWH(offset, 0, 64.0, 46.0); - @override - bool shouldReclip(CustomClipper oldClipper) => false; -} +// @override +// bool shouldReclip(CustomClipper oldClipper) => false; +// } diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart index 61654ff5cd..d138e644cd 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart @@ -1,7 +1,7 @@ import 'dart:async'; import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; @@ -45,6 +45,7 @@ class AppFlowyMobileToolbarIconItem extends StatefulWidget { this.iconBuilder, this.isSelected, this.shouldListenToToggledStyle = false, + this.enable, required this.onTap, required this.editorState, }); @@ -56,6 +57,7 @@ class AppFlowyMobileToolbarIconItem extends StatefulWidget { final bool Function()? isSelected; final bool shouldListenToToggledStyle; final EditorState editorState; + final bool Function()? enable; @override State createState() => @@ -101,32 +103,40 @@ class _AppFlowyMobileToolbarIconItemState @override Widget build(BuildContext context) { final theme = ToolbarColorExtension.of(context); + final enable = widget.enable?.call() ?? true; return Padding( - padding: const EdgeInsets.symmetric(vertical: 4), + padding: const EdgeInsets.symmetric(vertical: 5), child: GestureDetector( behavior: HitTestBehavior.opaque, onTap: () { widget.onTap(); _rebuild(); }, - child: Container( - width: 48, - padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 8), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: isSelected ? theme.toolbarItemSelectedBackgroundColor : null, - ), - child: widget.iconBuilder?.call(context) ?? - FlowySvg( - widget.icon!, - color: theme.toolbarItemIconColor, + child: widget.iconBuilder?.call(context) ?? + Container( + width: 40, + padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(9), + color: isSelected + ? theme.toolbarItemSelectedBackgroundColor + : null, ), - ), + child: FlowySvg( + widget.icon!, + color: enable + ? theme.toolbarItemIconColor + : theme.toolbarItemIconDisabledColor, + ), + ), ), ); } void _rebuild() { + if (!context.mounted) { + return; + } setState(() { isSelected = (widget.keepSelectedStatus && widget.isSelected == null) ? !isSelected diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biuc_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart similarity index 55% rename from frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biuc_toolbar_item.dart rename to frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart index 16eced6d28..f0bfda04a2 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biuc_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart @@ -1,7 +1,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:flutter/widgets.dart'; final boldToolbarItem = AppFlowyMobileToolbarItem( itemBuilder: (context, editorState, _, __, onAction) { @@ -13,7 +14,7 @@ final boldToolbarItem = AppFlowyMobileToolbarItem( AppFlowyRichTextKeys.bold, ) && editorState.toggledStyle[AppFlowyRichTextKeys.bold] != false, - icon: FlowySvgs.m_toolbar_bold_s, + icon: FlowySvgs.m_toolbar_bold_m, onTap: () async => editorState.toggleAttribute( AppFlowyRichTextKeys.bold, selectionExtraInfo: { @@ -32,7 +33,7 @@ final italicToolbarItem = AppFlowyMobileToolbarItem( isSelected: () => editorState.isTextDecorationSelected( AppFlowyRichTextKeys.italic, ), - icon: FlowySvgs.m_toolbar_italic_s, + icon: FlowySvgs.m_toolbar_italic_m, onTap: () async => editorState.toggleAttribute( AppFlowyRichTextKeys.italic, selectionExtraInfo: { @@ -51,7 +52,7 @@ final underlineToolbarItem = AppFlowyMobileToolbarItem( isSelected: () => editorState.isTextDecorationSelected( AppFlowyRichTextKeys.underline, ), - icon: FlowySvgs.m_toolbar_underline_s, + icon: FlowySvgs.m_toolbar_underline_m, onTap: () async => editorState.toggleAttribute( AppFlowyRichTextKeys.underline, selectionExtraInfo: { @@ -62,12 +63,73 @@ final underlineToolbarItem = AppFlowyMobileToolbarItem( }, ); +final strikethroughToolbarItem = AppFlowyMobileToolbarItem( + itemBuilder: (context, editorState, _, __, onAction) { + return AppFlowyMobileToolbarIconItem( + editorState: editorState, + shouldListenToToggledStyle: true, + isSelected: () => editorState.isTextDecorationSelected( + AppFlowyRichTextKeys.strikethrough, + ), + icon: FlowySvgs.m_toolbar_strike_m, + onTap: () async => editorState.toggleAttribute( + AppFlowyRichTextKeys.strikethrough, + selectionExtraInfo: { + selectionExtraInfoDisableFloatingToolbar: true, + }, + ), + ); + }, +); + final colorToolbarItem = AppFlowyMobileToolbarItem( itemBuilder: (context, editorState, service, __, onAction) { return AppFlowyMobileToolbarIconItem( editorState: editorState, shouldListenToToggledStyle: true, - icon: FlowySvgs.m_toolbar_color_s, + icon: FlowySvgs.m_aa_font_color_m, + iconBuilder: (context) { + String? getColor(String key) { + final selection = editorState.selection; + if (selection == null) { + return null; + } + String? color = editorState.toggledStyle[key]; + if (color == null) { + if (selection.isCollapsed && selection.startIndex != 0) { + color = editorState.getDeltaAttributeValueInSelection( + key, + selection.copyWith( + start: selection.start.copyWith( + offset: selection.startIndex - 1, + ), + ), + ); + } else { + color = editorState.getDeltaAttributeValueInSelection( + key, + ); + } + } + return color; + } + + final textColor = getColor(AppFlowyRichTextKeys.textColor); + final backgroundColor = getColor(AppFlowyRichTextKeys.backgroundColor); + + return Container( + width: 40, + padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(9), + color: backgroundColor?.tryToColor(), + ), + child: FlowySvg( + FlowySvgs.m_aa_font_color_m, + color: textColor?.tryToColor(), + ), + ); + }, onTap: () { service.closeKeyboard(); editorState.updateSelectionWithReason( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/checkbox_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/checkbox_toolbar_item.dart deleted file mode 100644 index 2b02bb2e5a..0000000000 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/checkbox_toolbar_item.dart +++ /dev/null @@ -1,24 +0,0 @@ -import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; -import 'package:appflowy_editor/appflowy_editor.dart'; - -final todoListToolbarItem = AppFlowyMobileToolbarItem( - itemBuilder: (context, editorState, _, __, onAction) { - final isSelected = editorState.isBlockTypeSelected(TodoListBlockKeys.type); - return AppFlowyMobileToolbarIconItem( - editorState: editorState, - shouldListenToToggledStyle: true, - keepSelectedStatus: true, - isSelected: () => isSelected, - icon: FlowySvgs.m_toolbar_checkbox_s, - onTap: () async { - await editorState.convertBlockType( - TodoListBlockKeys.type, - extraAttributes: { - TodoListBlockKeys.checked: false, - }, - ); - }, - ); - }, -); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/indent_outdent_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/indent_outdent_toolbar_item.dart new file mode 100644 index 0000000000..290fa2d3e0 --- /dev/null +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/indent_outdent_toolbar_item.dart @@ -0,0 +1,35 @@ +import 'package:appflowy/generated/flowy_svgs.g.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; +import 'package:appflowy_editor/appflowy_editor.dart'; + +final indentToolbarItem = AppFlowyMobileToolbarItem( + itemBuilder: (context, editorState, _, __, onAction) { + return AppFlowyMobileToolbarIconItem( + editorState: editorState, + shouldListenToToggledStyle: true, + keepSelectedStatus: true, + isSelected: () => false, + enable: () => isIndentable(editorState), + icon: FlowySvgs.m_aa_indent_m, + onTap: () async { + indentCommand.execute(editorState); + }, + ); + }, +); + +final outdentToolbarItem = AppFlowyMobileToolbarItem( + itemBuilder: (context, editorState, _, __, onAction) { + return AppFlowyMobileToolbarIconItem( + editorState: editorState, + shouldListenToToggledStyle: true, + keepSelectedStatus: true, + isSelected: () => false, + enable: () => isOutdentable(editorState), + icon: FlowySvgs.m_aa_outdent_m, + onTap: () async { + outdentCommand.execute(editorState); + }, + ); + }, +); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/list_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/list_toolbar_item.dart new file mode 100644 index 0000000000..240ea7072e --- /dev/null +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/list_toolbar_item.dart @@ -0,0 +1,61 @@ +import 'package:appflowy/generated/flowy_svgs.g.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; +import 'package:appflowy_editor/appflowy_editor.dart'; + +final todoListToolbarItem = AppFlowyMobileToolbarItem( + itemBuilder: (context, editorState, _, __, onAction) { + return AppFlowyMobileToolbarIconItem( + editorState: editorState, + shouldListenToToggledStyle: true, + keepSelectedStatus: true, + isSelected: () => false, + icon: FlowySvgs.m_toolbar_checkbox_m, + onTap: () async { + await editorState.convertBlockType( + TodoListBlockKeys.type, + extraAttributes: { + TodoListBlockKeys.checked: false, + }, + ); + }, + ); + }, +); + +final numberedListToolbarItem = AppFlowyMobileToolbarItem( + itemBuilder: (context, editorState, _, __, onAction) { + final isSelected = + editorState.isBlockTypeSelected(NumberedListBlockKeys.type); + return AppFlowyMobileToolbarIconItem( + editorState: editorState, + shouldListenToToggledStyle: true, + keepSelectedStatus: true, + isSelected: () => isSelected, + icon: FlowySvgs.m_toolbar_numbered_list_m, + onTap: () async { + await editorState.convertBlockType( + NumberedListBlockKeys.type, + ); + }, + ); + }, +); + +final bulletedListToolbarItem = AppFlowyMobileToolbarItem( + itemBuilder: (context, editorState, _, __, onAction) { + final isSelected = + editorState.isBlockTypeSelected(BulletedListBlockKeys.type); + return AppFlowyMobileToolbarIconItem( + editorState: editorState, + shouldListenToToggledStyle: true, + keepSelectedStatus: true, + isSelected: () => isSelected, + icon: FlowySvgs.m_toolbar_bulleted_list_m, + onTap: () async { + await editorState.convertBlockType( + BulletedListBlockKeys.type, + ); + }, + ); + }, +); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/toolbar_item_builder.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/toolbar_item_builder.dart new file mode 100644 index 0000000000..adb1feeb35 --- /dev/null +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/toolbar_item_builder.dart @@ -0,0 +1,81 @@ +import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; +import 'package:appflowy_editor/appflowy_editor.dart'; + +final _listBlockTypes = [ + BulletedListBlockKeys.type, + NumberedListBlockKeys.type, + TodoListBlockKeys.type, +]; + +final _defaultToolbarItems = [ + addBlockToolbarItem, + aaToolbarItem, + todoListToolbarItem, + bulletedListToolbarItem, + numberedListToolbarItem, + boldToolbarItem, + italicToolbarItem, + underlineToolbarItem, + strikethroughToolbarItem, + colorToolbarItem, + undoToolbarItem, + redoToolbarItem, +]; + +final _listToolbarItems = [ + addBlockToolbarItem, + aaToolbarItem, + outdentToolbarItem, + indentToolbarItem, + todoListToolbarItem, + bulletedListToolbarItem, + numberedListToolbarItem, + boldToolbarItem, + italicToolbarItem, + underlineToolbarItem, + strikethroughToolbarItem, + colorToolbarItem, + undoToolbarItem, + redoToolbarItem, +]; + +final _textToolbarItems = [ + aaToolbarItem, + boldToolbarItem, + italicToolbarItem, + underlineToolbarItem, + strikethroughToolbarItem, + colorToolbarItem, +]; + +/// Calculate the toolbar items based on the current selection. +/// +/// Default: +/// Add, Aa, Todo List, Image, Bulleted List, Numbered List, B, I, U, S, Color, Undo, Redo +/// +/// Selecting text: +/// Aa, B, I, U, S, Color +/// +/// Selecting a list: +/// Add, Aa, Indent, Outdent, Bulleted List, Numbered List, Todo List B, I, U, S +List buildMobileToolbarItems( + EditorState editorState, + Selection? selection, +) { + if (selection == null) { + return []; + } + + if (!selection.isCollapsed) { + return _textToolbarItems; + } + + final allSelectedAreListType = editorState + .getSelectedNodes(selection: selection) + .every((node) => _listBlockTypes.contains(node.type)); + if (allSelectedAreListType) { + return _listToolbarItems; + } + + return _defaultToolbarItems; +} diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/undo_redo_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/undo_redo_toolbar_item.dart index 65c4a9b783..5578d8a33c 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/undo_redo_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/undo_redo_toolbar_item.dart @@ -1,21 +1,28 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:flutter/widgets.dart'; final undoToolbarItem = AppFlowyMobileToolbarItem( - pilotAtCollapsedSelection: true, itemBuilder: (context, editorState, _, __, onAction) { final theme = ToolbarColorExtension.of(context); return AppFlowyMobileToolbarIconItem( editorState: editorState, iconBuilder: (context) { final canUndo = editorState.undoManager.undoStack.isNonEmpty; - return FlowySvg( - FlowySvgs.m_toolbar_undo_s, - color: canUndo - ? theme.toolbarItemIconColor - : theme.toolbarItemIconDisabledColor, + return Container( + width: 40, + padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(9), + ), + child: FlowySvg( + FlowySvgs.m_toolbar_undo_m, + color: canUndo + ? theme.toolbarItemIconColor + : theme.toolbarItemIconDisabledColor, + ), ); }, onTap: () => undoCommand.execute(editorState), @@ -30,11 +37,18 @@ final redoToolbarItem = AppFlowyMobileToolbarItem( editorState: editorState, iconBuilder: (context) { final canRedo = editorState.undoManager.redoStack.isNonEmpty; - return FlowySvg( - FlowySvgs.m_toolbar_redo_s, - color: canRedo - ? theme.toolbarItemIconColor - : theme.toolbarItemIconDisabledColor, + return Container( + width: 40, + padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(9), + ), + child: FlowySvg( + FlowySvgs.m_toolbar_redo_m, + color: canRedo + ? theme.toolbarItemIconColor + : theme.toolbarItemIconDisabledColor, + ), ); }, onTap: () => redoCommand.execute(editorState), diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart index 4c3f1da550..07983ab078 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart @@ -1,5 +1,5 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; @@ -24,6 +24,7 @@ class MobileToolbarMenuItemWrapper extends StatelessWidget { this.showRightArrow = false, this.textPadding = EdgeInsets.zero, required this.onTap, + this.iconColor, }); final Size size; @@ -43,17 +44,20 @@ class MobileToolbarMenuItemWrapper extends StatelessWidget { final Color? backgroundColor; final Color? selectedBackgroundColor; final EdgeInsets textPadding; + final Color? iconColor; @override Widget build(BuildContext context) { final theme = ToolbarColorExtension.of(context); - Color? iconColor; - if (enable != null) { - iconColor = enable! ? null : theme.toolbarMenuIconDisabledColor; - } else { - iconColor = isSelected - ? theme.toolbarMenuIconSelectedColor - : theme.toolbarMenuIconColor; + Color? iconColor = this.iconColor; + if (iconColor == null) { + if (enable != null) { + iconColor = enable! ? null : theme.toolbarMenuIconDisabledColor; + } else { + iconColor = isSelected + ? theme.toolbarMenuIconSelectedColor + : theme.toolbarMenuIconColor; + } } final textColor = enable == false ? theme.toolbarMenuIconDisabledColor : null; diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart index 2850dd3d1d..f5f1331c94 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart @@ -34,9 +34,11 @@ export 'mobile_toolbar_v3/aa_toolbar_item.dart'; export 'mobile_toolbar_v3/add_block_toolbar_item.dart'; export 'mobile_toolbar_v3/appflowy_mobile_toolbar.dart'; export 'mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart'; -export 'mobile_toolbar_v3/biuc_toolbar_item.dart'; -export 'mobile_toolbar_v3/checkbox_toolbar_item.dart'; +export 'mobile_toolbar_v3/biusc_toolbar_item.dart'; +export 'mobile_toolbar_v3/indent_outdent_toolbar_item.dart'; +export 'mobile_toolbar_v3/list_toolbar_item.dart'; export 'mobile_toolbar_v3/more_toolbar_item.dart'; +export 'mobile_toolbar_v3/toolbar_item_builder.dart'; export 'mobile_toolbar_v3/undo_redo_toolbar_item.dart'; export 'mobile_toolbar_v3/util.dart'; export 'openai/widgets/auto_completion_node_widget.dart'; diff --git a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart index 6057ddc8d2..2cbbf5476e 100644 --- a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart +++ b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart @@ -1,5 +1,5 @@ // ThemeData in mobile -import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart'; +import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart'; import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/theme.dart'; diff --git a/frontend/resources/flowy_icons/16x/m_aa_indent.svg b/frontend/resources/flowy_icons/16x/m_aa_indent.svg index 42dbcd6051..43d1d43786 100644 --- a/frontend/resources/flowy_icons/16x/m_aa_indent.svg +++ b/frontend/resources/flowy_icons/16x/m_aa_indent.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/frontend/resources/flowy_icons/16x/m_aa_outdent.svg b/frontend/resources/flowy_icons/16x/m_aa_outdent.svg index 43d1d43786..42dbcd6051 100644 --- a/frontend/resources/flowy_icons/16x/m_aa_outdent.svg +++ b/frontend/resources/flowy_icons/16x/m_aa_outdent.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_align_center.svg b/frontend/resources/flowy_icons/24x/m_aa_align_center.svg new file mode 100644 index 0000000000..1a287877df --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_align_center.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_align_left.svg b/frontend/resources/flowy_icons/24x/m_aa_align_left.svg new file mode 100644 index 0000000000..8b26e2bddf --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_align_left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_align_right.svg b/frontend/resources/flowy_icons/24x/m_aa_align_right.svg new file mode 100644 index 0000000000..54f91608b6 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_align_right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_code.svg b/frontend/resources/flowy_icons/24x/m_aa_code.svg new file mode 100644 index 0000000000..5e7ee42d4c --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_code.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_font_color.svg b/frontend/resources/flowy_icons/24x/m_aa_font_color.svg new file mode 100644 index 0000000000..919aa91c59 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_font_color.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_h1.svg b/frontend/resources/flowy_icons/24x/m_aa_h1.svg new file mode 100644 index 0000000000..478192490c --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_h1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_h2.svg b/frontend/resources/flowy_icons/24x/m_aa_h2.svg new file mode 100644 index 0000000000..49b99983f5 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_h2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_h3.svg b/frontend/resources/flowy_icons/24x/m_aa_h3.svg new file mode 100644 index 0000000000..0d1a57cd8f --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_h3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_indent.svg b/frontend/resources/flowy_icons/24x/m_aa_indent.svg new file mode 100644 index 0000000000..6dd3e72a16 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_indent.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_math.svg b/frontend/resources/flowy_icons/24x/m_aa_math.svg new file mode 100644 index 0000000000..0590a34a9d --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_math.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_outdent.svg b/frontend/resources/flowy_icons/24x/m_aa_outdent.svg new file mode 100644 index 0000000000..2194ecc259 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_outdent.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_paragraph.svg b/frontend/resources/flowy_icons/24x/m_aa_paragraph.svg new file mode 100644 index 0000000000..5b04dce7f1 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_paragraph.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_aa_quote.svg b/frontend/resources/flowy_icons/24x/m_aa_quote.svg new file mode 100644 index 0000000000..01a92b4f99 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_aa_quote.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_aa.svg b/frontend/resources/flowy_icons/24x/m_toolbar_aa.svg new file mode 100644 index 0000000000..6fb13d985a --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_aa.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_add.svg b/frontend/resources/flowy_icons/24x/m_toolbar_add.svg new file mode 100644 index 0000000000..651c3d1638 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_add.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_bold.svg b/frontend/resources/flowy_icons/24x/m_toolbar_bold.svg new file mode 100644 index 0000000000..a3302284a5 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_bold.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_bulleted_list.svg b/frontend/resources/flowy_icons/24x/m_toolbar_bulleted_list.svg new file mode 100644 index 0000000000..46dbd0f2fd --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_bulleted_list.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_calendar.svg b/frontend/resources/flowy_icons/24x/m_toolbar_calendar.svg new file mode 100644 index 0000000000..43a60cfe08 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_calendar.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_checkbox.svg b/frontend/resources/flowy_icons/24x/m_toolbar_checkbox.svg new file mode 100644 index 0000000000..a84bbc94b0 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_checkbox.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_image.svg b/frontend/resources/flowy_icons/24x/m_toolbar_image.svg new file mode 100644 index 0000000000..f3fc20769e --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_image.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_italic.svg b/frontend/resources/flowy_icons/24x/m_toolbar_italic.svg new file mode 100644 index 0000000000..7543a1eceb --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_italic.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_keyboard.svg b/frontend/resources/flowy_icons/24x/m_toolbar_keyboard.svg new file mode 100644 index 0000000000..42c7a390b7 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_keyboard.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_link.svg b/frontend/resources/flowy_icons/24x/m_toolbar_link.svg new file mode 100644 index 0000000000..7ee84011b9 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_link.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_numbered_list.svg b/frontend/resources/flowy_icons/24x/m_toolbar_numbered_list.svg new file mode 100644 index 0000000000..787a05fa0d --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_numbered_list.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_redo.svg b/frontend/resources/flowy_icons/24x/m_toolbar_redo.svg new file mode 100644 index 0000000000..3b521ae091 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_redo.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_strike.svg b/frontend/resources/flowy_icons/24x/m_toolbar_strike.svg new file mode 100644 index 0000000000..209ea728c7 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_strike.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_underline.svg b/frontend/resources/flowy_icons/24x/m_toolbar_underline.svg new file mode 100644 index 0000000000..f96282ca4f --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_underline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_toolbar_undo.svg b/frontend/resources/flowy_icons/24x/m_toolbar_undo.svg new file mode 100644 index 0000000000..617dac39fe --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_toolbar_undo.svg @@ -0,0 +1,3 @@ + + +