Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve mobile toolbar design (v3) (#4891)

Browse Source 
* 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
This commit is contained in:
Lucas.Xu
2024-03-20 14:41:12 +07:00
committed by GitHub
parent d19fa5a34a
commit 7a9cb03c8e
57 changed files with 596 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
View File

@ -297,19 +297,12 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
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(

28
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart Normal file
View File

@ -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<String>(
key,
selection.copyWith(
start: selection.start.copyWith(
offset: selection.startIndex - 1,
),
),
);
} else {
color = getDeltaAttributeValueInSelection<String>(
key,
);
}
}
return color;
}
}

12
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_align_items.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_align_items.dart
View File

@ -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

10
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_bius_items.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_bius_items.dart
View File

@ -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

16
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_block_items.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_block_items.dart
View File

@ -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,

15
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_close_keyboard_or_menu_button.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart
View File

@ -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,
),
);

48
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_item.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart
View File

@ -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<String>(
AppFlowyRichTextKeys.backgroundColor,
selection.copyWith(
start: selection.start.copyWith(
offset: selection.startIndex - 1,
),
),
);
} else {
backgroundColor = editorState.getDeltaAttributeValueInSelection<String>(
AppFlowyRichTextKeys.backgroundColor,
);
}
}
if (backgroundColor != null && int.tryParse(backgroundColor) != null) {
return Color(int.parse(backgroundColor));
}
return null;
}
}

32
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart
View File

@ -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<String>(
key,
selection.copyWith(
start: selection.start.copyWith(
offset: selection.startIndex - 1,
),
),
);
} else {
color = widget.editorState.getDeltaAttributeValueInSelection<String>(
key,
);
}
}
return color;
}
}
class _BackgroundColors extends StatelessWidget {

5
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_font_item.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart
View File

@ -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';

8
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_heading_and_text_items.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_heading_and_text_items.dart
View File

@ -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,
),

6
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_indent_items.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_indent_items.dart
View File

@ -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,

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_menu_item.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_menu_item.dart
View File

@ -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';

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_popup_menu.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_popup_menu.dart
View File

@ -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';

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart
View File

@ -4,11 +4,11 @@ import 'package:flutter/material.dart';
class ToolbarColorExtension extends ThemeExtension<ToolbarColorExtension> {
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),

19
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_toolbar_item.dart
View File

@ -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(),
);
},

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart
View File

@ -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();

115
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart
View File

@ -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<AppFlowyMobileToolbarItem> toolbarItems;
final List<AppFlowyMobileToolbarItem> Function(
Selection? selection,
) toolbarItemsBuilder;
final Widget child;
@override
@ -108,7 +110,7 @@ class _AppFlowyMobileToolbarState extends State<AppFlowyMobileToolbar> {
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<Rect> {
const _MyClipper({
this.offset = 0,
});
// class _MyClipper extends CustomClipper<Rect> {
// 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<Rect> oldClipper) => false;
}
// @override
// bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
// }

38
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart
View File

@ -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<AppFlowyMobileToolbarIconItem> 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

72
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biuc_toolbar_item.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart
View File

@ -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<String>(
key,
selection.copyWith(
start: selection.start.copyWith(
offset: selection.startIndex - 1,
),
),
);
} else {
color = editorState.getDeltaAttributeValueInSelection<String>(
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(

24
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/checkbox_toolbar_item.dart
View File

@ -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,
},
);
},
);
},
);

35
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/indent_outdent_toolbar_item.dart Normal file
View File

@ -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);
},
);
},
);

61
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/list_toolbar_item.dart Normal file
View File

@ -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,
);
},
);
},
);

81
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/toolbar_item_builder.dart Normal file
View File

@ -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<AppFlowyMobileToolbarItem> 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;
}

38
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/undo_redo_toolbar_item.dart
View File

@ -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),

20
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/util.dart
View File

@ -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;

6
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart
View File

@ -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';

2
frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart
View File

@ -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';

10
frontend/resources/flowy_icons/16x/m_aa_indent.svg
View File

@ -1,6 +1,6 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.20422 4C3.71824 4 3.32422 4.39402 3.32422 4.88C3.32422 5.36598 3.71824 5.76 4.20422 5.76H20.0442C20.5302 5.76 20.9242 5.36598 20.9242 4.88C20.9242 4.39402 20.5302 4 20.0442 4H4.20422Z" fill="#2B2F36"/>
<path d="M4.20422 18.08C3.71824 18.08 3.32422 18.474 3.32422 18.96C3.32422 19.446 3.71824 19.84 4.20422 19.84H20.0442C20.5302 19.84 20.9242 19.446 20.9242 18.96C20.9242 18.474 20.5302 18.08 20.0442 18.08H4.20422Z" fill="#2B2F36"/>
<path d="M12.1242 11.92C12.1242 11.434 12.5182 11.04 13.0042 11.04H20.0442C20.5302 11.04 20.9242 11.434 20.9242 11.92C20.9242 12.406 20.5302 12.8 20.0442 12.8H13.0042C12.5182 12.8 12.1242 12.406 12.1242 11.92Z" fill="#2B2F36"/>
<path d="M7.85323 12.4832C8.22878 12.2016 8.22878 11.6384 7.85323 11.3568L4.45064 8.80477C3.98647 8.45672 3.32422 8.7879 3.32422 9.36798V14.472C3.32422 15.0521 3.98647 15.3833 4.45064 15.0352L7.85323 12.4832Z" fill="#2B2F36"/>
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.29513 4.33325C4.76862 4.33325 4.3418 4.76007 4.3418 5.28659C4.3418 5.8131 4.76862 6.23992 5.29513 6.23992H22.4551C22.9816 6.23992 23.4085 5.8131 23.4085 5.28659C23.4085 4.76007 22.9816 4.33325 22.4551 4.33325H5.29513Z" fill="#2B2F36"/>
<path d="M5.29513 19.5866C4.76862 19.5866 4.3418 20.0134 4.3418 20.5399C4.3418 21.0664 4.76862 21.4933 5.29513 21.4933H22.4551C22.9816 21.4933 23.4085 21.0664 23.4085 20.5399C23.4085 20.0134 22.9816 19.5866 22.4551 19.5866H5.29513Z" fill="#2B2F36"/>
<path d="M4.84961 12.9131C4.84961 12.3865 5.27643 11.9597 5.80294 11.9597H13.4296C13.9561 11.9597 14.3829 12.3865 14.3829 12.9131C14.3829 13.4396 13.9561 13.8664 13.4296 13.8664H5.80294C5.27643 13.8664 4.84961 13.4396 4.84961 12.9131Z" fill="#2B2F36"/>
<path d="M18.5121 12.3029C18.1053 12.6079 18.1053 13.2181 18.5121 13.5231L22.1983 16.2878C22.7011 16.6649 23.4186 16.3061 23.4186 15.6777V10.1483C23.4186 9.51986 22.7011 9.16111 22.1983 9.5382L18.5121 12.3029Z" fill="#2B2F36"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1003 B

After

Width:  |  Height:  |  Size: 1.1 KiB

10
frontend/resources/flowy_icons/16x/m_aa_outdent.svg
View File

@ -1,6 +1,6 @@
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.29513 4.33325C4.76862 4.33325 4.3418 4.76007 4.3418 5.28659C4.3418 5.8131 4.76862 6.23992 5.29513 6.23992H22.4551C22.9816 6.23992 23.4085 5.8131 23.4085 5.28659C23.4085 4.76007 22.9816 4.33325 22.4551 4.33325H5.29513Z" fill="#2B2F36"/>
<path d="M5.29513 19.5866C4.76862 19.5866 4.3418 20.0134 4.3418 20.5399C4.3418 21.0664 4.76862 21.4933 5.29513 21.4933H22.4551C22.9816 21.4933 23.4085 21.0664 23.4085 20.5399C23.4085 20.0134 22.9816 19.5866 22.4551 19.5866H5.29513Z" fill="#2B2F36"/>
<path d="M4.84961 12.9131C4.84961 12.3865 5.27643 11.9597 5.80294 11.9597H13.4296C13.9561 11.9597 14.3829 12.3865 14.3829 12.9131C14.3829 13.4396 13.9561 13.8664 13.4296 13.8664H5.80294C5.27643 13.8664 4.84961 13.4396 4.84961 12.9131Z" fill="#2B2F36"/>
<path d="M18.5121 12.3029C18.1053 12.6079 18.1053 13.2181 18.5121 13.5231L22.1983 16.2878C22.7011 16.6649 23.4186 16.3061 23.4186 15.6777V10.1483C23.4186 9.51986 22.7011 9.16111 22.1983 9.5382L18.5121 12.3029Z" fill="#2B2F36"/>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.20422 4C3.71824 4 3.32422 4.39402 3.32422 4.88C3.32422 5.36598 3.71824 5.76 4.20422 5.76H20.0442C20.5302 5.76 20.9242 5.36598 20.9242 4.88C20.9242 4.39402 20.5302 4 20.0442 4H4.20422Z" fill="#2B2F36"/>
<path d="M4.20422 18.08C3.71824 18.08 3.32422 18.474 3.32422 18.96C3.32422 19.446 3.71824 19.84 4.20422 19.84H20.0442C20.5302 19.84 20.9242 19.446 20.9242 18.96C20.9242 18.474 20.5302 18.08 20.0442 18.08H4.20422Z" fill="#2B2F36"/>
<path d="M12.1242 11.92C12.1242 11.434 12.5182 11.04 13.0042 11.04H20.0442C20.5302 11.04 20.9242 11.434 20.9242 11.92C20.9242 12.406 20.5302 12.8 20.0442 12.8H13.0042C12.5182 12.8 12.1242 12.406 12.1242 11.92Z" fill="#2B2F36"/>
<path d="M7.85323 12.4832C8.22878 12.2016 8.22878 11.6384 7.85323 11.3568L4.45064 8.80477C3.98647 8.45672 3.32422 8.7879 3.32422 9.36798V14.472C3.32422 15.0521 3.98647 15.3833 4.45064 15.0352L7.85323 12.4832Z" fill="#2B2F36"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1003 B

5
frontend/resources/flowy_icons/24x/m_aa_align_center.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 4.5H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H16" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.75 19.5H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

5
frontend/resources/flowy_icons/24x/m_aa_align_left.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 4.5H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.75 12H11.75" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.75 19.5H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

5
frontend/resources/flowy_icons/24x/m_aa_align_right.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 4.5H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.25 12H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.75 19.5H20.25" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 437 B

4
frontend/resources/flowy_icons/24x/m_aa_code.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 6.5L1.5 12L7 17.5" stroke="#1E2022" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 6.5L22.5 12L17 17.5" stroke="#1E2022" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

4
frontend/resources/flowy_icons/24x/m_aa_font_color.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0728 9.84672H14.1508L14.1201 9.77508L12.0471 4.93434L11.9998 4.824L11.9526 4.93434L9.87952 9.77508L9.84884 9.84672H9.92677H14.0728ZM14.8724 11.5318L14.8561 11.4938L14.8155 11.5016C14.7642 11.5114 14.7113 11.5166 14.6571 11.5166H9.34296C9.28863 11.5166 9.23556 11.5114 9.1842 11.5015L9.14353 11.4937L9.12722 11.5318L7.45253 15.4423C7.27102 15.8662 6.78056 16.0625 6.35709 15.8809C5.93359 15.6992 5.73737 15.2084 5.9189 14.7845L10.826 3.32604C11.2683 2.29319 12.7313 2.29319 13.1737 3.32604L18.0807 14.7845C18.2622 15.2084 18.066 15.6992 17.6425 15.8809C17.219 16.0625 16.7286 15.8662 16.5471 15.4423L14.8724 11.5318Z" fill="#1E2022" stroke="white" stroke-width="0.102805"/>
<rect x="3" y="18.5" width="18" height="3" rx="1.5" fill="#1E2022"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

4
frontend/resources/flowy_icons/24x/m_aa_h1.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 3C1.94772 3 1.5 3.44772 1.5 4V20C1.5 20.5523 1.94772 21 2.5 21C3.05228 21 3.5 20.5523 3.5 20V13H12.5V20C12.5 20.5523 12.9477 21 13.5 21C14.0523 21 14.5 20.5523 14.5 20V4C14.5 3.44772 14.0523 3 13.5 3C12.9477 3 12.5 3.44772 12.5 4V11H3.5V4C3.5 3.44772 3.05228 3 2.5 3Z" fill="#1E2022"/>
<path d="M18.0996 11L21.4746 10L21.4746 20" stroke="#1E2022" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

4
frontend/resources/flowy_icons/24x/m_aa_h2.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.0003 3C1.44785 3 1 3.44772 1 4V20C1 20.5523 1.44785 21 2.0003 21C2.55276 21 3.00061 20.5523 3.00061 20V13H12.0033V20C12.0033 20.5523 12.4512 21 13.0036 21C13.5561 21 14.0039 20.5523 14.0039 20V4C14.0039 3.44772 13.5561 3 13.0036 3C12.4512 3 12.0033 3.44772 12.0033 4V11H3.00061V4C3.00061 3.44772 2.55276 3 2.0003 3Z" fill="#1E2022"/>
<path d="M23 19.8723C23 19.3107 22.5446 18.8565 21.9828 18.8565H18.8604L22.2683 14.5853C22.7557 13.9652 23 13.2546 23 12.4595C22.989 11.4675 22.6529 10.643 21.9941 9.99538C21.3476 9.34354 20.5021 9.01096 19.4712 9C18.5388 9.01105 17.7509 9.33946 17.1142 9.98155C16.7442 10.3676 16.1726 11.026 16.1726 11.584C16.1726 12.1753 16.652 12.6546 17.2435 12.6546C17.806 12.6546 18.0119 12.3067 18.2361 11.9279C18.296 11.8269 18.3571 11.7236 18.4266 11.6241C18.4815 11.5456 18.5435 11.4743 18.6125 11.41C18.8739 11.1579 19.1966 11.0338 19.5941 11.0338C20.0417 11.0431 20.3787 11.1846 20.6159 11.4574C20.8489 11.7361 20.9655 12.0631 20.9655 12.4439C20.9655 12.5899 20.9465 12.747 20.908 12.9152C20.8579 13.0671 20.7516 13.2561 20.5925 13.4633L16.1899 18.9689C16.1331 19.0398 16.1022 19.1279 16.1022 19.2188V20.2409C16.1022 20.462 16.3693 20.8904 16.7088 20.8904H21.9828C22.5446 20.8904 23 20.434 23 19.8723Z" fill="#1E2022"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
frontend/resources/flowy_icons/24x/m_aa_h3.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3C1.44772 3 1 3.44772 1 4V20C1 20.5523 1.44772 21 2 21C2.55228 21 3 20.5523 3 20V13H12V20C12 20.5523 12.4477 21 13 21C13.5523 21 14 20.5523 14 20V4C14 3.44772 13.5523 3 13 3C12.4477 3 12 3.44772 12 4V11H3V4C3 3.44772 2.55228 3 2 3Z" fill="#1E2022"/>
<path d="M22.9997 17.2957C22.9997 16.7854 22.8918 16.2984 22.6764 15.8345C22.4818 15.4356 22.1888 15.0883 21.7989 14.7909C22.1757 14.494 22.4487 14.1604 22.615 13.7897C22.7843 13.3504 22.8669 12.9042 22.8669 12.4422C22.8559 11.526 22.5403 10.7287 21.9236 10.0569C21.2739 9.36276 20.3985 9.01094 19.3095 9C18.436 9.01108 17.6839 9.32307 17.0586 9.93168C16.7102 10.268 16.2107 10.8107 16.2107 11.3157C16.2107 11.8679 16.6584 12.3157 17.2107 12.3157C17.6929 12.3157 17.9779 11.9643 18.2538 11.6242C18.2838 11.5872 18.3137 11.5504 18.3436 11.5142C18.4013 11.4446 18.4652 11.3819 18.536 11.3294C18.7918 11.1295 19.0662 11.0328 19.37 11.0328C19.8014 11.0421 20.1488 11.177 20.4186 11.4376C20.6859 11.705 20.8248 12.0488 20.8341 12.4778C20.8341 12.8946 20.7013 13.2278 20.4342 13.4858C20.0993 13.8206 19.6676 13.8731 19.2225 13.8731C18.6933 13.8731 18.2643 14.3021 18.2643 14.8313C18.2643 15.3605 18.6933 15.7896 19.2225 15.7896C19.2521 15.7896 19.2813 15.7895 19.3102 15.7894C19.7621 15.788 20.1344 15.7868 20.5146 16.1428C20.8052 16.4199 20.9574 16.8166 20.9669 17.3442C20.9575 17.8531 20.8061 18.2384 20.5157 18.5061C20.2196 18.802 19.8669 18.9453 19.4403 18.9453C19.0395 18.9453 18.7281 18.8393 18.4963 18.6297L18.4884 18.6225C18.4155 18.5551 18.3447 18.4847 18.2748 18.4151C18.1754 18.3161 18.0966 18.2084 18.0208 18.1049C17.8281 17.8415 17.6548 17.6047 17.2107 17.6047C16.6584 17.6047 16.2107 18.0524 16.2107 18.6047C16.2107 19.1791 16.7544 19.7949 17.165 20.1377C17.7999 20.6676 18.5158 20.9781 19.3388 20.9781C20.3963 20.9672 21.269 20.6275 21.9478 19.9598C22.6375 19.3087 22.9888 18.4153 22.9997 17.2957Z" fill="#1E2022"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

6
frontend/resources/flowy_icons/24x/m_aa_indent.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.0974V11.0118C3 9.66603 3.91874 9.11307 5.04077 9.78801L5.94387 10.3328L6.84697 10.8777C8.2002 11.6 8.2002 12.5 6.84697 13.3294L5.94387 13.8742L5.04077 14.4191C3.91874 15.0818 3 14.5329 3 13.183V12.0974Z" fill="#1E2022"/>
<path d="M3.7002 4.39999H20.5002" stroke="#1E2022" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12H20.5" stroke="#1E2022" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.7002 19.6H20.5002" stroke="#1E2022" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 684 B

3
frontend/resources/flowy_icons/24x/m_aa_math.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4375 10.2V10.275H13.5125H17.2125C17.6819 10.275 18.0625 10.6555 18.0625 11.125C18.0625 11.5944 17.6819 11.975 17.2125 11.975H13.5125H13.4375V12.05V17.1375C13.4375 19.398 11.5953 21.225 9.34094 21.225C7.09653 21.225 5.2625 19.4061 5.2625 17.1556V17.1375C5.2625 16.668 5.64306 16.2875 6.1125 16.2875C6.58194 16.2875 6.9625 16.668 6.9625 17.1375V17.1556C6.9625 18.461 8.02921 19.525 9.34094 19.525C10.6626 19.525 11.7375 18.4529 11.7375 17.1375L11.7375 12.05V11.975H11.6625H8.8875C8.41806 11.975 8.0375 11.5944 8.0375 11.125C8.0375 10.6555 8.41806 10.275 8.8875 10.275H11.6625H11.7375V10.2V6.96249C11.7375 4.70195 13.5797 2.87499 15.8341 2.87499C18.0785 2.87499 19.9125 4.69387 19.9125 6.94442V6.96249C19.9125 7.43193 19.5319 7.81249 19.0625 7.81249C18.5931 7.81249 18.2125 7.43193 18.2125 6.96249V6.94442C18.2125 5.63894 17.1458 4.57499 15.8341 4.57499C14.5124 4.57499 13.4375 5.64703 13.4375 6.96249V10.2Z" fill="#1E2022" stroke="white" stroke-width="0.15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
frontend/resources/flowy_icons/24x/m_aa_outdent.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 11.9025V12.9881C21 14.3339 20.0813 14.8869 18.9592 14.212L18.0561 13.6671L17.153 13.1223C15.7998 12.4 15.7998 11.5 17.153 10.6706L18.0561 10.1257L18.9592 9.5809C20.0813 8.91815 21 9.46705 21 10.8169V11.9025Z" fill="#1E2022"/>
<path d="M20.2998 19.6L3.4998 19.6" stroke="#1E2022" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12L3.5 12" stroke="#1E2022" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.2998 4.39996L3.4998 4.39996" stroke="#1E2022" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 702 B

4
frontend/resources/flowy_icons/24x/m_aa_paragraph.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.7998 4H20.1998" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.1 20.2C11.1 20.6971 11.5029 21.1 12 21.1C12.4971 21.1 12.9 20.6971 12.9 20.2H11.1ZM12.9 4.20001V3.30001H11.1V4.20001H12.9ZM12.9 20.2L12.9 4.20001H11.1L11.1 20.2H12.9Z" fill="#1E2022"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

6
frontend/resources/flowy_icons/24x/m_aa_quote.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1782 19.5C14.8477 19.5 12.7998 17.6748 12.7998 14.3624C12.7998 10.4864 15.6286 7.98428 18.6661 5.66114C18.9933 5.41085 19.4624 5.46028 19.7488 5.75288C20.1069 6.11875 20.037 6.70969 19.6478 7.04513C17.4771 8.91559 14.8597 10.9512 15.0101 12.8468C15.2033 12.7489 16.1596 12.402 17.5313 12.402C19.5086 12.402 20.9916 13.8892 20.9916 15.8496C20.9916 17.8776 19.2967 19.5 17.1782 19.5Z" fill="#1E2022"/>
<path d="M13.0908 15.5004C13.0908 17.7092 14.9937 19.5 17.3407 19.5C19.6878 19.5 21.5908 17.708 21.5908 15.5004C21.5908 13.2929 19.688 11.5 17.3407 11.5C14.9935 11.5 13.0908 13.2908 13.0908 15.5004Z" fill="#1E2022"/>
<path d="M6.87836 19.5C4.54794 19.5 2.5 17.6748 2.5 14.3624C2.5 10.4864 5.32881 7.98428 8.36626 5.66114C8.69351 5.41085 9.16255 5.46028 9.44895 5.75288C9.80707 6.11875 9.73722 6.70969 9.34795 7.04513C7.17733 8.91559 4.55994 10.9512 4.71026 12.8468C4.90347 12.7489 5.85976 12.402 7.23145 12.402C9.20877 12.402 10.6918 13.8892 10.6918 15.8496C10.6918 17.8776 8.99691 19.5 6.87836 19.5Z" fill="#1E2022"/>
<path d="M2.7998 15.5004C2.7998 17.7092 4.70267 19.5 7.04971 19.5C9.39675 19.5 11.2998 17.708 11.2998 15.5004C11.2998 13.2929 9.39694 11.5 7.04971 11.5C4.70248 11.5 2.7998 13.2908 2.7998 15.5004Z" fill="#1E2022"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
frontend/resources/flowy_icons/24x/m_toolbar_aa.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5003 19.7619V16.1299M22.5003 16.1299V12.4979M22.5003 16.1299C22.5003 18.1358 20.8742 19.7619 18.8683 19.7619C16.8624 19.7619 15.2363 18.1358 15.2363 16.1299C15.2363 14.124 16.8624 12.4979 18.8683 12.4979C20.8742 12.4979 22.5003 14.124 22.5003 16.1299Z" stroke="#1E2022" stroke-width="1.45279" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.76815 12.978H9.83922L9.81522 12.9111L7.32677 5.97632L7.27971 5.84517L7.23265 5.97632L4.7442 12.9111L4.7202 12.978H4.79126H9.76815ZM10.5064 14.8373L10.4944 14.8038L10.4589 14.8041L10.4434 14.8043H10.4432H4.11618H4.11593L4.10053 14.8041L4.06501 14.8038L4.05301 14.8373L2.20143 19.9972C2.03193 20.4696 1.538 20.7018 1.10021 20.5235C0.660632 20.3444 0.43696 19.8167 0.606918 19.343L6.06029 4.14567C6.48882 2.95146 8.07059 2.95145 8.49912 4.14567L13.9525 19.343C14.1225 19.8167 13.8988 20.3444 13.4592 20.5235C13.0214 20.7018 12.5275 20.4696 12.358 19.9972L10.5064 14.8373Z" fill="#1E2022" stroke="white" stroke-width="0.1" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
frontend/resources/flowy_icons/24x/m_toolbar_add.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.75C17.3625 21.75 21.75 17.3625 21.75 12C21.75 6.6375 17.3625 2.25 12 2.25C6.6375 2.25 2.25 6.6375 2.25 12C2.25 17.3625 6.6375 21.75 12 21.75Z" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.09961 12H15.8996" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 15.9V8.10001" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 574 B

4
frontend/resources/flowy_icons/24x/m_toolbar_bold.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 5.92104C6.5 5.02946 7.22947 4.29999 8.12105 4.29999H12.2709C14.3945 4.29999 16.1209 6.02641 16.1209 8.14999C16.1209 10.2736 14.3945 12 12.2709 12H6.5V5.92104Z" stroke="#1E2022" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.5 12H14.2C16.3236 12 18.05 13.7264 18.05 15.85C18.05 17.9736 16.3236 19.7 14.2 19.7H8.12105C7.22947 19.7 6.5 18.9705 6.5 18.0789V12V12Z" stroke="#1E2022" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 596 B

8
frontend/resources/flowy_icons/24x/m_toolbar_bulleted_list.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3.60039" cy="4.99999" r="1.2" fill="#1E2022"/>
<path d="M8.30078 5H21.2982" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="3.60039" cy="12" r="1.2" fill="#1E2022"/>
<path d="M8.30078 12H21.2982" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="3.60039" cy="19" r="1.2" fill="#1E2022"/>
<path d="M8.30078 19H21.2982" stroke="#1E2022" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 614 B

12
frontend/resources/flowy_icons/24x/m_toolbar_calendar.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.2998 2.75V5.525" stroke="#1E2022" stroke-width="1.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.7002 2.75V5.525" stroke="#1E2022" stroke-width="1.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 9.30823H20" stroke="#1E2022" stroke-width="1.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.5 8.73211V16.5429C20.5 19.2997 19.0833 21.1375 15.7778 21.1375H8.22222C4.91667 21.1375 3.5 19.2997 3.5 16.5429V8.73211C3.5 5.97535 4.91667 4.13751 8.22222 4.13751H15.7778C19.0833 4.13751 20.5 5.97535 20.5 8.73211Z" stroke="#1E2022" stroke-width="1.4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.45742 13.5725H8.46573" stroke="#1E2022" stroke-width="1.3875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.45742 16.3475H8.46573" stroke="#1E2022" stroke-width="1.3875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9809 13.5725H11.9892" stroke="#1E2022" stroke-width="1.3875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9805 16.3475H11.9888" stroke="#1E2022" stroke-width="1.3875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5033 13.5725H15.5116" stroke="#1E2022" stroke-width="1.3875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5033 16.3475H15.5116" stroke="#1E2022" stroke-width="1.3875" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
frontend/resources/flowy_icons/24x/m_toolbar_checkbox.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.225 21.25H14.775C19.4 21.25 21.25 19.4 21.25 14.775V9.225C21.25 4.6 19.4 2.75 14.775 2.75H9.225C4.6 2.75 2.75 4.6 2.75 9.225V14.775C2.75 19.4 4.6 21.25 9.225 21.25Z" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.06934 12.2001L10.6871 14.8178L16.2 9.39999" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

5
frontend/resources/flowy_icons/24x/m_toolbar_image.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.225 21.25H14.775C19.4 21.25 21.25 19.4 21.25 14.775V9.225C21.25 4.6 19.4 2.75 14.775 2.75H9.225C4.6 2.75 2.75 4.6 2.75 9.225V14.775C2.75 19.4 4.6 21.25 9.225 21.25Z" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.393 10.15C16.4147 10.15 17.243 9.32174 17.243 8.30001C17.243 7.27829 16.4147 6.45001 15.393 6.45001C14.3712 6.45001 13.543 7.27829 13.543 8.30001C13.543 9.32174 14.3712 10.15 15.393 10.15Z" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.7363 17.9172L16.1761 14.8554C15.4453 14.3652 14.3908 14.4207 13.7341 14.9849L13.4288 15.2532C12.7073 15.8729 11.5418 15.8729 10.8203 15.2532L6.97233 11.9509C6.25083 11.3312 5.08533 11.3312 4.36383 11.9509L2.85608 13.2459" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 974 B

5
frontend/resources/flowy_icons/24x/m_toolbar_italic.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4.10001H18.1194" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.7998 19.9H13.9192" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.4893 4.10001L9.86426 19.9" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 459 B

4
frontend/resources/flowy_icons/24x/m_toolbar_keyboard.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.10369 3.34242C4.65687 3.26914 5.26134 3.25 5.90952 3.25H15.2352C15.8834 3.25 16.4879 3.26914 17.0411 3.34242C18.4813 3.49279 19.6019 3.90704 20.3039 4.90643C20.9699 5.85457 21.1448 7.18351 21.1448 8.83571V12.5268C20.6858 12.367 20.1964 12.2722 19.6876 12.2535V8.83571C19.6876 7.20449 19.4946 6.28943 19.1115 5.744C18.7661 5.25233 18.1601 4.923 16.8804 4.79071C16.8731 4.78996 16.8659 4.7891 16.8586 4.78812C16.3993 4.72661 15.8676 4.70714 15.2352 4.70714H5.90952C5.27712 4.70714 4.74547 4.72661 4.28616 4.78812C4.27891 4.7891 4.27164 4.78996 4.26436 4.79071C2.98462 4.923 2.37862 5.25233 2.03325 5.744C1.65012 6.28943 1.45714 7.20449 1.45714 8.83571V14.6643C1.45714 16.2955 1.65012 17.2106 2.03325 17.756C2.37862 18.2477 2.98462 18.577 4.26436 18.7093C4.27164 18.71 4.27891 18.7109 4.28616 18.7119C4.74547 18.7734 5.27712 18.7929 5.90952 18.7929H14.7426C14.9142 19.3224 15.1717 19.8132 15.4988 20.2488C15.4118 20.2496 15.3239 20.25 15.2352 20.25H5.90952C5.26135 20.25 4.6569 20.2309 4.10373 20.1576C2.66349 20.0072 1.5429 19.593 0.840882 18.5936C0.174873 17.6454 0 16.3165 0 14.6643V8.83571C0 7.18351 0.174873 5.85457 0.840882 4.90643C1.5429 3.90704 2.66347 3.49279 4.10369 3.34242ZM16.6005 13.1761C16.0822 13.5456 15.6375 14.0116 15.2924 14.5477H5.39085C4.99026 14.5477 4.66551 14.223 4.66551 13.8224C4.66551 13.4218 4.99026 13.0971 5.39085 13.0971H16.2708C16.3895 13.0971 16.5016 13.1256 16.6005 13.1761ZM5.39085 8.9523C4.99026 8.9523 4.66551 9.27704 4.66551 9.67763C4.66551 10.0782 4.99026 10.403 5.39085 10.403H6.2198C6.62039 10.403 6.94513 10.0782 6.94513 9.67763C6.94513 9.27704 6.62039 8.9523 6.2198 8.9523H5.39085ZM8.29224 9.67763C8.29224 9.27704 8.61699 8.9523 9.01758 8.9523H9.84653C10.2471 8.9523 10.5719 9.27704 10.5719 9.67763C10.5719 10.0782 10.2471 10.403 9.84653 10.403H9.01758C8.61699 10.403 8.29224 10.0782 8.29224 9.67763ZM11.919 9.67763C11.919 9.27704 12.2437 8.9523 12.6443 8.9523H16.271C16.6716 8.9523 16.9963 9.27704 16.9963 9.67763C16.9963 10.0782 16.6716 10.403 16.271 10.403H12.6443C12.2437 10.403 11.919 10.0782 11.919 9.67763Z" fill="#1E2022"/>
<path d="M22.9999 18.25L20.25 21M20.25 21L17.5 18.25M20.25 21L20.25 15" stroke="#1E2022" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

3
frontend/resources/flowy_icons/24x/m_toolbar_link.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.80965 15.1915L15.1908 8.81034M6.41713 11.203L4.82184 12.7983C3.05973 14.5604 3.05922 17.4176 4.82133 19.1797C6.58344 20.9418 9.44124 20.9413 11.2034 19.1792L12.7969 17.5841M11.2023 6.41672L12.7976 4.82143C14.5597 3.05931 17.4163 3.05963 19.1785 4.82174C20.9406 6.58385 20.9405 9.44083 19.1784 11.2029L17.5839 12.7982" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

8
frontend/resources/flowy_icons/24x/m_toolbar_numbered_list.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.94255 3.26527C4.94255 2.90593 4.55208 2.68264 4.24238 2.86486L3.81247 3.11776L3.80916 3.11982C3.76398 3.14781 3.66745 3.20617 3.54496 3.28024C3.2521 3.45732 2.81082 3.72414 2.56784 3.8802C2.42402 3.97257 2.34473 4.13065 2.34473 4.29458C2.34473 4.70723 2.81039 4.95674 3.15587 4.74166C3.35003 4.62078 3.55347 4.49554 3.70477 4.40363V7.37893C3.70477 7.72073 3.98186 7.99782 4.32366 7.99782C4.66546 7.99782 4.94255 7.72073 4.94255 7.37893V3.26527Z" fill="#1E2022"/>
<path d="M8.58301 5.39891C8.58301 4.95708 8.97103 4.59891 9.44967 4.59891H20.7163C21.195 4.59891 21.583 4.95708 21.583 5.39891C21.583 5.84074 21.195 6.19891 20.7163 6.19891H9.44967C8.97103 6.19891 8.58301 5.84074 8.58301 5.39891Z" fill="#1E2022"/>
<path d="M4.10314 9.59781C3.0489 9.59781 2.34473 10.2971 2.34473 11.1724C2.34473 11.2909 2.44078 11.387 2.55927 11.387H3.32118C3.44336 11.387 3.5424 11.2879 3.5424 11.1657C3.5424 10.8915 3.73754 10.6618 4.06304 10.6618C4.2201 10.6618 4.34546 10.7123 4.42983 10.7902C4.51284 10.8668 4.56697 10.9798 4.56697 11.129C4.56697 11.3981 4.40564 11.6237 4.10588 11.9403L2.55373 13.6239C2.45587 13.7301 2.40154 13.8692 2.40154 14.0135C2.40154 14.331 2.65889 14.5883 2.97634 14.5883H5.54475C5.84226 14.5883 6.08343 14.3472 6.08343 14.0497C6.08343 13.7521 5.84226 13.511 5.54475 13.511H4.15996L4.95807 12.6144C5.47921 12.0566 5.80475 11.6509 5.80475 11.0454C5.80475 10.6226 5.62978 10.2556 5.32337 9.99697C5.01902 9.7401 4.59484 9.59781 4.10314 9.59781Z" fill="#1E2022"/>
<path d="M8.58301 12.0931C8.58301 11.6513 8.97103 11.2931 9.44967 11.2931H20.7163C21.195 11.2931 21.583 11.6513 21.583 12.0931C21.583 12.5349 21.195 12.8931 20.7163 12.8931H9.44967C8.97103 12.8931 8.58301 12.5349 8.58301 12.0931Z" fill="#1E2022"/>
<path d="M4.12893 16.1884C3.26832 16.1884 2.68143 16.597 2.46434 17.196C2.39958 17.3747 2.44877 17.5474 2.55589 17.6687C2.66003 17.7865 2.81824 17.8572 2.98597 17.8572C3.1498 17.8572 3.28669 17.7873 3.39459 17.7029C3.50153 17.6192 3.59074 17.513 3.66197 17.4208C3.74397 17.3148 3.88156 17.229 4.09885 17.229C4.2788 17.229 4.41468 17.2828 4.50291 17.3595C4.58964 17.4349 4.63954 17.5397 4.63954 17.6661L4.63955 17.6676C4.6408 17.8089 4.58759 17.9226 4.49811 18.0027C4.40714 18.0841 4.2679 18.1399 4.08548 18.1399H3.96518C3.67875 18.1399 3.44655 18.3721 3.44655 18.6586C3.44655 18.945 3.67875 19.1772 3.96518 19.1772H4.10888C4.34464 19.1772 4.50983 19.2408 4.61356 19.3293C4.71508 19.4158 4.77193 19.5379 4.77322 19.6893C4.7745 19.8432 4.71737 19.9702 4.61473 20.0608C4.51045 20.1528 4.34574 20.2185 4.11556 20.2185C3.84186 20.2185 3.66388 20.1208 3.56511 19.9928C3.49483 19.9017 3.40708 19.7979 3.30159 19.7164C3.19501 19.634 3.06042 19.5668 2.89959 19.5668C2.73171 19.5668 2.57342 19.6372 2.46852 19.7547C2.36081 19.8754 2.30991 20.0473 2.37092 20.2265C2.57944 20.8392 3.16318 21.2691 4.09217 21.2691C4.6067 21.2691 5.08562 21.1257 5.43906 20.8611C5.79549 20.5944 6.02342 20.2034 6.01765 19.7289C6.00958 19.1393 5.69587 18.7688 5.33908 18.589C5.62983 18.3915 5.87831 18.0387 5.8706 17.5425C5.8547 16.7194 5.08423 16.1884 4.12893 16.1884Z" fill="#1E2022"/>
<path d="M8.51758 18.7287C8.51758 18.2869 8.9056 17.9287 9.38424 17.9287H20.6509C21.1296 17.9287 21.5176 18.2869 21.5176 18.7287C21.5176 19.1706 21.1296 19.5287 20.6509 19.5287H9.38424C8.9056 19.5287 8.51758 19.1706 8.51758 18.7287Z" fill="#1E2022"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

3
frontend/resources/flowy_icons/24x/m_toolbar_redo.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.9626 7.46464L18.0479 7.55H17.9272H9.75C6.04969 7.55 3.05 10.5497 3.05 14.25C3.05 17.9503 6.04969 20.95 9.75 20.95H12.9C13.3694 20.95 13.75 20.5694 13.75 20.1C13.75 19.6306 13.3694 19.25 12.9 19.25H9.75C6.98858 19.25 4.75 17.0114 4.75 14.25C4.75 11.4886 6.98858 9.25 9.75 9.25H17.9272H18.0479L17.9626 9.33536L14.999 12.299C14.667 12.6309 14.667 13.1691 14.999 13.501C15.3309 13.833 15.8691 13.833 16.201 13.501L20.701 9.00104C21.033 8.6691 21.033 8.1309 20.701 7.79896L16.201 3.29896C15.8691 2.96701 15.3309 2.96701 14.999 3.29896C14.667 3.6309 14.667 4.1691 14.999 4.50104L17.9626 7.46464Z" fill="#1E2022" stroke="white" stroke-width="0.1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 758 B

3
frontend/resources/flowy_icons/24x/m_toolbar_strike.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.32838 4.49652L7.32857 4.49632C8.32944 3.41015 9.85986 2.82708 11.7638 2.82708C13.7074 2.82708 15.1801 3.34977 16.1546 4.36563L16.1546 4.36565L16.156 4.36701C16.5208 4.72866 16.9496 5.25372 17.3048 5.84365C17.4871 6.14648 17.4461 6.46283 17.2703 6.70691C17.093 6.95301 16.7776 7.12549 16.4146 7.12549C15.9026 7.12549 15.5265 6.74844 15.2717 6.2657C15.1798 6.0915 15.0686 5.9328 14.9292 5.76875C14.2395 4.88562 13.1424 4.42795 11.7756 4.42795C9.55191 4.42795 7.90505 5.73936 7.86167 7.64175C7.84512 8.36739 8.11674 9.01093 8.62622 9.45625H6.38611C6.15736 8.90375 6.04538 8.27333 6.06107 7.58549C6.08722 6.4386 6.52966 5.3571 7.32838 4.49652ZM14.119 13.1562L14.1357 13.081L14.1274 13.0792H14.119H4.66706C4.22613 13.0792 3.87694 12.7586 3.87691 12.3266C3.87688 11.886 4.23477 11.499 4.66695 11.499H19.3771C19.8117 11.499 20.1672 11.8664 20.1672 12.3046C20.1672 12.7391 19.8153 13.0792 19.3771 13.0792H17.1452H17.0015L17.081 13.1989C17.5692 13.9342 17.9445 14.9805 17.9217 15.9809C17.8851 17.5855 17.2608 18.8805 16.1648 19.7756C15.0674 20.6719 13.49 21.1729 11.5394 21.1729C8.92918 21.1729 6.99287 20.287 6.0059 18.6707C5.832 18.3812 5.66031 17.9941 5.50784 17.5657C5.29413 16.9652 5.77547 16.3614 6.42981 16.3614C6.91427 16.3614 7.31208 16.714 7.48924 17.1848C7.64934 17.6103 7.86513 17.944 8.17766 18.274C8.93297 19.0894 10.1439 19.5053 11.6747 19.5053C12.9858 19.5053 14.0763 19.1812 14.8467 18.5902C15.6191 17.9977 16.0643 17.1411 16.0882 16.0914C16.0997 15.5881 16.0404 15.205 15.9014 14.8511C15.7628 14.4984 15.5468 14.1796 15.2528 13.8033C15.0275 13.5149 14.7485 13.3348 14.5273 13.2269C14.4165 13.1728 14.3196 13.1366 14.2499 13.1138C14.2151 13.1023 14.1871 13.0943 14.1675 13.089C14.1636 13.0879 14.16 13.087 14.1568 13.0862C14.1519 13.0849 14.1478 13.0839 14.1446 13.0831L14.1383 13.0816L14.1365 13.0812L14.136 13.0811L14.1358 13.081L14.1357 13.081L14.119 13.1562Z" fill="#1E2022" stroke="white" stroke-width="0.154167"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

4
frontend/resources/flowy_icons/24x/m_toolbar_underline.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 20H19" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.75 4V10C6.75 13.3171 9.0975 16 12 16C14.9025 16 17.25 13.3171 17.25 10V4" stroke="#1E2022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

3
frontend/resources/flowy_icons/24x/m_toolbar_undo.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.03744 7.46464L5.95208 7.55H6.07279H14.25C17.9503 7.55 20.95 10.5497 20.95 14.25C20.95 17.9503 17.9503 20.95 14.25 20.95H11.1C10.6306 20.95 10.25 20.5694 10.25 20.1C10.25 19.6306 10.6306 19.25 11.1 19.25H14.25C17.0114 19.25 19.25 17.0114 19.25 14.25C19.25 11.4886 17.0114 9.25 14.25 9.25H6.07279H5.95208L6.03744 9.33536L9.00104 12.299C9.33299 12.6309 9.33299 13.1691 9.00104 13.501C8.6691 13.833 8.1309 13.833 7.79896 13.501L3.29896 9.00104C2.96701 8.6691 2.96701 8.1309 3.29896 7.79896L7.79896 3.29896C8.1309 2.96701 8.6691 2.96701 9.00104 3.29896C9.33299 3.6309 9.33299 4.1691 9.00104 4.50104L6.03744 7.46464Z" fill="#1E2022" stroke="white" stroke-width="0.1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 778 B