Skip to content

Move workspace actions into a grouped button #2748

@BrunoQuaresma

Description

@BrunoQuaresma

Moving the workspace actions into a grouped button will help us to free up some space in the header making some space to accommodate the schedule info.

Design:
Action dropdown

Figma link:
https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=444%3A603

How it works:

  • The main action should be on the left, and the other secondary actions, inside of the dropdown.
  • If there are no secondary actions, we can just disable the dropdown instead of "hide" it to avoid flickering the screen.
  • The button should have a fixed width to avoid size changes between states to avoid flickering the screen.
  • By flickering, I mean things that can change size quickly and modify the layout too fast causing a weird feeling of "laggy".

Considerations:

  • We should try to always use existent components from the codebase or Material UI package.
  • We should use existing colors.
  • The grouped button should be accessible via keyboard.
  • Please, let me know if you have any questions about this.
  • The "schedule" component will be made in another ticket.
  • if we are in an intermediate state and have the following actions: start | stop | delete -> display start, hides stop and delete

Metadata

Metadata

Assignees

Labels

siteArea: frontend dashboard

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy