I'll be more interested in styling the whole button bars to make them smaller so less of an impact on available space for the flows.
2 Likes
See above edit. I have no idea why it worked the first time I tried it - but it doesn't now
Where do you put that. I like the colour scheme
You have to tell settings.js to look for a css file, the page section inside editorTheme
editorTheme: {
page: {
css: "/home/pi/.node-red/editor.css"
},
My editor.css file currently looks like this
/* use the header underline colour to differentiate devices. This one runs v5beta so vibrant green */
#red-ui-header{
border-bottom: 3px solid chartreuse;
}
/* thinner, bluer wires */
.red-ui-flow-link-line, .red-ui-flow-link-line-background {
stroke: #0722fc;
stroke-width: 1;
}
/* Group title & outlines thinner & bluer */
.red-ui-flow-group-label {
fill: #0722fc;
}
.red-ui-flow-group-body {
stroke: #0722fc;
stroke-width: 1;
}
/* Make junctions stand out a bit more */
.red-ui-flow-junction-background {
fill: aquamarine;
}
/* v5 beta selected sidebar buttons */
.red-ui-sidebar-tab-bar button.selected:not(.disabled):not(:disabled) {
border-left: 3px solid #aaa;
background-color: rgba(0, 255, 0, 0.1);
}
1 Like
Messing with the css, it notice a small inconsistency. Here, I've made the background color for #red-ui-editor pink.
Notice that the container for the left sidebar is not correctly aligned at the top or the bottom, unlike the right sidebar.
There is also still a lot of fixed pixel sizing instead of more modern relative unit sizing like ems.
Thank you.
I bet Dave is gritting his teeth at pink and green in the editor.
I'm all for using colour to highlight escapes like these...
Debug in a separate window !!!!
Nice.
edit : apparently already a feature in 4.x. Still nice 
If you have eg Config nodes at the top and debug at the bottom of the right sidebar, the only way to devote the whole panel to debug is to drag it's button up towards the top.
If instead you try and drag the dividing line between the two:
a) It will not go all the way to the top
b) Sometimes, not always, the row-resize cursor is lost, so you can't drag the dividing line back down.
@jbudd not being able to drag the panel out of existence is a deliberate choice at this stage - as the current work doesn't support having the sidebar split, but only show one of the panels.
I'm still evaluating how well this UX works; it feels like there's a lot still to get right around the behaviour of the panels.
I'm also still wondering whether allowing panels to be dragged to the LH side is a good idea or not. I'm sure there will be those who welcome this level of flexibility. But it is leading to a number of UX compromises that aren't working for me yet.
We still want to have the Explorer and Palette on the LHS side - focussing on the well structured information hierarchy that @dimitrieh talked about in his comment here. That doesn't mean it has to mirror the UX of the RHS.
Thinking about the newcomer to Node-RED, they aren't interested in customising the layout on day one and want to just use Node-RED. It's important for it to work well for them.
1 Like
Personally, I would agree with that view. The fact that you can do it by dragging the icon is what I'd expect anyway.
I have to say that I believe this ability IS worth-while and a valuable addition to the Editor. As it stands, the editor is lacking in flexibility. Being able to move sidebars around is a very common UX for complex interfaces and is very much welcomed.
Of course, perhaps a menu option somewhere to reset everything back to default might be welcomed by those who inevitably get themselves into a bit of a mess. 
I also note the suggestion in the other beta thread about having a "Views" feature that would allow different configurations to be saved and easily switched between. I think that would be fantastic. But recognise that might be a stretch too far for the initial release.
Agreed. And I think we are broadly happy with the default layout. But beginners don't stay that way and as flows grow in complexity, the ability to easily move some elements of the interface around becomes a lot more valuable.
I principally wanted to highlight that you can drag the divider up but you can't drag it back down again.
I don't find the interaction with the buttons intuitive, but as Nick says, it's still under evaluation, so no opinions on that at the moment.
Noted, reproduced, and will be fixed.
Live demo version available of Beta 1 at https://nr-node-red-dev-5-0-0-beta-1.tailbfedba.ts.net/
With this you can directly check out the UI
I vote for this. I drag everything to one side, gives me more space in the Editor. As mentioned above the big issue for me is that reloading the page reverts everything back as it was.
1 Like
The flows on the left hand side is so nice.
How can it be improved.
- right now when you click the flow it opens the child nodes
- instead would be best to open / activate the flow itself, when active label can be bolded
- eye icon is a bit weird (hide/show) could be a pin (only pinned tabs are shown)
Now that the flows are nicely on the left, we should be able to remove the flow tabs on the top, as they just clutter the interface (just leave one tab as it contains the name, for the currenty open tab).
Alsthough this now can be achived with the hide/show icon
RHS sidebar
- debug is too small, especially when mesages are many or longer
- globals being opened all the time is a bit annoying (may be enable to toggle whole card like accordion, so it can take less space
Having now played with the beta for a few days - I do feel that the node palette still needs to be top left and open by default - with the explorer beneath. When you start on an empty flow I feel beginners must be shown the list of nodes - after all that is what Node-RED is all about. Having to find and open them feels like a real barrier on first launch.
On the right I think the window should not be split by default - (but with the ability to do so) - so as to allow maximum space for whatever (I personally prefer debug but hey...)
I'm not a fan of perspectives - maybe PTSD from eclipse - I always found it more confusing that anything else - as different add-ons could add perspectives and "re-arrange" things as they suggested that were almost like what I had but were different and I had to re-arrange to go back.
2 Likes
This 
I disagree from the pov that I know node-red but totally understand why you say this (and can't argue against your logic unfortunately). All I'll say is whatever it ends up being it is persistent across sessions (per user)
Totally agree it should persist - but I think on initial start the nodes must be shown - if the user then chooses to move/minimise them - then that should be persisted and shows good knowledge progress by the user.
