UIShelf (Archived) - Create Modern & Intuitive Topbar Icons

FYI these pages in the docs are reversed. TopBarIconObject | Canary Docs

3 Likes

Iā€™ll fix these in 2.0, classes will be renamed and such.

Trying to migrate from Topbar Plus and Iā€™m finding that thereā€™s no ability to set an icon into an ā€œactiveā€ state, is that correct? I have buttons that open menus with one open at a time, and I canā€™t seem to find a way to change the button appearance so that it looks active.

UIShelf does not implement an active sort of state because I feel like it really isnā€™t needed for the usual use cases of it. In 2.0, I plan on adding advanced state manipulation which will probably solve your issue.

2 Likes

Hey! I was trying to use your API just to mess around, but it straight up wonā€™t work with the example code in the documentation. Either something was wrong with the code in the documentation or something changed with a recent update and it wasnā€™t updated in the documentation yet.

local UIShelf = require(game.ReplicatedStorage.Modules.UIShelf)

local Spacer = UIShelf.CreateSpacer({
	Name = "MySpacer",
	Order = 1,
	Area = 1,
})

This is probably an issue with my documentation, I will be working on fixing this.

1 Like

Coming back to this; do you think you would be able to do something similar to what the chat does instead? I was thinking that would be better than making the icon white, but of course if you still need something similar to TB+ I would gladly provide it.

Yeah I suppose thatā€™s possible. More consistent also.

1 Like

I havenā€™t been working on this as much due to other projects related in the futureā€¦ stay tuned :shushing_face:

I like this module but I have a few complaints. The documentation is rather poor and not very straightforward. Tooltips do not work correctly with a bound keybind, and the buttons do not scale for user devices. Even when using a 1080p (16:9) display, the tops of the icons are cut off and not aligned with the existing Roblox ones.

1 Like

Hi there,

I am working on the documentation, new docs will be out by v2. For tooltips, can you please give a more in-depth example? For icons, what do you mean by existing topbar ones? In v2 we plan to add better support for themes and make stuff compatible for the older topbar if thatā€™s what you meant. Please send screenshots of the issues so I can diagnose them better.

I am referring to Robloxā€™s built-in top bar icons. The ones generated in this module do not align or use the same scaling mechanics as the Roblox ones. I expected this not to be an issue on a 16:9 display, given itā€™s the most common. For my tooltips, I have set a keybind, yet it doesnā€™t show up on the tooltip. Also, I have a tooltip for an icon with an Order of 2, yet its tooltip only shows under the Icon with an Order of 1.

Here is an example of the improper scaling on a 1080p display (right side).

1 Like

Yeah I will be fixing that in v2, I will be adding an alternate fallback style for older versions of the topbar. There is no scaling issue with that icon, itā€™s just because the size is larger than the current ones.

I still do not understand what you mean by the tooltips, please send a screenshot and some code. (thru a DM if you would like)

This is pretty modern and looks like Roblox, Iā€™ll be using it!

Is there a way that you can provide the code from the example for the Basic Admin Essentials support button? If you canā€™t, I understand.

This is due to you not having the new topbar rollled out yet.

Ask @notillusional about this, I didnā€™t create it.

Incredible! I will definitely be using this in the future

1 Like

Awesome, I remember seeing this when it came out in october, now more relevant than ever.

would love to have this ported to roblox-ts

2 Likes

Finally released v2! Comes with tons of bug fixes and reliability fixes.

1 Like

Hey! Having an issue where the tooltip doesnt move with the spacers, and i want my menu button out of the way of the leaderboard (although ngl i have no idea how to move the leaderboard up into the topbar so it doesnt look out of place)
image
One more thing, you should really add a customizable amount for how much space the spacer spaces (sorry for that funny english, i hope you know what that means)

edit: oops dont ask why the tooltip is Open Shop when its a menu button
one more thing, why is the tooltip menu a fixed position? its only going to work for one button and its in an entirely seperate ScreenGUI so it cant even move with the button