Skip to content

fix: toolbar launch review issues#7631

Merged
LucasXu0 merged 6 commits intoAppFlowy-IO:mainfrom
asjqkkkk:fix/lr/toolbar
Mar 27, 2025
Merged

fix: toolbar launch review issues#7631
LucasXu0 merged 6 commits intoAppFlowy-IO:mainfrom
asjqkkkk:fix/lr/toolbar

Conversation

@asjqkkkk
Copy link
Copy Markdown
Collaborator

@asjqkkkk asjqkkkk commented Mar 27, 2025

  • Turn Into menu has the old design
  • Collapse more icons into the more menu when the screen is narrow
  • The slash menu is on t he left side of the cursor
  • Wrong color of the dropdown arrow

Feature Preview


PR Checklist

  • My code adheres to AppFlowy's Conventions
  • I've listed at least one issue that this PR fixes in the description above.
  • I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
  • All existing tests are passing.

Summary by Sourcery

Improve toolbar and menu interactions in the document editor, focusing on responsive design and user experience for narrow windows

New Features:

  • Add support for collapsing toolbar items in narrow windows
  • Implement dynamic toolbar width and layout based on window size

Bug Fixes:

  • Fix positioning and display of slash menu and dropdown items
  • Correct color and styling of toolbar icons and dropdowns

Enhancements:

  • Refactor toolbar and menu interactions to support responsive design
  • Improve handling of toolbar items in narrow window scenarios
  • Update theme extensions to support more granular icon and styling controls

@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai Bot commented Mar 27, 2025

Reviewer's Guide by Sourcery

This pull request addresses several toolbar launch review issues, including updating the design of the 'Turn Into' menu, collapsing more icons into the 'More Options' menu on narrow screens, fixing the position of the slash menu, and correcting the dropdown arrow color. It also includes updates to the theme extension and toolbar style.

Sequence diagram for showing link creation menu

sequenceDiagram
    participant User
    participant Toolbar
    participant EditorState
    participant Overlay

    User->>Toolbar: Clicks link button
    Toolbar->>EditorState: getNodesInSelection(selection)
    EditorState-->>Toolbar: Nodes
    Toolbar->>Toolbar: isHref?
    alt isHref == true
        Toolbar->>LinkHoverTriggers: call(HoverTriggerKey)
    else isHref == false
        Toolbar->>Overlay: showLinkCreateMenu(context, editorState, selection)
        Overlay->>EditorState: formatDelta(selection, {href, isPage})
        EditorState-->>Overlay: Apply formatting
        Overlay-->>Toolbar: Dismiss
    end
Loading

Sequence diagram for turnInto action

sequenceDiagram
    participant User
    participant Toolbar
    participant EditorState
    participant BlockActionOptionCubit

    User->>Toolbar: Selects 'Turn Into' option
    Toolbar->>EditorState: getNodeAtPath(selection.start.path)
    EditorState-->>Toolbar: Node
    Toolbar->>BlockActionOptionCubit: turnIntoBlock(type, node, state, level, currentViewId, keepSelection)
    BlockActionOptionCubit->>EditorState: apply(transaction)
    EditorState-->>Toolbar: Update editor
Loading

Updated class diagram for AFThemeExtensionV2

classDiagram
    class AFThemeExtensionV2 {
        +Color icon_primary
        +Color icon_tertiary
        +Color border_grey_quaternary
        +Color fill_theme_select
        +Color fill_grey_thick_alpha_1
        +Color shadow_medium
        +AFThemeExtensionV2 copyWith()
        +ThemeExtension lerp()
        +static AFThemeExtensionV2 of(BuildContext context)
        +static AFThemeExtensionV2 maybeOf(BuildContext context)
    }

    note for AFThemeExtensionV2 "Added new theme extension class to manage colors."
Loading

File-Level Changes

Change Details Files
Refactor the 'Turn Into' menu to use a new design and improve its functionality.
  • Replaced the old 'Turn Into' menu with a new UI.
  • Implemented suggestion items for quick formatting options.
  • Implemented turn into items for converting blocks to different types.
  • Added logic to refresh suggestions based on the currently selected node type.
  • Used suggestion items to display formatting options.
  • Added a subtitle to group suggestion items.
  • Added logic to build each suggestion item with its icon and title.
  • Added logic to turn into a page.
  • Added logic to keep selection after turn into.
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option/turn_into_option_action.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_suggestions_toolbar_item.dart
Collapse more toolbar icons into the 'More Options' menu when the screen is narrow.
  • Added logic to collapse toolbar items into the 'More Options' menu based on screen width.
  • Added turn into selector to the 'More Options' menu.
  • Added text align selector to the 'More Options' menu.
  • Added logic to hide other popovers when one is selected in the 'More Options' menu.
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/more_option_toolbar_item.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/toolbar_extension.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_align_toolbar_item.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_placeholder_toolbar_item.dart
Fix the position of the slash menu and dropdown arrow, and update link menu functionality.
  • Fixed the position of the slash menu to be on the left side of the cursor.
  • Fixed the wrong color of the dropdown arrow.
  • Refactored link menu to use overlay.
  • Added logic to remove link.
  • Added logic to show link create menu.
  • Added logic to show link hover menu.
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart
Update theme extension and toolbar style.
  • Updated theme extension to include new colors.
  • Updated toolbar style to include shadow.
frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension_v2.dart

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @asjqkkkk - I've reviewed your changes - here's some feedback:

Overall Comments:

  • The refactor of TurnIntoOptionMenu is quite extensive; consider breaking it down into smaller, more manageable chunks in future PRs.
  • The introduction of LinkHoverTriggers is a good way to manage link hover states, but ensure it's properly disposed of to avoid memory leaks.
Here's what I looked at during the review
  • 🟢 General issues: all looks good
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@LucasXu0 LucasXu0 changed the title fix: some toolbar launch review issues fix: toolbar launch review issues Mar 27, 2025
@LucasXu0 LucasXu0 merged commit a26ebbc into AppFlowy-IO:main Mar 27, 2025
18 checks passed
@asjqkkkk asjqkkkk deleted the fix/lr/toolbar branch March 27, 2025 06:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants