Feature Suggestion: Flow Tabs on left side. remove/hide/popup nodelist

[svefro]

I have a relatively large project going. My entire house is running on node red.

I currently have 25 flows and they are pretty packed.
Nowadays i rarely add many new nodes and mostly have the nodes list hidden.
if i do need to add a new node i mostly CTRL Click to find it.

With 25 flows navigating between the flow tabs starts to get annoying.

I would rather have the tabs on the left side so i can easily move between all of them.

I suggest an option in view settings to enable this.

Flow Tabs location : Top (default)/Left

Selecting "left" would then remove the node list and replace it with a vertical list of tabs
The flow editor would then grow up where the tabs was before
An "Add Node" button would appear where "filter nodes" searchBox-input is now. Clicking this slides in the node list over the flow tab list /Replaces it.

I do not have the knowledge at this time to implement this on my own but i have tinkered a bit in chrome dev-tools to get the approximate layout.

Is this something that anybody else think could be useful?

[kuema]

That feature request has come up several times.

I absolutely understand the necessity for that, I have to deal with large projects myself.

However, the new outline (NR >= 1.1) has become quite handy for navigation tasks, in my case at least. Could that be useful in your case as well?

[svefro]

That blocks the debug window or any other panel so i do not think it is a solution for me.

For now i created a custom stylesheet and used chrome extension stylish to apply it

it is just a first draft

/*
Apply using stylish chrome extension
*/

.scroll-container::-webkit-scrollbar {
  display: block;
width: 10em;
overflow: auto;
height: 2em;
}
#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable > div.red-ui-tab-button.red-ui-tab-scroll.red-ui-tab-scroll-right > a{
display:none;
}

#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable > div.red-ui-tabs-scroll-container{



}
#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable {
position: absolute;
left: 0;
width: 170px;
bottom: 0px;
top: 0px;
height: 100%;
display: grid;
display: -webkit-inline-box;
overflow-y: scroll;
padding-left:5px;

}

#red-ui-workspace-chart{
margin-left: 170px;
}
#red-ui-workspace > div.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable > div.red-ui-tabs-scroll-container{
height: 100%;
margin-bottom: 60px;
overflow-x: hidden;
overflow-y: scroll;
    margin-top: 60px;
}
#red-ui-workspace-tabs{
display: contents;
}

[Steve-Mcl]

Hi, could you post a screenshot of what that does to the editor please?

[svefro]

here are 2 screenshots. one with node list (pallete) hidden and one with shown

[Steve-Mcl]

That is quite decent.

Would you be able to create a full theme & release it on the forum - a bit like this one - with your customisation built in?

[Colin]

+1 for that idea, that would be great. Even better if it were included in the dark theme.

[msauto]

++1 Awsome! Lots better, and easier to navigate than across top.

[svefro]

Added the css to https://userstyles.org/styles/193142/node-red-admin-sidebar-tabs

Apply it using Stylish chrome extension.

Since this is just a small layout change it should in theory work together with the dark theme for those that use that.

I think this (a more streamlined version) should be implemented in node-red itself.

I wish i had the time and knowledge to do so but i don't

[msauto]

Thanks ! Works great with the Dark Theme. Just fyi, for anyone trying to apply this style using the link above or searching for it on the Stylish website, be patient it is very slow going on chrome but it will eventually open the page. Same with the install. But once its installed everything is back to normal. I have a gigabit connection and if you have a slower connection it will really take a while. This could be something wonky on my end. I am not sure. I gave up the first time and just now went back to try again and waited a bit longer and it eventually worked.
Thanks again @svefro
UPDATE** If you click the links on stylish website twice it loads faster. Makes no since but it works.

[svefro]

Great that it worked
It also took a while to load the page for me.

Still think this should be implemented in node red it self, but for now it works.
-Svein

[svefro]

it has now been 2 months of using node-red with tabs on the left by using the custom theme.

I briefly had to use node-red without the custom theme on another computer and it was like downgrading to window 8.

I really think this should be implemented in node-red.

i almost never have to toggle the node-list visible as it is much easier to ctrl+click and add nodes anyway.