diff --git a/plugin/src/Components/Checkbox.lua b/plugin/src/Components/Checkbox.lua new file mode 100644 index 00000000..0969b8e4 --- /dev/null +++ b/plugin/src/Components/Checkbox.lua @@ -0,0 +1,39 @@ +local Rojo = script:FindFirstAncestor("Rojo") +local Plugin = Rojo.Plugin + +local Roact = require(Rojo.Roact) + +local Theme = require(Plugin.Components.Theme) + +local e = Roact.createElement + +local function Checkbox(props) + local checked = props.checked + local layoutOrder = props.layoutOrder + local onChange = props.onChange + + return Theme.with(function(theme) + return e("ImageButton", { + LayoutOrder = layoutOrder, + Size = UDim2.new(0, 20, 0, 20), + BorderSizePixel = 2, + BorderColor3 = theme.Text2, + BackgroundColor3 = theme.Background2, + + [Roact.Event.Activated] = function() + onChange(not checked) + end, + }, { + Indicator = e("Frame", { + Size = UDim2.new(0, 18, 0, 18), + Position = UDim2.new(0.5, 0, 0.5, 0), + AnchorPoint = Vector2.new(0.5, 0.5), + BorderSizePixel = 0, + BackgroundColor3 = theme.Brand1, + BackgroundTransparency = checked and 0 or 1, + }) + }) + end) +end + +return Checkbox \ No newline at end of file diff --git a/plugin/src/Components/SettingsPanel.lua b/plugin/src/Components/SettingsPanel.lua index f11fff56..0bb99dc9 100644 --- a/plugin/src/Components/SettingsPanel.lua +++ b/plugin/src/Components/SettingsPanel.lua @@ -2,6 +2,8 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact) local Plugin = script:FindFirstAncestor("Plugin") +local Checkbox = require(Plugin.Components.Checkbox) +local FitList = require(Plugin.Components.FitList) local FitText = require(Plugin.Components.FitText) local FormButton = require(Plugin.Components.FormButton) local Panel = require(Plugin.Components.Panel) @@ -25,16 +27,45 @@ function SettingsPanel:render() Padding = UDim.new(0, 8), }), - Text = e(FitText, { - Padding = Vector2.new(12, 6), - Font = theme.ButtonFont, - TextSize = 18, - Text = "openScriptsExternally: " .. tostring(settings:get("openScriptsExternally")), - TextColor3 = theme.Text1, - BackgroundTransparency = 1, + Address = e(FitList, { + containerProps = { + LayoutOrder = 1, + BackgroundTransparency = 1, + }, + layoutProps = { + Padding = UDim.new(0, 4), + FillDirection = Enum.FillDirection.Horizontal, + HorizontalAlignment = Enum.HorizontalAlignment.Left, + VerticalAlignment = Enum.VerticalAlignment.Center, + }, + }, { + Label = e(FitText, { + Kind = "TextLabel", + LayoutOrder = 1, + BackgroundTransparency = 1, + TextXAlignment = Enum.TextXAlignment.Left, + Font = theme.MainFont, + TextSize = 16, + Text = "Open Scripts Externally", + TextColor3 = theme.Text1, + }), + + Padding = e("Frame", { + Size = UDim2.new(0, 8, 0, 0), + BackgroundTransparency = 1, + LayoutOrder = 2, + }), + + Input = e(Checkbox, { + layoutOrder = 3, + checked = settings:get("openScriptsExternally"), + onChange = function(newValue) + settings:set("openScriptsExternally", not settings:get("openScriptsExternally")) + end, + }), }), - DisconnectButton = e(FormButton, { + BackButton = e(FormButton, { layoutOrder = 2, text = "Okay", secondary = true,