Proposal to Change Creative Buttons Texture

[matthewperiut]

Screenshots of updated texture and position

BELOW IS OUTDATED!

tl;dr

video.mp4

Proposal to Change Creative Buttons Texture

The creative buttons texture has haunted me for years in fabric-api. Why?
They're blue. The entire interface for buttons hasn't been blue in over 6 years.
Additionally they have too much contrast, sticking out like a sore thumb in the user interface.

How do we fix it?

We have a great example of something interactable in the creative menu already, the scroll bar.
It has an inactive state and an active state:
active:

inactive:

Extrapolating the Features

Notice that the creative scroll bar is in an indented section where it can move freely.
This creates a contrast strong enough to differentiate it from the rest of the menu.
The "grip" lines horizontal on the bar also changes color depending on if you can or cannot scroll.

Using the Features

Including the indent to seperate it from the rest of the UI helps the contrast to make it visible, without making it stand out visually from the slots and the scroll bar.
Using the pallette of the scroll bar in its active and inactive state for the pallette in the buttons being active and inactive makes it more flush with the design and not stick out.

Result:

Default appearance:

Hovering on right:

Hovering on left:

Disabled left:

Disabled right:

Full screenshot view of change

Previous appearance for reference:

Small Feats

Reduced color pallete allows for greater compression
5,512 bytes -> 382 bytes
14x decrease in size

Jar size improvement:
1,992,580 -> 1,989,946
0.13% total jar size improvement
(small things matter LOL)
detail: compiled on arch linux with Temurin-21.0.5+11-LTS

Footnote additional details

The arrow is made white instead of the button outline because it becomes too noisy in a small area.
Minecraft 1.15 removed blue backgrounds from buttons in Minecraft, and it came out in 2019, 6 years ago.
Previous attempts, which the textures were worse rip- #2740, #2746

[Laxystem]

I believe it makes a lot more sense to have secondary buttons there instead of primary ones.

In-game UI mostly doesn't have primary buttons (except for the p menu - but that one uses them as tabs, which means it's outdated anyway).

[matthewperiut]

Another reference, back in 1.14, where hovered buttons were still blue this texture was awesome!

but nowadays it really doesn't make much sense with the colors chosen to be inside the existing gui as-is

[embeddedt]

I like the new look, but the right edge of the buttons doesn't align with the right edge of the scrollbar. To be fair this was also an issue with the previous implementation, but it seems more obvious now.

[matthewperiut]

Does this look better?

Alternatively, this?

[embeddedt]

I like the first revision, yes.

[matthewperiut]

I further modified it to have the disabled button be a bit nicer

[IMB11]

I think this looks great 👍

[modmuss50]

Im happy with this, its a definite improvement. If anyone thinks they can be done better again please let it be known as I dont plan on touching this yet agian.

[quinn-semele]

Only issue I can think of is that by trying to fit into the vanilla scheme here the contrast on the active buttons end up being low.

That may not be an issue due to the physical location but I believe it is something that should still be thought about.

[matthewperiut]

I just found a last minute thing, surprised it wasn't seen earlier by past me, but don't merge yet!

[matthewperiut]

Alright, I'm thinking about the solutions, and here are the options,

1. Move the buttons back to their usual location
2. Shorten the search bar
3. Move the search bar

I'm not really sure what to do, but I think probably move the buttons back

[embeddedt]

I actually think shortening the search bar would look better.

[Laxystem]

@matthewperiut there's a fourth option, replace the outline with a normal cell border on the search tab.

[IMB11]

Shortening the search bar would be perfectly acceptable in my opinion, users won't notice and it's aesthetically pleasing.

[Syst3ms]

Shorten the search bar, as per consensus. Making a review of this so it doesn't get forgotten when last call ends.

[matthewperiut]

Yeah sorry guys work got busy, let me try and get this finished

[matthewperiut]

getting there guys...

[matthewperiut]

Ok, now it is ready (I think)

[matthewperiut]

This was changed to stop creating creative buttons when in survival mode, incase anyone asks the purpose

[matthewperiut]

OK I'm taking my grubby hands off this code and various like OO this could be betters and handing it off to just be reviewed, do keep in mind that I tried to keep my code as minimally invasive as possible for the changes that I made. Feel free to ask questions for my decisions. This is what the search tab looks like now

[IMB11]

Looks great IMO 👍

[matthewperiut]

Me thinking I'm done, having random thoughts of what ifs and how to fix them later... guys maybe its truly ready now.

[matthewperiut]

I decided not to mess with the png size as that is how it was originally, I am truly solely trying to get the design of the button to be different and making sure the code I add isn't inefficient. But yes, in the current version widgets are usually just small images with a different image loading system.