diff --git a/assets/round-rect-8px-radius.png b/assets/round-rect-8px-radius.png new file mode 100644 index 00000000..55d1ac41 Binary files /dev/null and b/assets/round-rect-8px-radius.png differ diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua index ad0b4ee5..51f0934c 100644 --- a/plugin/src/Assets.lua +++ b/plugin/src/Assets.lua @@ -9,11 +9,17 @@ local Assets = { }, }, Slices = { - RoundBox = { + RoundBoxWithBorder = { asset = "rbxassetid://2754309674", offset = Vector2.new(0, 0), - size = Vector2.new(0, 0), - center = Rect.new(16, 16, 17, 17), + size = Vector2.new(32, 32), + center = Rect.new(15, 15, 16, 16), + }, + RoundBox = { + asset = "rbxassetid://2773074100", + offset = Vector2.new(0, 0), + size = Vector2.new(32, 32), + center = Rect.new(15, 15, 16, 16), }, }, StartSession = "", diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index 1bf7735d..e9da6d01 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -5,6 +5,7 @@ local Roact = require(Rojo.Roact) local Config = require(Plugin.Config) local Assets = require(Plugin.Assets) +local Theme = require(Plugin.Theme) local FitList = require(Plugin.Components.FitList) local FitText = require(Plugin.Components.FitText) @@ -65,7 +66,13 @@ function ConnectPanel:render() HorizontalAlignment = Enum.HorizontalAlignment.Center, }, }, { - Head = e("Frame", { + Head = e("ImageLabel", { + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size * Vector2.new(1, 0.5), + SliceCenter = RoundBox.center, + ScaleType = Enum.ScaleType.Slice, + ImageColor3 = Theme.SecondaryColor, LayoutOrder = 1, Size = UDim2.new(1, 0, 0, 36), BackgroundTransparency = 1, @@ -102,20 +109,14 @@ function ConnectPanel:render() }), }), - Border = e("Frame", { - BorderSizePixel = 0, - BackgroundColor3 = Color3.new(0.7, 0.7, 0.7), - Size = UDim2.new(1, -4, 0, 2), - LayoutOrder = 2, - }), - - Body = e(FitList, { + Inputs = e(FitList, { containerProps = { BackgroundTransparency = 1, - LayoutOrder = 3, + LayoutOrder = 2, }, layoutProps = { - Padding = UDim.new(0, 8), + FillDirection = Enum.FillDirection.Horizontal, + Padding = UDim.new(0, 12), }, paddingProps = { PaddingTop = UDim.new(0, 8), @@ -130,12 +131,11 @@ function ConnectPanel:render() BackgroundTransparency = 1, }, layoutProps = { - FillDirection = Enum.FillDirection.Horizontal, - Padding = UDim.new(0, 8), + Padding = UDim.new(0, 4), }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 28), + MinSize = Vector2.new(0, 20), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -156,7 +156,7 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 300, 0, 28), + size = UDim2.new(0, 160, 0, 28), value = self.state.address, onValueChange = function(newValue) self:setState({ @@ -172,12 +172,11 @@ function ConnectPanel:render() BackgroundTransparency = 1, }, layoutProps = { - FillDirection = Enum.FillDirection.Horizontal, - Padding = UDim.new(0, 8), + Padding = UDim.new(0, 4), }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 28), + MinSize = Vector2.new(0, 20), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -198,7 +197,7 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 300, 0, 28), + size = UDim2.new(0, 70, 0, 28), value = self.state.port, onValueChange = function(newValue) self:setState({ @@ -207,36 +206,47 @@ function ConnectPanel:render() end, }), }), + }), - Buttons = e(FitList, { - containerProps = { - LayoutOrder = 3, - BackgroundTransparency = 1, - }, - layoutProps = { - FillDirection = Enum.FillDirection.Horizontal, - Padding = UDim.new(0, 8), - }, - }, { - e(FormButton, { - text = "Start", - onClick = function() - if startSession ~= nil then - startSession(self.state.address, self.state.port) - end - end, - }), + Buttons = e(FitList, { + fitAxes = "Y", + containerProps = { + BackgroundTransparency = 1, + LayoutOrder = 3, + Size = UDim2.new(1, 0, 0, 0), + }, + layoutProps = { + FillDirection = Enum.FillDirection.Horizontal, + HorizontalAlignment = Enum.HorizontalAlignment.Right, + Padding = UDim.new(0, 8), + }, + paddingProps = { + PaddingTop = UDim.new(0, 0), + PaddingBottom = UDim.new(0, 8), + PaddingLeft = UDim.new(0, 8), + PaddingRight = UDim.new(0, 8), + }, + }, { + e(FormButton, { + layoutOrder = 1, + text = "Cancel", + onClick = function() + if cancel ~= nil then + cancel() + end + end, + secondary = true, + }), - e(FormButton, { - text = "Cancel", - onClick = function() - if cancel ~= nil then - cancel() - end - end, - secondary = true, - }), - }) + e(FormButton, { + layoutOrder = 2, + text = "Connect", + onClick = function() + if startSession ~= nil then + startSession(self.state.address, self.state.port) + end + end, + }), }) }) end diff --git a/plugin/src/Components/FitList.lua b/plugin/src/Components/FitList.lua index 50d2f581..aa14fc03 100644 --- a/plugin/src/Components/FitList.lua +++ b/plugin/src/Components/FitList.lua @@ -12,6 +12,7 @@ end function FitList:render() local containerKind = self.props.containerKind or "Frame" + local fitAxes = self.props.fitAxes or "XY" local containerProps = self.props.containerProps local layoutProps = self.props.layoutProps local paddingProps = self.props.paddingProps @@ -25,15 +26,31 @@ function FitList:render() ["$Layout"] = e("UIListLayout", Dictionary.merge({ SortOrder = Enum.SortOrder.LayoutOrder, [Roact.Change.AbsoluteContentSize] = function(instance) - local size = instance.AbsoluteContentSize + local contentSize = instance.AbsoluteContentSize if paddingProps ~= nil then - size = size + Vector2.new( + contentSize = contentSize + Vector2.new( paddingProps.PaddingLeft.Offset + paddingProps.PaddingRight.Offset, paddingProps.PaddingTop.Offset + paddingProps.PaddingBottom.Offset) end - self.setSize(UDim2.new(0, size.X, 0, size.Y)) + local combinedSize + + if fitAxes == "X" then + combinedSize = UDim2.new(0, contentSize.X, containerProps.Size.Y.Scale, containerProps.Size.Y.Offset) + elseif fitAxes == "Y" then + combinedSize = UDim2.new(containerProps.Size.X.Scale, containerProps.Size.X.Offset, 0, contentSize.Y) + elseif fitAxes == "XY" then + combinedSize = UDim2.new(0, contentSize.X, 0, contentSize.Y) + else + error("Invalid fitAxes value") + end + + if fitAxes ~= "XY" then + print("combinedSize", combinedSize) + end + + self.setSize(combinedSize) end, }, layoutProps)), diff --git a/plugin/src/Components/FormButton.lua b/plugin/src/Components/FormButton.lua index 719d27b6..2833e04e 100644 --- a/plugin/src/Components/FormButton.lua +++ b/plugin/src/Components/FormButton.lua @@ -4,6 +4,7 @@ local Plugin = Rojo.Plugin local Roact = require(Rojo.Roact) local Assets = require(Plugin.Assets) +local Theme = require(Plugin.Theme) local FitList = require(Plugin.Components.FitList) local FitText = require(Plugin.Components.FitText) @@ -16,7 +17,16 @@ local function FormButton(props) local layoutOrder = props.layoutOrder local onClick = props.onClick - local imageColor = props.secondary and Color3.new(0.95, 0.95, 0.95) or nil + local textColor + local backgroundColor + + if props.secondary then + textColor = Theme.AccentColor + backgroundColor = Theme.SecondaryColor + else + textColor = Theme.SecondaryColor + backgroundColor = Theme.AccentColor + end return e(FitList, { containerKind = "ImageButton", @@ -28,7 +38,7 @@ local function FormButton(props) ImageRectSize = RoundBox.size, SliceCenter = RoundBox.center, ScaleType = Enum.ScaleType.Slice, - ImageColor3 = imageColor, + ImageColor3 = backgroundColor, [Roact.Event.Activated] = function() if onClick ~= nil then @@ -41,9 +51,9 @@ local function FormButton(props) Kind = "TextLabel", Text = text, TextSize = 22, - Font = Enum.Font.SourceSansBold, + TextColor3 = textColor, + Font = Theme.ButtonFont, Padding = Vector2.new(14, 6), - TextColor3 = Color3.new(0.05, 0.05, 0.05), BackgroundTransparency = 1, }), }) diff --git a/plugin/src/Components/FormTextInput.lua b/plugin/src/Components/FormTextInput.lua index 962cb716..63142b8a 100644 --- a/plugin/src/Components/FormTextInput.lua +++ b/plugin/src/Components/FormTextInput.lua @@ -4,6 +4,7 @@ local Plugin = Rojo.Plugin local Roact = require(Rojo.Roact) local Assets = require(Plugin.Assets) +local Theme = require(Plugin.Theme) local e = Roact.createElement @@ -22,7 +23,7 @@ local function FormTextInput(props) ImageRectSize = RoundBox.size, ScaleType = Enum.ScaleType.Slice, SliceCenter = RoundBox.center, - ImageColor3 = Color3.new(0.95, 0.95, 0.95), + ImageColor3 = Theme.SecondaryColor, Size = size, BackgroundTransparency = 1, }, { @@ -36,7 +37,7 @@ local function FormTextInput(props) TextXAlignment = Enum.TextXAlignment.Left, TextSize = 20, Text = value, - TextColor3 = Color3.new(0.05, 0.05, 0.05), + TextColor3 = Theme.PrimaryColor, [Roact.Change.Text] = function(rbx) onValueChange(rbx.Text) diff --git a/plugin/src/Theme.lua b/plugin/src/Theme.lua new file mode 100644 index 00000000..2129f063 --- /dev/null +++ b/plugin/src/Theme.lua @@ -0,0 +1,16 @@ +local Theme = { + ButtonFont = Enum.Font.SourceSansSemibold, + TitleFont = Enum.Font.SourceSansSemibold, + MainFont = Enum.Font.SourceSans, + AccentColor = Color3.fromRGB(136, 0, 27), + PrimaryColor = Color3.fromRGB(20, 20, 20), + SecondaryColor = Color3.fromRGB(240, 240, 240), +} + +setmetatable(Theme, { + __index = function(_, key) + error(("%s is not a valid member of Theme"):format(key), 2) + end +}) + +return Theme \ No newline at end of file