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

fix: slash menu background color (#2616)

Browse Source
This commit is contained in:
Lucas.Xu
2023-05-26 09:52:47 +08:00
committed by GitHub
parent 70bb7f2ad6
commit 386182e295
15 changed files with 78 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,13 +63,19 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
// code block
...codeBlockCharacterEvents,
// toggle list
// formatGreaterToToggleList,
// customize the slash menu command
customSlashCommand(
slashMenuItems,
style: styleCustomizer.selectionMenuStyleBuilder(),
),
...standardCharacterShortcutEvents
..removeWhere(
(element) => element == slashCommand,
), // remove the default slash command.
customSlashCommand(slashMenuItems),
// formatGreaterToToggleList,
];
late final showSlashMenu = customSlashCommand(
@ -189,7 +195,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
),
AutoCompletionBlockKeys.type: AutoCompletionBlockComponentBuilder(),
SmartEditBlockKeys.type: SmartEditBlockComponentBuilder(),
// ToggleListBlockKeys.type: ToggleListBlockComponentBuilder(),
ToggleListBlockKeys.type: ToggleListBlockComponentBuilder(),
};
final builders = {

15
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart
View File

@ -1,3 +1,4 @@
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flowy_infra/image.dart';
import 'package:flutter/material.dart';
@ -6,20 +7,21 @@ class SelectableSvgWidget extends StatelessWidget {
super.key,
required this.name,
required this.isSelected,
required this.style,
});
final String name;
final bool isSelected;
final SelectionMenuStyle style;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return svgWidget(
name,
size: const Size.square(18.0),
color: isSelected
? theme.colorScheme.onSurface
: theme.colorScheme.onBackground,
? style.selectionMenuItemSelectedIconColor
: style.selectionMenuItemIconColor,
);
}
}
@ -29,20 +31,21 @@ class SelectableIconWidget extends StatelessWidget {
super.key,
required this.icon,
required this.isSelected,
required this.style,
});
final IconData icon;
final bool isSelected;
final SelectionMenuStyle style;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Icon(
icon,
size: 18.0,
color: isSelected
? theme.colorScheme.onSurface
: theme.colorScheme.onBackground,
? style.selectionMenuItemSelectedIconColor
: style.selectionMenuItemIconColor,
);
}
}

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_menu_item.dart
View File

@ -8,9 +8,10 @@ import 'package:flutter/material.dart';
SelectionMenuItem boardMenuItem = SelectionMenuItem(
name: LocaleKeys.document_plugins_referencedBoard.tr(),
icon: (editorState, onSelected) => SelectableSvgWidget(
icon: (editorState, onSelected, style) => SelectableSvgWidget(
name: 'editor/board',
isSelected: onSelected,
style: style,
),
keywords: ['referenced', 'board', 'kanban'],
handler: (editorState, menuService, context) {

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_view_menu_item.dart
View File

@ -10,9 +10,10 @@ import 'package:easy_localization/easy_localization.dart';
SelectionMenuItem boardViewMenuItem(DocumentBloc documentBloc) =>
SelectionMenuItem(
name: LocaleKeys.document_slashMenu_board_createANewBoard.tr(),
icon: (editorState, onSelected) => SelectableSvgWidget(
icon: (editorState, onSelected, style) => SelectableSvgWidget(
name: 'editor/board',
isSelected: onSelected,
style: style,
),
keywords: ['board', 'kanban'],
handler: (editorState, menuService, context) async {

8
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/divider/divider_character_shortcut_event.dart
View File

@ -1,3 +1,4 @@
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/divider/divider_node_widget.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';
@ -41,9 +42,10 @@ CharacterShortcutEventHandler _convertMinusesToDividerHandler =
SelectionMenuItem dividerMenuItem = SelectionMenuItem(
name: 'Divider',
icon: (editorState, onSelected) => const Icon(
Icons.horizontal_rule,
size: 18.0,
icon: (editorState, onSelected, style) => SelectableIconWidget(
icon: Icons.horizontal_rule,
isSelected: onSelected,
style: style,
),
keywords: ['horizontal rule', 'divider'],
handler: (editorState, _, __) {

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/emoji_menu_item.dart
View File

@ -7,9 +7,10 @@ import 'emoji_picker.dart';
SelectionMenuItem emojiMenuItem = SelectionMenuItem(
name: 'Emoji',
icon: (editorState, onSelected) => SelectableIconWidget(
icon: (editorState, onSelected, style) => SelectableIconWidget(
icon: Icons.emoji_emotions_outlined,
isSelected: onSelected,
style: style,
),
keywords: ['emoji'],
handler: (editorState, menuService, context) {

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_menu_item.dart
View File

@ -8,9 +8,10 @@ import 'package:flutter/material.dart';
SelectionMenuItem gridMenuItem = SelectionMenuItem(
name: LocaleKeys.document_plugins_referencedGrid.tr(),
icon: (editorState, onSelected) => SelectableSvgWidget(
icon: (editorState, onSelected, style) => SelectableSvgWidget(
name: 'editor/board',
isSelected: onSelected,
style: style,
),
keywords: ['referenced', 'grid'],
handler: (editorState, menuService, context) {

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_view_menu_item.dart
View File

@ -10,9 +10,10 @@ import 'package:easy_localization/easy_localization.dart';
SelectionMenuItem gridViewMenuItem(DocumentBloc documentBloc) =>
SelectionMenuItem(
name: LocaleKeys.document_slashMenu_grid_createANewGrid.tr(),
icon: (editorState, onSelected) => SelectableSvgWidget(
icon: (editorState, onSelected, style) => SelectableSvgWidget(
name: 'editor/grid',
isSelected: onSelected,
style: style,
),
keywords: ['grid'],
handler: (editorState, menuService, context) async {

12
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
View File

@ -126,7 +126,7 @@ class _ToggleListBlockComponentWidgetState
// build the richtext child
Widget buildToggleListBlockComponent(BuildContext context) {
return Row(
Widget child = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// the emoji picker button for the note
@ -158,6 +158,16 @@ class _ToggleListBlockComponentWidgetState
),
],
);
if (widget.actionBuilder != null) {
child = BlockComponentActionWrapper(
node: node,
actionBuilder: widget.actionBuilder!,
child: child,
);
}
return child;
}
Future<void> onCollapsed() async {

12
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
View File

@ -124,4 +124,16 @@ class EditorStyleCustomizer {
color: theme.colorScheme.onBackground,
);
}
SelectionMenuStyle selectionMenuStyleBuilder() {
final theme = Theme.of(context);
return SelectionMenuStyle(
selectionMenuBackgroundColor: theme.cardColor,
selectionMenuItemTextColor: theme.colorScheme.onBackground,
selectionMenuItemIconColor: theme.colorScheme.onBackground,
selectionMenuItemSelectedIconColor: theme.colorScheme.onSurface,
selectionMenuItemSelectedTextColor: theme.colorScheme.onSurface,
selectionMenuItemSelectedColor: theme.hoverColor,
);
}
}