Feedback wanted: sidebar tab redesign

Core Development
1

Hi,

Since we added the history section to the sidebar, the tabs can get a bit squashed.

There are now three in the default set, and everyone with dashboard installed has four. There's also the config nodes sidebar tab that we hide by default - which reduces how easy it is to discover.

I've knocked up a few possible options for improving it - would like your feedback.

Option 1

  • has the multiple tabs, but certain key ones are shrunk down to just an icon for easy access. A dropdown lets you access all of the tabs.
  • Issue: the order is a bit unpredicatable and there's lots of jumping around. For example, when the 'config nodes' tab is show and then switch to another, the config node tab disappears.

Option 2

  • A cleaner option. Has a single tab in a fixed position. The dropdown lets you access all tabs.
  • Issue: more clicks to get to common tabs such as Debug

Option 3

  • A single fixed tab. With quick-links to core tabs. Dropdown to access all other tabs (not including the quick-linked ones)
  • Without leading the witness... this is my preferred option at this point.
2

3 or 1 but not 2
ā€¦

3

Personally, I donā€™t like the need to deal with node-supplied tabs differently from core tabs. I do like the use of icons to make more room.

Looking for something similar out thereā€¦my Chrome developer window runs out of space for tabs, a >> appears on the right with a drop down containing tabs that couldnā€™t be shown due to lack of space. Tabs to the right disappear until selected or expanded, added to the pop up. Leftmost tabs are maintained on the screen as much as possible giving them priority. Not sure how this would interact with the icons, but might be worth looking at if you havenā€™t already.

Perhaps this approach could be used with flow tabs as well for consistency?

All that said, if I had to choose between these, I would go with #3.

4

Option 3b

  • Single tab
  • Remaining space populates with icon-buttons for other tabs
  • 'Core' set are fixed and remain visible

Haven't defined the menu contents for this option - does it list everything, or just those that are hidden. If none are hidden, does it hide the dropdown button or become inactive.

2 Likes
5

Nice. Suggest the drop down only appear if needed. Might want to make the drop down look different from the tab icons somehow.

1 Like
6

If you remove it when none then they would all jump right - so disable better - but they are grey-ish anyway so Iā€™d just leave it. Iā€™m not fussed about it being different - quite like the consistency.

But yes - definite winner so far.

7

The drop down would slide into the rightmost slot only when needed. No jump. Seems odd to have a dropdown with only config in it on fresh install. But definitely best so far! thanks @knolleary

8

3b for me but a post has to be 20 Characters :frowning:

9

I get where youā€™re going, Mike ā€“ leave the right-hand ā€œboxā€ fixed in position, but if its list of tabs only contains 1 element (say, ā€˜Configā€™), then just show it like the other 3 ā€œcoreā€ tabs (so no down arrow). Same applies when making the sidebar widerā€¦ keep adding tabs to its left until there is only one left in the list ā€“ then the down arrow switches to whatever the last icon in the list would be. Nice intuitive UI behavior, without any jumping icons.

1 Like
10

3b it is then. Already in the 0.19 branch on git. Thanks for the feedback

4 Likes