From a400abff4cbd9295a079367a22b12d66dba50b22 Mon Sep 17 00:00:00 2001 From: Lucien Greathouse Date: Tue, 15 Jan 2019 23:58:10 -0800 Subject: [PATCH] Switch assets to use custom rounded rectangle --- assets/round-rect-8px-radius-2px-border.png | Bin 0 -> 513 bytes plugin/src/Assets.lua | 20 ++++-------------- plugin/src/Components/ConnectPanel.lua | 19 +++++++++-------- .../src/Components/ConnectionActivePanel.lua | 10 ++++----- plugin/src/Components/FormButton.lua | 13 +++++++----- plugin/src/Components/FormTextInput.lua | 13 ++++++------ 6 files changed, 34 insertions(+), 41 deletions(-) create mode 100644 assets/round-rect-8px-radius-2px-border.png diff --git a/assets/round-rect-8px-radius-2px-border.png b/assets/round-rect-8px-radius-2px-border.png new file mode 100644 index 0000000000000000000000000000000000000000..9c976f19eed6397143f175e1acd3e27614c5e98d GIT binary patch literal 513 zcmV+c0{;DpP)(_`g8%^e{{R4h=>PzAFaQARU;qF*m;eA5Z<1fd zMgRZ-he+}YsB)>a`slY1mZ%DG5Vha|@cY!PyY zz_7&_!Y&5)!n*{S87qw(%(R1@6#go~5Bi>d)I8z6r=OxIegK!i1#k)^92WxAQN+Lva1BU?NekQqYh%p&CqO8F0+vDulu~3_MjXdTc^pgIwlqycUDsG^ z2@ie&E{rivcl#}{jG_pwHF=(srs>h;08&cQG$qe-wAMsX1aKaVkOer;ZIY5#mD5U^qz@-FM09lqXR(f443CugPvC`|BOCSai zLW~B`>xv~`oC#n8m;fe#319-403^@=9QwhKY1_6t{*yr(aL$be&@@eV{40a8P}lWn z0KKkf2|NOOYwajoaL!?^1=s@*(ipP=?!5O@RW&GtbB?O2y8m`(jM+qCwg%32yWO%Z z%dymK{e9&0K+hMzRS=draB^hnf8Y=B9Q1tCAASq~I)kR17F-$$00000NkvXXu0mjf D0CmUZ literal 0 HcmV?d00001 diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua index b73955ab..ad0b4ee5 100644 --- a/plugin/src/Assets.lua +++ b/plugin/src/Assets.lua @@ -9,22 +9,10 @@ local Assets = { }, }, Slices = { - GrayBox = { - asset = sheetAsset, - offset = Vector2.new(147, 433), - size = Vector2.new(38, 36), - center = Rect.new(8, 8, 9, 9), - }, - GrayButton02 = { - asset = sheetAsset, - offset = Vector2.new(0, 98), - size = Vector2.new(190, 45), - center = Rect.new(16, 16, 17, 17), - }, - GrayButton07 = { - asset = sheetAsset, - offset = Vector2.new(195, 0), - size = Vector2.new(49, 49), + RoundBox = { + asset = "rbxassetid://2754309674", + offset = Vector2.new(0, 0), + size = Vector2.new(0, 0), center = Rect.new(16, 16, 17, 17), }, }, diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index adbd8710..1bf7735d 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -12,7 +12,7 @@ local FormButton = require(Plugin.Components.FormButton) local FormTextInput = require(Plugin.Components.FormTextInput) local WhiteCross = Assets.Sprites.WhiteCross -local GrayBox = Assets.Slices.GrayBox +local RoundBox = Assets.Slices.RoundBox local e = Roact.createElement @@ -52,11 +52,11 @@ function ConnectPanel:render() return e(FitList, { containerKind = "ImageLabel", containerProps = { - Image = GrayBox.asset, - ImageRectOffset = GrayBox.offset, - ImageRectSize = GrayBox.size, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, + SliceCenter = RoundBox.center, ScaleType = Enum.ScaleType.Slice, - SliceCenter = GrayBox.center, BackgroundTransparency = 1, Position = UDim2.new(0.5, 0, 0.5, 0), AnchorPoint = Vector2.new(0.5, 0.5), @@ -135,7 +135,7 @@ function ConnectPanel:render() }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 24), + MinSize = Vector2.new(0, 28), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -156,7 +156,7 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 300, 0, 24), + size = UDim2.new(0, 300, 0, 28), value = self.state.address, onValueChange = function(newValue) self:setState({ @@ -177,7 +177,7 @@ function ConnectPanel:render() }, }, { Label = e(FitText, { - MinSize = Vector2.new(0, 24), + MinSize = Vector2.new(0, 28), Kind = "TextLabel", LayoutOrder = 1, BackgroundTransparency = 1, @@ -198,7 +198,7 @@ function ConnectPanel:render() Input = e(FormTextInput, { layoutOrder = 2, - size = UDim2.new(0, 300, 0, 24), + size = UDim2.new(0, 300, 0, 28), value = self.state.port, onValueChange = function(newValue) self:setState({ @@ -234,6 +234,7 @@ function ConnectPanel:render() cancel() end end, + secondary = true, }), }) }) diff --git a/plugin/src/Components/ConnectionActivePanel.lua b/plugin/src/Components/ConnectionActivePanel.lua index 846a10ce..b1d766b6 100644 --- a/plugin/src/Components/ConnectionActivePanel.lua +++ b/plugin/src/Components/ConnectionActivePanel.lua @@ -7,7 +7,7 @@ local FitText = require(script.Parent.FitText) local e = Roact.createElement -local GrayBox = Assets.Slices.GrayBox +local RoundBox = Assets.Slices.RoundBox local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel") @@ -15,10 +15,10 @@ function ConnectionActivePanel:render() return e(FitList, { containerKind = "ImageButton", containerProps = { - Image = GrayBox.asset, - ImageRectOffset = GrayBox.offset, - ImageRectSize = GrayBox.size, - SliceCenter = GrayBox.center, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, + SliceCenter = RoundBox.center, ScaleType = Enum.ScaleType.Slice, BackgroundTransparency = 1, Position = UDim2.new(0.5, 0, 0, 0), diff --git a/plugin/src/Components/FormButton.lua b/plugin/src/Components/FormButton.lua index 17bc8b67..719d27b6 100644 --- a/plugin/src/Components/FormButton.lua +++ b/plugin/src/Components/FormButton.lua @@ -9,23 +9,26 @@ local FitText = require(Plugin.Components.FitText) local e = Roact.createElement -local GrayButton07 = Assets.Slices.GrayButton07 +local RoundBox = Assets.Slices.RoundBox local function FormButton(props) local text = props.text local layoutOrder = props.layoutOrder local onClick = props.onClick + local imageColor = props.secondary and Color3.new(0.95, 0.95, 0.95) or nil + return e(FitList, { containerKind = "ImageButton", containerProps = { LayoutOrder = layoutOrder, BackgroundTransparency = 1, - Image = GrayButton07.asset, - ImageRectOffset = GrayButton07.offset, - ImageRectSize = GrayButton07.size, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, + SliceCenter = RoundBox.center, ScaleType = Enum.ScaleType.Slice, - SliceCenter = GrayButton07.center, + ImageColor3 = imageColor, [Roact.Event.Activated] = function() if onClick ~= nil then diff --git a/plugin/src/Components/FormTextInput.lua b/plugin/src/Components/FormTextInput.lua index 0b3016fc..962cb716 100644 --- a/plugin/src/Components/FormTextInput.lua +++ b/plugin/src/Components/FormTextInput.lua @@ -7,7 +7,7 @@ local Assets = require(Plugin.Assets) local e = Roact.createElement -local GrayBox = Assets.Slices.GrayBox +local RoundBox = Assets.Slices.RoundBox local function FormTextInput(props) local value = props.value @@ -17,17 +17,18 @@ local function FormTextInput(props) return e("ImageLabel", { LayoutOrder = layoutOrder, - Image = GrayBox.asset, - ImageRectOffset = GrayBox.offset, - ImageRectSize = GrayBox.size, + Image = RoundBox.asset, + ImageRectOffset = RoundBox.offset, + ImageRectSize = RoundBox.size, ScaleType = Enum.ScaleType.Slice, - SliceCenter = GrayBox.center, + SliceCenter = RoundBox.center, + ImageColor3 = Color3.new(0.95, 0.95, 0.95), Size = size, BackgroundTransparency = 1, }, { InputInner = e("TextBox", { BackgroundTransparency = 1, - Size = UDim2.new(1, -8, 1, -8), + Size = UDim2.new(1, -12, 1, -12), Position = UDim2.new(0.5, 0, 0.5, 0), AnchorPoint = Vector2.new(0.5, 0.5), Font = Enum.Font.SourceSans,