From d01e757d2f4441695f3627abebaefbda90ad3e64 Mon Sep 17 00:00:00 2001 From: Lucien Greathouse Date: Mon, 21 Jan 2019 18:34:10 -0800 Subject: [PATCH] UI visual tweaks --- plugin/src/Components/ConnectPanel.lua | 45 +++++++++++++++---------- plugin/src/Components/FormButton.lua | 2 +- plugin/src/Components/FormTextInput.lua | 18 ++++++---- plugin/src/Theme.lua | 3 +- 4 files changed, 43 insertions(+), 25 deletions(-) diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index 3308569c..f1ec4280 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -33,13 +33,13 @@ function ConnectPanel:init() self.footerVersionSize, }, function(container, other) - return UDim2.new(0, container.X - other.X - 16, 0, 18) + return UDim2.new(0, container.X - other.X - 16, 0, 32) end ) self:setState({ - address = Config.defaultHost, - port = Config.defaultPort, + address = "", + port = "", }) end @@ -73,10 +73,10 @@ function ConnectPanel:render() Padding = UDim.new(0, 8), }, paddingProps = { - PaddingTop = UDim.new(0, 8), - PaddingBottom = UDim.new(0, 8), - PaddingLeft = UDim.new(0, 8), - PaddingRight = UDim.new(0, 8), + PaddingTop = UDim.new(0, 20), + PaddingBottom = UDim.new(0, 10), + PaddingLeft = UDim.new(0, 24), + PaddingRight = UDim.new(0, 24), }, }, { Address = e(FitList, { @@ -89,7 +89,6 @@ function ConnectPanel:render() }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 20), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -102,8 +101,9 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 200, 0, 28), + width = UDim.new(0, 220), value = self.state.address, + placeholderValue = Config.defaultHost, onValueChange = function(newValue) self:setState({ address = newValue, @@ -122,7 +122,6 @@ function ConnectPanel:render() }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 20), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -135,8 +134,9 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 65, 0, 28), + width = UDim.new(0, 80), value = self.state.port, + placeholderValue = Config.defaultPort, onValueChange = function(newValue) self:setState({ port = newValue, @@ -160,9 +160,9 @@ function ConnectPanel:render() }, paddingProps = { PaddingTop = UDim.new(0, 0), - PaddingBottom = UDim.new(0, 8), - PaddingLeft = UDim.new(0, 8), - PaddingRight = UDim.new(0, 8), + PaddingBottom = UDim.new(0, 20), + PaddingLeft = UDim.new(0, 24), + PaddingRight = UDim.new(0, 24), }, }, { e(FormButton, { @@ -181,7 +181,17 @@ function ConnectPanel:render() text = "Connect", onClick = function() if startSession ~= nil then - startSession(self.state.address, self.state.port) + local address = self.state.address + if address:len() == 0 then + address = Config.defaultHost + end + + local port = self.state.port + if port:len() == 0 then + port = Config.defaultPort + end + + startSession(address, port) end end, }), @@ -208,6 +218,7 @@ function ConnectPanel:render() layoutProps = { FillDirection = Enum.FillDirection.Horizontal, HorizontalAlignment = Enum.HorizontalAlignment.Center, + VerticalAlignment = Enum.VerticalAlignment.Center, }, paddingProps = { PaddingTop = UDim.new(0, 4), @@ -223,10 +234,10 @@ function ConnectPanel:render() }, { Logo = e("ImageLabel", { Image = Assets.Images.Logo, - Size = UDim2.new(0, 60, 0, 40), + Size = UDim2.new(0, 80, 0, 40), ScaleType = Enum.ScaleType.Fit, BackgroundTransparency = 1, - Position = UDim2.new(0, 0, 1, 0), + Position = UDim2.new(0, 0, 1, -10), AnchorPoint = Vector2.new(0, 1), }), }), diff --git a/plugin/src/Components/FormButton.lua b/plugin/src/Components/FormButton.lua index 845fd06b..94ffba5e 100644 --- a/plugin/src/Components/FormButton.lua +++ b/plugin/src/Components/FormButton.lua @@ -53,7 +53,7 @@ local function FormButton(props) TextSize = 18, TextColor3 = textColor, Font = Theme.ButtonFont, - Padding = Vector2.new(16, 6), + Padding = Vector2.new(16, 8), BackgroundTransparency = 1, }), }) diff --git a/plugin/src/Components/FormTextInput.lua b/plugin/src/Components/FormTextInput.lua index 07765919..5246bfcd 100644 --- a/plugin/src/Components/FormTextInput.lua +++ b/plugin/src/Components/FormTextInput.lua @@ -10,11 +10,15 @@ local e = Roact.createElement local RoundBox = Assets.Slices.RoundBox +local TEXT_SIZE = 22 +local PADDING = 8 + local function FormTextInput(props) local value = props.value + local placeholderValue = props.placeholderValue local onValueChange = props.onValueChange local layoutOrder = props.layoutOrder - local size = props.size + local width = props.width return e("ImageLabel", { LayoutOrder = layoutOrder, @@ -24,20 +28,22 @@ local function FormTextInput(props) ScaleType = Enum.ScaleType.Slice, SliceCenter = RoundBox.center, ImageColor3 = Theme.SecondaryColor, - Size = size, + Size = UDim2.new(width.Scale, width.Offset, 0, TEXT_SIZE + PADDING * 2), BackgroundTransparency = 1, }, { InputInner = e("TextBox", { BackgroundTransparency = 1, - Size = UDim2.new(1, -12, 1, -12), + Size = UDim2.new(1, -PADDING * 2, 1, -PADDING * 2), Position = UDim2.new(0.5, 0, 0.5, 0), AnchorPoint = Vector2.new(0.5, 0.5), Font = Theme.InputFont, ClearTextOnFocus = false, - TextXAlignment = Enum.TextXAlignment.Left, - TextSize = 18, + TextXAlignment = Enum.TextXAlignment.Center, + TextSize = TEXT_SIZE, Text = value, - TextColor3 = Theme.PrimaryColor, + PlaceholderText = placeholderValue, + PlaceholderColor3 = Theme.AccentLightColor, + TextColor3 = Theme.AccentColor, [Roact.Change.Text] = function(rbx) onValueChange(rbx.Text) diff --git a/plugin/src/Theme.lua b/plugin/src/Theme.lua index 1b860387..85473ea8 100644 --- a/plugin/src/Theme.lua +++ b/plugin/src/Theme.lua @@ -1,10 +1,11 @@ local Theme = { ButtonFont = Enum.Font.GothamSemibold, - InputFont = Enum.Font.Gotham, + InputFont = Enum.Font.Code, TitleFont = Enum.Font.GothamBold, MainFont = Enum.Font.Gotham, AccentColor = Color3.fromRGB(136, 0, 27), + AccentLightColor = Color3.fromRGB(210, 145, 157), PrimaryColor = Color3.fromRGB(20, 20, 20), SecondaryColor = Color3.fromRGB(235, 235, 235), LightTextColor = Color3.fromRGB(140, 140, 140),