[v3!] TopbarPlus v3.0.0 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

ForeverHD · August 13, 2021, 2:36pm

Try this:

Icon.new()
	:setImage(7248002480, "deselected")
	:setImage(7248002631, "selected")
	:setLabel("Mute Ambience", "hovering")
	:bindEvent("selected", function(icon)
		icon:setLabel("Unmute Ambience", "hovering")
	end)
	:bindEvent("deselected", function(icon)
		icon:setLabel("Mute Ambience", "hovering")
	end)

Not0ffSale · August 13, 2021, 2:51pm

@ForeverHD I was wondering if you could add an icon library or something cause I cant find any icons

sorry if its already a list of icons or something

PysephDEV · August 13, 2021, 3:01pm

This has the exact same issue as what I posted above - the icon itself, ie the audio bar, bounces left and right, which I do not want.

ForeverHD · August 13, 2021, 3:48pm

We have many examples you can view at the playground under StarterPlayerScripts:

ForeverHD · August 13, 2021, 3:50pm

I’ve made some small modification to the internals of TopbarPlus to mostly allow you to achieve this:

Make sure you update to the latest module by re-adding this model into your game:
https://www.roblox.com/library/6311707237/TopbarPlus
For the icon you wish to update, do:

:modifySetting("iconImagePosition", {tweenAction = "iconImageInfo"})
:modifySetting("iconImageSize", {tweenAction = "iconImageInfo"})

Within your theme action table, add the following:

iconImageInfo = TweenInfo.new(0)

Final outcome:

It won’t ever be perfectly still due to the dynamic nature of the frames, although hopefully this satisfies your desired effect.

PysephDEV · August 13, 2021, 3:57pm

Thank you! While there is some jumping still, it is much better now & I can finally get my desired effect

max52229 · August 13, 2021, 6:39pm

Very nice! Although buttons from this don’t have the select cursor that real topbar buttons do…

Not0ffSale · August 15, 2021, 6:57pm

@ForeverHD I was also wondering is there a function that you can only open 1

so like I create 2 different Menu icons

and I select the first 1

then I select the 2nd the 1st one will close

And also a hide buttons function… or like a button that makes icon 1 and icon 2 to a Menu <— I didn’t really know how to explain that

And change CornerRadius of DropDown buttons

And A Dropdown Button that opens another Dropdown? i havent tried that but does it work?

And Add so we can add more Local’s to the script cause whenever i add another local FunctionName the UI doesn’t Icons doesn’t show

ForeverHD · August 17, 2021, 9:39am

Thanks for the report, that should be fixed now in the latest release:

ForeverHD · August 17, 2021, 9:47am

You can find a coded example of this at the playground:

You can hide an icon by doing:

icon:setEnabled(false)

You can also listen for events such as icon.selected, icon.deselected, etc. More info at the docs:

You can achieve this with icon:setCornerRadius.

You can have dropdown buttons that contain menus and vice versa, but menu buttons cant directly contain menus and similarly dropdown buttons cant directly contain dropdowns.

You can achieve this with a module script. More info here:

thebrickplanetboy · August 17, 2021, 1:01pm

umm I just forked the chat script and made my custom mimic button:

local UserInputService = game:GetService("UserInputService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local StarterGui = game:GetService("StarterGui")
local GuiService = game:GetService("GuiService")
local Players = game:GetService("Players")

local TopbarPlusReference = ReplicatedStorage:FindFirstChild("TopbarPlusReference")
local IconModule = ReplicatedStorage.Modules.Icon
local LocalPlayer = Players.LocalPlayer

if not LocalPlayer then
	Players:GetPropertyChangedSignal("LocalPlayer"):Wait()
	LocalPlayer = Players.LocalPlayer
end

if TopbarPlusReference then
	IconModule = TopbarPlusReference.Value
end

local PlayerScripts = LocalPlayer:WaitForChild("PlayerScripts")
local ChatScript = PlayerScripts:WaitForChild("ChatScript")
local ChatEvents = ChatScript:WaitForChild("ChatEvents")

local IconController = require(IconModule.IconController)
local ChatMain = require(ChatScript.ChatMain)
local Themes = require(IconModule.Themes)

local Maid = require(IconModule.Maid)
local Icon = require(IconModule)

local ChatMimic = Icon.new()
local ChatMaid = ChatMimic._maid

ChatMimic._FakeChatMaid = ChatMaid:give(Maid.new())
ChatMimic:setName("ChatMimic")
ChatMimic:setOrder(-1)
ChatMimic:setImage("rbxasset://textures/ui/TopBar/chatOff.png", "deselected")
ChatMimic:setImage("rbxasset://textures/ui/TopBar/chatOn.png", "selected")
ChatMimic:setTheme(Themes.BlueGradient)
ChatMimic:setImageYScale(0.625)

Maid.ChatMimicCleanup = function()
	StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Chat, ChatMimic.enabled)
end

local function DisplayChatBar(Visibility)
	ChatMimic.ignoreVisibilityStateChange = true
	ChatMain.CoreGuiEnabled:fire(Visibility)
	ChatMain.IsCoreGuiEnabled = false
	ChatMain:SetVisible(Visibility)
	ChatMimic.ignoreVisibilityStateChange = nil
end

local function SetIconEnabled(Visibility)
	ChatMimic.ignoreVisibilityStateChange = true
	ChatMain.CoreGuiEnabled:fire(Visibility)
	ChatMimic:setEnabled(Visibility)
	StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Chat, false)
	ChatMimic:deselect()
	ChatMimic.updated:Fire()
	ChatMimic.ignoreVisibilityStateChange = nil
end

ChatMimic._FakeChatMaid:give(UserInputService.InputEnded:Connect(function(InputObject, GameProcessedEvent)
	if GameProcessedEvent then
		return "Another menu has priority"
	elseif not(InputObject.KeyCode == Enum.KeyCode.Slash or InputObject.KeyCode == Enum.SpecialKey.ChatHotkey) then
		return "No relavent key pressed"
	elseif ChatMain.IsFocused() then
		return "Chat bar already open"
	elseif not ChatMimic.enabled then
		return "Icon disabled"
	end
	ChatMain:FocusChatBar(true)
	ChatMimic:select()
end))

ChatMimic._FakeChatMaid:give(ChatEvents.VisibilityStateChanged.Event:Connect(function(Visibility)
	if not ChatMimic.ignoreVisibilityStateChange then
		if Visibility == true then
			ChatMimic:select()
		else
			ChatMimic:deselect()
		end
	end
end))

ChatMimic.deselectWhenOtherIconSelected = false

ChatMimic._FakeChatMaid:give(ChatEvents.MessagesChanged.Event:Connect(function()
	if ChatMain:GetVisibility() == true then
		return "ChatWindow was open"
	end
	ChatMimic:notify(ChatMimic.selected)
end))

coroutine.wrap(function()
	task.wait()
	ChatMimic._FakeChatMaid:give(ChatEvents.CoreGuiEnabled.Event:Connect(function(NewState)
		if ChatMimic.ignoreVisibilityStateChange then
			return "ignoreVisibilityStateChange enabled"
		end
		local TopbarEnabled = StarterGui:GetCore("TopbarEnabled")
		if TopbarEnabled ~= IconController.previousTopbarEnabled then
			return "SetCore was called instead of SetCoreGuiEnabled"
		end
		if not ChatMimic.enabled and UserInputService:IsKeyDown(Enum.KeyCode.LeftShift) and UserInputService:IsKeyDown(Enum.KeyCode.P) then
			ChatMimic:setEnabled(true)
		else
			SetIconEnabled(NewState)
		end
	end))
end)()

ChatMimic.toggled:Connect(function()
	DisplayChatBar(ChatMimic.isSelected)
end)

GuiService.MenuOpened:Connect(function()
	if ChatMimic.isSelected then
		DisplayChatBar(false)
	end
end)

GuiService.MenuClosed:Connect(function()
	if ChatMimic.isSelected then
		DisplayChatBar(true)
	end
end)

SetIconEnabled(StarterGui:GetCoreGuiEnabled(Enum.CoreGuiType.Chat))

Squiegy · August 17, 2021, 4:44pm

You use the property variableName.deselectWhenOtherIconSelected = false

This’ll allow you to select 2 things at once. Im not sure what your question meant, but i hope this helps

apenzijncoolenleuk1 · August 18, 2021, 8:32am

Hi
I currently have the BlueGradient theme applied.
However I want to color one icon red. How could I do that?

Setting iconBackgroundColor to Color3.fromRGB(255, 0, 0) seems to interfere with the theme.

ForeverHD · August 18, 2021, 8:37am

How are you setting iconBackgroundColor? icon:setTheme, icon:set(propertyName,...), through the theme module, etc?

Also how does it interfere with your theme? What’s your desired look vs what actually happens?

perick12jung · August 18, 2021, 8:54am

What type of theme is there and how can I make one ???

apenzijncoolenleuk1 · August 18, 2021, 10:51am

I’m using :set("iconBackgroundColor", Color3.fromRGB(255, 0, 0)).
The icon becomes black:
It is a selected icon that is locked from clicks.
Here’s the full constructor:

RedTeamCounter = Icon.new()
			:setMid()
			:setImage(7275142787)
			:setLabel("Red Team: 0%")
			:setSize(50)
			:setTopPadding(12)
			:setCornerRadius(0.2, 0)
			:select()
			:lock()
			:setOrder(4)
			:setEnabled(true)
			:set("iconBackgroundColor", Color3.fromRGB(255, 0, 0)),

I want the icon to be colored red.

ForeverHD · August 18, 2021, 11:00am

We have a section dedicated to explaining themes here:

ForeverHD · August 18, 2021, 11:01am

Setting the gradient back to white should solve that:

:set("iconBackgroundColor", Color3.fromRGB(255, 0, 0))
:set("iconGradientColor", ColorSequence.new(Color3.fromRGB(255, 255, 255)))

apenzijncoolenleuk1 · August 18, 2021, 12:19pm

Thanks that works.

However, I’m still getting an issue with dropdowns not resizing appropriately.
This works fine:

But when the second icon’s label gets changed it doesn’t resize:

Only the top-most icon seems to be adjusted for.
Is there a way to have the icon adjust size for the largest icon inside the dropdown?

Another slight bug is that whenever you hover over a locked icon using :lock(), the click mouse icon appears until you move your mouse:

ForeverHD · August 18, 2021, 1:24pm

Thanks for the report. For a quick fix to the former, you can do the following:

:bindEvent("toggled", function(icon)
	icon:_updateIconSize()
end)

I’ll then have permanent fixes for both of those in the next update.