Accordion View

[tznind]

This would be a cool view, was thinking about tackling it possibly at same time as tab view refactor.

The accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Wikipedia

Another example, this one from wpf

[Nutzzz]

I feel like your first VS Code example with one-liners can be accomplished with your treeview-in-a-table #2685 and using special formatting for the items at the lowest level. But I take it the idea is borders around each item, like this (where the asterisks around the categories indicate a different color than the contents)?

┌────────────────────┐
│*Mail************ ˅ │
├────────────────────┤
│*Contacts******** ˄ │
├─John Smith─────────┤
│ johnsmith@e-       │
│ mail.com 555-5632  │
├─Bob Martin─────────┤
│ bobmartin@e-       │
│ mail.com 555-6128  │
├─Ricky Dylan────────┤
│ rickydylan@e-      │
│ mail.com 555-2647  │
├────────────────────┤
│*Tasks*********** ˅ │
└────────────────────┘

[tznind]

I feel like your first VS Code example with one-liners can be accomplished with your treeview-in-a-table #2685 and using special formatting for the items at the lowest level.

I think the key differences between what I am proposing and tree view is that the section expanded from the title is a full view.

For example the vs code top section (Source Control) expands to reveal a panel with a text box (commit message), a button (commit) and a tree view (changes).

So it would be more like TileView.

I starting initial exploration on my accordion branch. Heres a draft PR of my initial thoughts: #2712

But it's not laying out correctly. I think adding/removing views is not refreshing/working correctly.

I'm also leaning towards making the 'header' just text instead of a full View.

But I take it the idea is borders around each item, like this (where the asterisks around the categories indicate a different color than the contents)?

Have to think about it but vertical space is at a premium in console so I would like to see a way for sections not to have splitter lines until they are actually expanded.

For example when nothing is expanded it could look like:

> Source Control
> Commits
> Commit Details
> File History

      <blank space>

When a single section is open then it fills the full vertical space of accordion view. So it would look something like:

v Source Control
   Message  Text Field
   [ Commit ]
   - Changes
      someFile.cs      1M
   
   <blank space / more content>

> Commits
> Commit Details
> File History

Then if 2+ are expanded we need to somehow allow resizing (like TileView does).

So something like:

v Source Control
   Message Text Field
   [ Commit ]
   - Changes
      someFile.cs      1M
--------------------------------------------------------------
> Commits
V Commit Details
   You                                          abc343043  [...]
   modified 23 hours ago
> File History

[Nutzzz]

Oh, for some reason my brain blocked out Source Control as separate from the accordion.

VS Code's behavior is interesting, how individual accordion views can be set to grab all available vertical space, shoving the entries below to the bottom (which seems to be the default), or only as much as the view needs but not being user-resizeable (e.g., "Open Editors" in the Explorer accordion).

Were you planning on tackling drag-to-reorder as well?

[tznind]

Oh, for some reason my brain blocked out Source Control as separate from the accordion.

Its easily overlooked ;)

individual accordion views can be set to grab all available vertical space, shoving the entries below to the bottom (which seems to be the default), or only as much as the view needs

Nice, I hadn't noticed that. Perhaps theres an optional MaxHeight for sections. I can look into making that a core feature.

Were you planning on tackling drag-to-reorder as well?

No, not initially anyway. I think a good first pass feature set is the ability to expand and collapse and drag resize when 2+ are expanded. Re-ordering could always come later.

[tznind]

Super basic but here's the idea.

The complicated bit is going to be around sizing e.g. the table view here is set to fill. So the Accordion needs to let it fill but only within its section.

PS the buttons being dodgy aligned seems to be a bug in NoDecorations

[Nutzzz]

Looking great so far!

[tig]

I think this is addressed via ExpanderButton which I added to the AdornmentEditor in UI Catalog.

This works with any View, as long the View has a Border.Thickness.Top >= 1. If the View's Title is blank, and Border.LineStyle = LineStyle.None it works exactly as described above.

[tig]

More progress (in #3798):