Skip to content

Add an action-list component #3785

Open
@nzaytsev

Description

@nzaytsev

Image

Create a "smart component" that uses the <action-nav> and <action-item> components to create a more complex toolbar experience closer to what VS Code provides.

Features:

  • list of items
    • support modifier-based alternate actions
    • rough item typing { icon: string; label: string; href?: string; modifiers: [{ key: 'ctrl' | 'alt'; icon: string; label: string; href?: string; }] }
  • action item limit which then overflows remaining action-items into a ... menu

Example markup:

<gl-toolbar limit="3" items=${[ 
  { icon: 'request-changes', label: 'Open Pull Request Changes', href='command:gitlens.home.fetch' },
  { icon: 'globe', label: 'Open Pull Request on Remote', href='command:gitlens.home.openPullRequestOnRemote' },
  { icon: 'git-pull-request-create', label: 'Create Pull Request...', href='command:gitlens.home.createPullRequest' },
  { icon: 'gl-repo-fetch', label: 'Fetch', href='command:gitlens.home.fetch' } 
]}></gl-toolbar>

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-explorationIssue that needs design, research, POC, etc.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions