Designs for System Overview panel

[zelcion]

Description

This task is for creating both the design and its requirements for the System Overview Panel for the Meta-Editor.

Panels are dockable views you can rearrange and resize for every configuration you edit in Meta-Editor. One of these panels is the System Overview panel.

I'll share the finalized design screenshots here when done.

Design/UX requirements

• The view should favor a vertical layout, for it is, primarily, a list-based layout.
• It should contain all system elements and their titles, possibly separated by their types: Addons, Schemas, Business Operations, and Environment Variables.
• It should also say the project name and the current version you're editing.
• Through it, it should be possible to create new elements of any category, though editing them is not possible by this view.
• It should be possible to duplicate elements, assigning them a new name based on the original one, such as "element (copy)".
• We should also be able to delete elements through this view.

Tasks Steps

• [x] Requirements
• [x] Design

[zelcion]

I just finished the design. Here's the final model to be evaluated with the team:

---

Notes on the functionality:

• Hovering an option makes the item controls (buttons on the right) appear.
• Clicking on "ADD" creates a new field at the bottom of the list.
  • Pressing ESC cancels creation
  • Clicking away with the filled field creates the entity
  • Clicking with an empty field cancels
  • Pressing enter confirms creation
• Clicking on the arrow button at the entity level opens a new panel to the right to edit that entity
• Clicking on the arrow button at the Section level opens a new panel:
  • Addons: Opens the Timeline
  • Schemas: Opens general schemas view
  • BOps: Opens General BOps view
  • Environment Variable: Opens General view

Just a reminder: Adding an Addon through this method only adds its name. To pick the right library, you should navigate to the timeline, yet TBD.