I created another branch to try a new configuration of the snippet bar. IMHO, it looks nice, and while I think it will feel odd to long time users at first, will make sense over time. And if Swappable Themes is pushed through I think it will work better with custom snippet groups; the persistent editor icons are always in the same place and snippet menus can be added into infinitum. But I may be grasping at straws to justify the time I spent on this.

Link to my branch on my fork: https://github.com/Gazook89/homebrewery/tree/Reorder-SnippetBar

Single line tool bar:

Squished to two lines:

An action gif:

And obviously we could go further with the scrunching of the menus...right now I limited it to two rows, but each snippet menu could break to a new line, too, but not sure the utility in such a narrow editor. And I suppose with some JS (or CSS if container queries ever happen) the entire snippet bar could be turned vertical and display only the menu icons.

I am ok with the 2-layered thing, but I still like having a gap between the snippets and the tabs when it's in the single row. Is there any magical way you can preserve the that?

I couldn't think of any pure CSS way of keeping that gap when it's a single row, but not having it look funny when it goes to second row. Flexbox doesn't know when it is wrapping, so I can't say "if you are flexing to another row, suddenly start doing this". I tried to think of ways using empty divs and such but as far as I can remember there were trade-offs or just didn't work.

I'll ruminate on it as I make/eat dinner.

A bit late to chime in, but another approach is to have the snippet bar items collapse to just their icons once space is cramped (with the flyout lables we use for the edit/mode buttons).

I had thought about that too but only if it was narrowed even further after reducing to two rows. But abandoned that idea after thinking it'd be silly to shrink the editor that small and still think you were going to be doing editing.

But dropping the two row idea and instead switching to just icons at a certain point would also work. My one concern though is the menus and icons don't have enough recognition among users, not enough that they are understood without their accompanying text. And this would be a much bigger problem once we start having alternate snippets as allowed by the SwappableThemes branch.

@ericscheid

have the snippet bar items collapse to just their icons once space is cramped

Also, I don't think this is possible with just CSS, until Container Queries become a thing. It could be done with JS, but with my concern in my previous comment and my sketchy JS skillz, I don't think I could submit for a PR for it. And I don't want to add another thing to other people's plates until the bigger stuff is done if it can be avoided.

IMO, this can get pushed through to fix an obvious graphical problem, and incremental changes can be made later as schedules allow since it's UI related, and doesn't need to be backwards compatible or 'perfect' on the first try.

I tried to think of ways using empty divs and such but as far as I can remember there were trade-offs or just didn't work.

Can you use something like justify-content: space-between?

The first option I put forth in this thread (part of the original post) uses space-between, but I see I didn't include an image of what it looked like on a single line. To recap, here is that first option (my branch flexbox-snippets-bar):

I just don't like it because of the weird right-alignment when it goes to the second row. And with just CSS I don't think there is a way to switch it to some other alignment only once it goes to a second row.

Edit:
I have another idea to try to see if i can make this option work.

Okay, how about this?

flexbox-snippet-bar branch

(edit 15:39 CST: just improved something quick.)

reorder-snippet-bar branch

Those are my two options. I prefer the reordering option, but am satisfied with either.

@Gazook89 commented 5 hours ago

have the snippet bar items collapse to just their icons once space is cramped

Also, I don't think this is possible with just CSS, until Container Queries become a thing. It could be done with JS

We currently have a bit of JS that runs when the snippet bar changes size. More specifically, a bit of JS that runs when the divider bar is dragged, and correspondingly sets the size of the editor pane (and thus the snippet bar).

Setting/removing a flag class on the snippet bar should be pretty easy there .. something like this maybe (I don't know the precise React way)

if (newSize <= 325) { this.classList.add('icons-only') }
else { this.classList.remove('icons-only') }

With corresponding CSS to hide the .groupName in .snippetBar ..

.icons-only .snippetBar .groupName { display: none; }

I offer a fix for this with #3635, a container query to change the flow.