I've been working on the next Node-RED 5 beta refresh to get it ready to release today. Unfortunately some CSS gremlins have got in the way and I've run out of time before I'm out of the office for the next few days.
Rather than leave things in limbo, I wanted to share a screenshot of where it stands and invite feedback. The advantage of a static screenshot is that you won't see the bits that break when you start resizing windows or moving things around. The downside of a screenshot is you don't get a hands-on feel of it.
The tab bar has moved up into the otherwise unused space in the header. This is the bit that doesn't quite behaviour correctly yet - I could have shipped it with a big BETA label, but it would become a distraction when buttons starting moved around unexpectedly...
The workspace extends under the right-hand sidebars. This gives a feeling of more room available to the flows. Admittedly this is clearer when you see it in action rather than just a screenshot.
Once I'm back in the office, I'll sort out the remaining CSS issues with the tab bar and get this released for you all to try.
In terms of remaining UX work for Node-RED 5, the list includes:
Revisit the sidebar split/repositioning UX. I don't like how the Debug sidebar button just floats half-way down the page.
We may still undo the ability to move sidebars to/from the left hand side. This will allow us to better optimise the left-hand sidebars (Explorer and Palette) to be designed for the space they are in. I know we've teased the ability in the existing betas, but I'm very mindful of the UX compromises involved and, well, you've survived 13 years without that ability...
I know you're all keen to see progress - as am I. My goal has always been to ship weekly refreshes - but equally, I want to make sure the refreshes are meaningful and not just whatever state I happen to have got to. Sometimes that takes more than a week.
Don't want to seem like "that awkward one"! However, I can't say I'm convinced by that, seems like it will be confusing when stuff flows under what you would really expect to be a solid sidebar. I would like to see what it looks like with a crowded flow that extends to the right off-screen. To me it already looks unbalanced since the left-hand sidebar is now quite noticeably different to the right-hand one.
I would also like to see what the top bar of flow tabs looks like when they also overflow. And, I'd want to see how it looks at different window sizes, how well it copes with less space for example.
Sorry, that all sounds rather negative - really not trying to be. It looks great overall - as always, thanks for your efforts.
I agree re debug - first thing I do on the existing beta is move the debug back up top and try to minimise the bottom window - when I'm debugging I want as much space as possible for that. If you do decide to "fix" left hand side then presumably we can lose the far left icon column space. (Again I would also like to be able to minimise the explorer as I never use it - I know some love it but I just use the tabs at the top - and do searches in the main window)
I think that the left icon column should only be there if you can freely drag ANY sidebar option to ANY of the 4 locations. Something which I think would be the best UX all round.
I think that is the point that Dave is making though. Once you have multiple panel spaces, inevitably, people will want to use them flexibly. Dragging, minimising and maximising.
Yes, totally agree. That would be a great feature.
I agree that it's desirable to allow any sidebar to be open left or right and (less so) top bottom (or even middle).
That doesn't mean that the button to turn the sidebar on/off has to travel with it.
There could be a button column at the right hand side to turn each sidebar on/off - in the location (left/right, top,middle,bottom) it last occupied.
It could even have personal presets - palette at the right, documentation on the left.
The handle to drag a sidebar can be it's heading "Palette" rather than a button.
If only one sidebar is active on either side it should be 100% height.
A sidebar without active contents should collapse. Thus the minimum space occupied would be the buttons column at the right hand side.
If it didn't, how would users know where it would appear if turned back on?
That seems to imply that another set of buttons would be needed - separate from the positional ones? Or have I misunderstood? We really don't want yet more buttons do we?
Wouldn't that add more complexity without real benefit? As long as the browser remembers the positions, I can set it once (per browser profile anyway) and forget it. In truth, I think many of us would want to change things around for different use-cases anyway. While it would indeed be nice to have the ability to create a set of "views", we are getting ever more complex and poor-old Nick will be retired before he can implement!
In principal I agree. But with the exception that there does need to be some visible element to bring the 2 sections back into view of course.
There aren't many options. If you can't remember, click it and see.
One column of on/off buttons. They have no 'positional' function in this proposal.
A sidebar would have a default location - Palette: left, Documents: right, etc and would show up either there, or if it had been previously repositioned, where it was last seen.
Yes. Just getting my feature creep in early
I'm not convinced. If both Palette and Explorer (Is that the right name?) were on the left and both visible, there has to be a movable divider between them. If Explorer is turned off, give Palette 100%.
Which one goes at the top? the one whose button is highest in the right hand icon column.
Perhaps I should be using the word Switch rather than Button?
