Plugin studio widgets position and theme issue

Help and Feedback Scripting Support
#1

Hi guys, I am making a lua widget for my plugin but I’m running into some issues.

Firstly, the background color isn’t changing to match my theme.
Secondly, the checkbox seems to be colliding into the title and it doesn’t change when I resize the widget.

image

Code

local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float,  -- Widget will be initialized in floating panel
	false,   -- Widget will be initially enabled
	false,  -- Don't override the previous enabled state
	200,    -- Default width of the floating window
	100,    -- Default height of the floating window
	150,    -- Minimum width of the floating window (optional)
	150     -- Minimum height of the floating window (optional)
)

local SettingsWidget = plugin:CreateDockWidgetPluginGui("Settings", widgetInfo)
SettingsWidget.Title = "AutoScale Settings"

local collapse = CollapsibleTitledSection.new(
	"AutoList", -- name suffix of the gui object
	"Automatic Features", -- the text displayed beside the collapsible arrow
	true, -- show the title text?
	true, -- minimizable?
	false -- minimized by default?
)

collapse:GetSectionFrame().Parent = SettingsWidget

local ScaleCheckbox = LabeledCheckbox.new(
	"Scale", -- name suffix of gui object
	"AutoConvertToScale", -- text beside the checkbox
	plugin:GetSetting("Active"), -- initial value
	false -- initially disabled?
)

ScaleCheckbox:SetValueChangedFunction(function(newValue)
	plugin:SetSetting("Active",newValue)
end)

ScaleCheckbox:GetFrame().Parent = collapse:GetContentsFrame()

local APCheckbox = LabeledCheckbox.new(
	"AP", -- name suffix of gui object
	"AutoChangeAnchorPoint", -- text beside the checkbox
	plugin:GetSetting("APActive"), -- initial value
	false -- initially disabled?
)

APCheckbox:SetValueChangedFunction(function(newValue)
	plugin:SetSetting("APActive",newValue)
end)

APCheckbox:GetFrame().Parent = collapse:GetContentsFrame()

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in pairs(objects) do
			-- Sync background color
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
		end
	end
	-- Run 'setColors()' function to initially sync colors
	setColors()
	-- Connect 'ThemeChanged' event to the 'setColors()' function
	settings().Studio.ThemeChanged:Connect(setColors)
end
 
-- Run 'syncGuiColors()' function to sync colors of provided objects
syncGuiColors(SettingsWidget:GetChildren())

Any idea how to fix these issues? Thanks!

2 Likes
#2

The widget itself can’t have its background color changed, you’ll need to add a blank frame behind everything in order to accomplish that.

1 Like
#3

Ok, so I just make a huge frame behind the gui objects?

#4

Theoretically, yes. I typically just have everything housed inside of one big frame.

#5

To fix the white background, have everything parented under a VerticallScalingListFrame. This frame would automatically be re-colored when the user’s theme changes.

(sidenote, you don’t need syncGuiColors since StudioWidgets does this for you.)

As for the label overlapping the button, the best fix for this would be to modify some constants in GuiUtilities.lua. Tweak kCheckboxMinLabelWidth until you’re satisfied.

3 Likes
#6

Ok thanks for the help :slight_smile: