fix: slash menu background color (#2616)

2024-08-30 18:12:39 +00:00 · 2023-05-26 09:52:47 +08:00 · 2023-05-26 09:52:47 +08:00 · 386182e295
commit 386182e295
parent 70bb7f2ad6
15 changed files with 78 additions and 30 deletions
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@ -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 = {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart
@ -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,
    );
  }
 }
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_menu_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_menu_item.dart
@ -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) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_view_menu_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_view_menu_item.dart
@ -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 {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/divider/divider_character_shortcut_event.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/divider/divider_character_shortcut_event.dart
@ -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, _, __) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/emoji_menu_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/emoji_menu_item.dart
@ -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) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_menu_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_menu_item.dart
@ -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) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_view_menu_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_view_menu_item.dart
@ -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 {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
@ -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 {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
@ -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,
+    );
+  }
 }
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart
@ -14,6 +14,7 @@ import 'package:easy_localization/easy_localization.dart';
 class AddButton extends StatelessWidget {
  final Function(
    PluginBuilder,
+    String? name,
    List<int>? initialDataBytes,
    bool openAfterCreated,
  ) onSelected;
@ -71,20 +72,20 @@ class AddButton extends StatelessWidget {
      },
      onSelected: (action, controller) {
        if (action is AddButtonActionWrapper) {
-          onSelected(action.pluginBuilder, null, true);
+          onSelected(action.pluginBuilder, null, null, true);
        }
        if (action is ImportActionWrapper) {
-          showImportPanel(context, (type, initialDataBytes) {
+          showImportPanel(context, (type, name, initialDataBytes) {
            if (initialDataBytes == null) {
              return;
            }
            switch (type) {
              case ImportType.historyDocument:
              case ImportType.historyDatabase:
-                onSelected(action.pluginBuilder, initialDataBytes, false);
+                onSelected(action.pluginBuilder, name, initialDataBytes, false);
                break;
              case ImportType.markdownOrText:
-                onSelected(action.pluginBuilder, initialDataBytes, true);
+                onSelected(action.pluginBuilder, name, initialDataBytes, true);
                break;
            }
          });
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart
@ -108,10 +108,10 @@ class MenuAppHeader extends StatelessWidget {
    return Tooltip(
      message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
      child: AddButton(
-        onSelected: (pluginBuilder, initialDataBytes, openAfterCreated) {
+        onSelected: (pluginBuilder, name, initialDataBytes, openAfterCreated) {
          context.read<AppBloc>().add(
                AppEvent.createView(
-                  LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+                  name ?? LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
                  pluginBuilder,
                  initialDataBytes: initialDataBytes,
                  openAfterCreated: openAfterCreated,
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart
@ -12,8 +12,13 @@ import 'package:flowy_infra_ui/style_widget/container.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:path/path.dart' as p;

-typedef ImportCallback = void Function(ImportType type, List<int>? document);
+typedef ImportCallback = void Function(
+  ImportType type,
+  String name,
+  List<int>? document,
+);

 Future<void> showImportPanel(
  BuildContext context,
@ -183,7 +188,11 @@ class _ImportPanelState extends State<_ImportPanel> {
      }
      if (document != null) {
        final data = DocumentDataPBFromTo.fromDocument(document);
-        widget.importCallback(importType, data?.writeToBuffer());
+        widget.importCallback(
+          importType,
+          p.basenameWithoutExtension(path),
+          data?.writeToBuffer(),
+        );
      }
    }
  }
--- a/frontend/appflowy_flutter/pubspec.lock
+++ b/frontend/appflowy_flutter/pubspec.lock
@ -53,8 +53,8 @@ packages:
    dependency: "direct main"
    description:
      path: "."
-      ref: "25eb16"
-      resolved-ref: "25eb1653252efa0c2695a49e7e7493c4030c11e4"
+      ref: "09e91c"
+      resolved-ref: "09e91c6e09f03f12aa2f499767109e70c4791535"
      url: "https://github.com/LucasXu0/appflowy-editor.git"
    source: git
    version: "0.1.12"
--- a/frontend/appflowy_flutter/pubspec.yaml
+++ b/frontend/appflowy_flutter/pubspec.yaml
@ -47,7 +47,7 @@ dependencies:
    # path: /Users/lucas.xu/Desktop/appflowy-editor
    git:
      url: https://github.com/LucasXu0/appflowy-editor.git
-      ref: 25eb16
+      ref: 09e91c
  appflowy_popover:
    path: packages/appflowy_popover