From d81eaa6c1372d9bd67d115c95aed013c5631ef25 Mon Sep 17 00:00:00 2001 From: Lucien Greathouse Date: Fri, 11 Jan 2019 14:10:02 -0800 Subject: [PATCH] Revamp UI using Kenney UI assets --- assets/kenney-ui-gray-sheet.png | Bin 0 -> 12953 bytes assets/kenney-ui-gray-sheet.xml | 41 +++++ plugin/src/Assets.lua | 52 +++++++ plugin/src/Components/App.lua | 15 +- plugin/src/Components/ConnectPanel.lua | 146 +++++++++++------- .../src/Components/ConnectionActivePanel.lua | 38 +++-- plugin/src/Components/FitList.lua | 3 +- plugin/src/Components/FitText.lua | 2 +- plugin/src/Components/FormButton.lua | 49 ++++++ plugin/src/Icons.lua | 13 -- 10 files changed, 270 insertions(+), 89 deletions(-) create mode 100644 assets/kenney-ui-gray-sheet.png create mode 100644 assets/kenney-ui-gray-sheet.xml create mode 100644 plugin/src/Assets.lua create mode 100644 plugin/src/Components/FormButton.lua delete mode 100644 plugin/src/Icons.lua diff --git a/assets/kenney-ui-gray-sheet.png b/assets/kenney-ui-gray-sheet.png new file mode 100644 index 0000000000000000000000000000000000000000..1ebbd975d33283c59cdbe7257a74d02855334d77 GIT binary patch literal 12953 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 P5MzeAraE~?9Dn;i{uUhC literal 0 HcmV?d00001 diff --git a/assets/kenney-ui-gray-sheet.xml b/assets/kenney-ui-gray-sheet.xml new file mode 100644 index 00000000..d7f87ddf --- /dev/null +++ b/assets/kenney-ui-gray-sheet.xml @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua new file mode 100644 index 00000000..21c3c30a --- /dev/null +++ b/plugin/src/Assets.lua @@ -0,0 +1,52 @@ +local sheetAsset = "rbxassetid://2738712459" + +local Assets = { + Sprites = { + WhiteCross = { + asset = sheetAsset, + offset = Vector2.new(190, 318), + size = Vector2.new(18, 18), + }, + }, + Slices = { + GrayBox = { + asset = sheetAsset, + offset = Vector2.new(148, 433), + size = Vector2.new(36, 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), + center = Rect.new(16, 16, 17, 17), + }, + }, + StartSession = "", + SessionActive = "", + Configure = "", +} + +local function guardForTypos(name, map) + setmetatable(map, { + __index = function(_, key) + error(("%q is not a valid member of %s"):format(tostring(key), name), 2) + end + }) + + for key, child in pairs(map) do + if type(child) == "table" then + guardForTypos(("%s.%s"):format(name, key), child) + end + end +end + +guardForTypos("Assets", Assets) + +return Assets \ No newline at end of file diff --git a/plugin/src/Components/App.lua b/plugin/src/Components/App.lua index 53b4ee51..35bed493 100644 --- a/plugin/src/Components/App.lua +++ b/plugin/src/Components/App.lua @@ -2,7 +2,7 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact) local Plugin = script:FindFirstAncestor("Plugin") -local Icons = require(Plugin.Icons) +local Assets = require(Plugin.Assets) local Session = require(Plugin.Session) local Config = require(Plugin.Config) local Version = require(Plugin.Version) @@ -123,7 +123,10 @@ function App:render() } end - return e("ScreenGui", nil, children) + return e("ScreenGui", { + AutoLocalize = false, + ZIndexBehavior = Enum.ZIndexBehavior.Sibling, + }, children) end function App:didMount() @@ -134,7 +137,7 @@ function App:didMount() self.connectButton = toolbar:CreateButton( "Connect", "Connect to a running Rojo session", - Icons.StartSession) + Assets.StartSession) self.connectButton.ClickableWhenViewportHidden = false self.connectButton.Click:Connect(function() checkUpgrade(self.props.plugin) @@ -166,7 +169,7 @@ function App:didMount() self.configButton = toolbar:CreateButton( "Configure", "Configure the Rojo plugin", - Icons.Configure) + Assets.Configure) self.configButton.ClickableWhenViewportHidden = false self.configButton.Click:Connect(function() self.configButton:SetActive(false) @@ -180,9 +183,9 @@ function App:didUpdate() self.connectButton:SetActive(connectActive) if self.state.sessionStatus == SessionStatus.Connected then - self.connectButton.Icon = Icons.SessionActive + self.connectButton.Icon = Assets.SessionActive else - self.connectButton.Icon = Icons.StartSession + self.connectButton.Icon = Assets.StartSession end end diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index d4d6e2eb..afeedc3c 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -1,12 +1,21 @@ -local Roact = require(script:FindFirstAncestor("Rojo").Roact) +local Rojo = script:FindFirstAncestor("Rojo") +local Plugin = Rojo.Plugin -local Config = require(script.Parent.Parent.Config) +local Roact = require(Rojo.Roact) -local FitList = require(script.Parent.FitList) -local FitText = require(script.Parent.FitText) +local Config = require(Plugin.Config) +local Assets = require(Plugin.Assets) + +local FitList = require(Plugin.Components.FitList) +local FitText = require(Plugin.Components.FitText) +local FormButton = require(Plugin.Components.FormButton) + +local WhiteCross = Assets.Sprites.WhiteCross +local GrayBox = Assets.Slices.GrayBox local e = Roact.createElement +local TEXT_COLOR = Color3.new(0.05, 0.05, 0.05) local FORM_TEXT_SIZE = 20 local ConnectPanel = Roact.Component:extend("ConnectPanel") @@ -40,34 +49,69 @@ function ConnectPanel:render() local cancel = self.props.cancel return e(FitList, { + containerKind = "ImageLabel", containerProps = { - BackgroundColor3 = Color3.fromRGB(32, 32, 32), - BorderColor3 = Color3.fromRGB(64, 64, 64), - Position = UDim2.new(0.5, 0, 0, 0), - AnchorPoint = Vector2.new(0.5, 0), + Image = GrayBox.asset, + ImageRectOffset = GrayBox.offset, + ImageRectSize = GrayBox.size, + 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), + }, + layoutProps = { + HorizontalAlignment = Enum.HorizontalAlignment.Center, }, }, { - Title = e("TextLabel", { + Head = e("Frame", { LayoutOrder = 1, - Font = Enum.Font.SourceSans, - TextSize = 22, - Text = "Start New Rojo Session", - Size = UDim2.new(1, 0, 0, 28), + Size = UDim2.new(1, 0, 0, 36), BackgroundTransparency = 1, - TextColor3 = Color3.new(1, 1, 1), }, { - BottomBorder = e("Frame", { - BorderSizePixel = 0, - BackgroundColor3 = Color3.fromRGB(48, 48, 48), - Size = UDim2.new(1, 0, 0, 1), - Position = UDim2.new(0, 0, 1, -1), + Padding = e("UIPadding", { + PaddingTop = UDim.new(0, 8), + PaddingBottom = UDim.new(0, 8), + PaddingLeft = UDim.new(0, 8), + PaddingRight = UDim.new(0, 8), }), + + Title = e("TextLabel", { + Font = Enum.Font.SourceSansBold, + TextSize = 22, + Text = "Start New Rojo Session", + Size = UDim2.new(1, 0, 1, 0), + TextXAlignment = Enum.TextXAlignment.Left, + BackgroundTransparency = 1, + TextColor3 = TEXT_COLOR, + }), + + Close = e("ImageButton", { + Image = WhiteCross.asset, + ImageRectOffset = WhiteCross.offset, + ImageRectSize = WhiteCross.size, + Size = UDim2.new(0, 18, 0, 18), + Position = UDim2.new(1, 0, 0.5, 0), + AnchorPoint = Vector2.new(1, 0.5), + ImageColor3 = TEXT_COLOR, + BackgroundTransparency = 1, + [Roact.Event.Activated] = function() + cancel() + end, + }), + }), + + 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, { containerProps = { BackgroundTransparency = 1, - LayoutOrder = 2, + LayoutOrder = 3, }, layoutProps = { Padding = UDim.new(0, 8), @@ -95,10 +139,10 @@ function ConnectPanel:render() LayoutOrder = 1, BackgroundTransparency = 1, TextXAlignment = Enum.TextXAlignment.Left, - Font = Enum.Font.SourceSans, + Font = Enum.Font.SourceSansBold, TextSize = FORM_TEXT_SIZE, Text = "Address", - TextColor3 = Color3.fromRGB(245, 245, 245), + TextColor3 = TEXT_COLOR, [Roact.Change.AbsoluteSize] = function(rbx) self:updateLabelSize("address", rbx.AbsoluteSize) @@ -109,11 +153,15 @@ function ConnectPanel:render() }), }), - InputOuter = e("Frame", { + InputOuter = e("ImageLabel", { LayoutOrder = 2, + Image = GrayBox.asset, + ImageRectOffset = GrayBox.offset, + ImageRectSize = GrayBox.size, + ScaleType = Enum.ScaleType.Slice, + SliceCenter = GrayBox.center, Size = UDim2.new(0, 300, 0, 24), - BackgroundColor3 = Color3.fromRGB(32, 32, 32), - BorderColor3 = Color3.fromRGB(64, 64, 64), + BackgroundTransparency = 1, }, { InputInner = e("TextBox", { BackgroundTransparency = 1, @@ -125,7 +173,7 @@ function ConnectPanel:render() TextXAlignment = Enum.TextXAlignment.Left, TextSize = FORM_TEXT_SIZE, Text = self.state.address, - TextColor3 = Color3.fromRGB(245, 245, 245), + TextColor3 = TEXT_COLOR, [Roact.Change.Text] = function(rbx) self:setState({ @@ -152,10 +200,10 @@ function ConnectPanel:render() LayoutOrder = 1, BackgroundTransparency = 1, TextXAlignment = Enum.TextXAlignment.Left, - Font = Enum.Font.SourceSans, + Font = Enum.Font.SourceSansBold, TextSize = FORM_TEXT_SIZE, Text = "Port", - TextColor3 = Color3.fromRGB(245, 245, 245), + TextColor3 = TEXT_COLOR, [Roact.Change.AbsoluteSize] = function(rbx) self:updateLabelSize("port", rbx.AbsoluteSize) @@ -166,11 +214,15 @@ function ConnectPanel:render() }), }), - InputOuter = e("Frame", { + InputOuter = e("ImageLabel", { LayoutOrder = 2, + Image = GrayBox.asset, + ImageRectOffset = GrayBox.offset, + ImageRectSize = GrayBox.size, + ScaleType = Enum.ScaleType.Slice, + SliceCenter = GrayBox.center, Size = UDim2.new(0, 300, 0, 24), - BackgroundColor3 = Color3.fromRGB(32, 32, 32), - BorderColor3 = Color3.fromRGB(64, 64, 64), + BackgroundTransparency = 1, }, { InputInner = e("TextBox", { BackgroundTransparency = 1, @@ -182,7 +234,7 @@ function ConnectPanel:render() TextXAlignment = Enum.TextXAlignment.Left, TextSize = FORM_TEXT_SIZE, Text = self.state.port, - TextColor3 = Color3.fromRGB(245, 245, 245), + TextColor3 = TEXT_COLOR, [Roact.Change.Text] = function(rbx) self:setState({ @@ -203,36 +255,18 @@ function ConnectPanel:render() Padding = UDim.new(0, 8), }, }, { - e(FitText, { - Kind = "TextButton", - LayoutOrder = 1, - BackgroundColor3 = Color3.fromRGB(32, 32, 32), - BorderColor3 = Color3.fromRGB(64, 64, 64), - TextColor3 = Color3.fromRGB(245, 245, 245), - Text = "Start", - Font = Enum.Font.SourceSans, - TextSize = FORM_TEXT_SIZE, - Padding = Vector2.new(12, 3), - - [Roact.Event.Activated] = function() + e(FormButton, { + text = "Start", + onClick = function() if startSession ~= nil then startSession(self.state.address, self.state.port) end end, }), - e(FitText, { - Kind = "TextButton", - LayoutOrder = 2, - BackgroundColor3 = Color3.fromRGB(32, 32, 32), - BorderColor3 = Color3.fromRGB(64, 64, 64), - TextColor3 = Color3.fromRGB(245, 245, 245), - Text = "Cancel", - Font = Enum.Font.SourceSans, - TextSize = FORM_TEXT_SIZE, - Padding = Vector2.new(12, 3), - - [Roact.Event.Activated] = function() + e(FormButton, { + text = "Cancel", + onClick = function() if cancel ~= nil then cancel() end diff --git a/plugin/src/Components/ConnectionActivePanel.lua b/plugin/src/Components/ConnectionActivePanel.lua index a63ea6aa..846a10ce 100644 --- a/plugin/src/Components/ConnectionActivePanel.lua +++ b/plugin/src/Components/ConnectionActivePanel.lua @@ -1,24 +1,38 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact) +local Assets = require(script.Parent.Parent.Assets) + +local FitList = require(script.Parent.FitList) local FitText = require(script.Parent.FitText) local e = Roact.createElement +local GrayBox = Assets.Slices.GrayBox + local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel") function ConnectionActivePanel:render() - return e(FitText, { - Kind = "TextLabel", - Padding = Vector2.new(4, 4), - Font = Enum.Font.SourceSans, - TextSize = 16, - Text = "Rojo Connected", - TextColor3 = Color3.new(1, 1, 1), - BackgroundColor3 = Color3.new(0, 0, 0), - BorderSizePixel = 0, - BackgroundTransparency = 0.6, - Position = UDim2.new(0.5, 0, 0, 0), - AnchorPoint = Vector2.new(0.5, 0), + return e(FitList, { + containerKind = "ImageButton", + containerProps = { + Image = GrayBox.asset, + ImageRectOffset = GrayBox.offset, + ImageRectSize = GrayBox.size, + SliceCenter = GrayBox.center, + ScaleType = Enum.ScaleType.Slice, + BackgroundTransparency = 1, + Position = UDim2.new(0.5, 0, 0, 0), + AnchorPoint = Vector2.new(0.5, 0), + }, + }, { + Text = e(FitText, { + Padding = Vector2.new(12, 6), + Font = Enum.Font.SourceSans, + TextSize = 18, + Text = "Rojo Connected", + TextColor3 = Color3.new(0.05, 0.05, 0.05), + BackgroundTransparency = 1, + }), }) end diff --git a/plugin/src/Components/FitList.lua b/plugin/src/Components/FitList.lua index 4aa49cb9..50d2f581 100644 --- a/plugin/src/Components/FitList.lua +++ b/plugin/src/Components/FitList.lua @@ -11,6 +11,7 @@ function FitList:init() end function FitList:render() + local containerKind = self.props.containerKind or "Frame" local containerProps = self.props.containerProps local layoutProps = self.props.layoutProps local paddingProps = self.props.paddingProps @@ -43,7 +44,7 @@ function FitList:render() Size = self.sizeBinding, }) - return e("Frame", fullContainerProps, children) + return e(containerKind, fullContainerProps, children) end return FitList \ No newline at end of file diff --git a/plugin/src/Components/FitText.lua b/plugin/src/Components/FitText.lua index 673bcf03..2f9e6bc6 100644 --- a/plugin/src/Components/FitText.lua +++ b/plugin/src/Components/FitText.lua @@ -13,7 +13,7 @@ function FitText:init() end function FitText:render() - local kind = self.props.Kind + local kind = self.props.Kind or "TextLabel" local containerProps = Dictionary.merge(self.props, { Kind = Dictionary.None, diff --git a/plugin/src/Components/FormButton.lua b/plugin/src/Components/FormButton.lua new file mode 100644 index 00000000..17bc8b67 --- /dev/null +++ b/plugin/src/Components/FormButton.lua @@ -0,0 +1,49 @@ +local Rojo = script:FindFirstAncestor("Rojo") +local Plugin = Rojo.Plugin + +local Roact = require(Rojo.Roact) + +local Assets = require(Plugin.Assets) +local FitList = require(Plugin.Components.FitList) +local FitText = require(Plugin.Components.FitText) + +local e = Roact.createElement + +local GrayButton07 = Assets.Slices.GrayButton07 + +local function FormButton(props) + local text = props.text + local layoutOrder = props.layoutOrder + local onClick = props.onClick + + return e(FitList, { + containerKind = "ImageButton", + containerProps = { + LayoutOrder = layoutOrder, + BackgroundTransparency = 1, + Image = GrayButton07.asset, + ImageRectOffset = GrayButton07.offset, + ImageRectSize = GrayButton07.size, + ScaleType = Enum.ScaleType.Slice, + SliceCenter = GrayButton07.center, + + [Roact.Event.Activated] = function() + if onClick ~= nil then + onClick() + end + end, + }, + }, { + Text = e(FitText, { + Kind = "TextLabel", + Text = text, + TextSize = 22, + Font = Enum.Font.SourceSansBold, + Padding = Vector2.new(14, 6), + TextColor3 = Color3.new(0.05, 0.05, 0.05), + BackgroundTransparency = 1, + }), + }) +end + +return FormButton \ No newline at end of file diff --git a/plugin/src/Icons.lua b/plugin/src/Icons.lua deleted file mode 100644 index ef631416..00000000 --- a/plugin/src/Icons.lua +++ /dev/null @@ -1,13 +0,0 @@ -local Icons = { - StartSession = "", - SessionActive = "", - Configure = "", -} - -setmetatable(Icons, { - __index = function(_, key) - error(("%q is not a valid member of Icons"):format(tostring(key)), 2) - end -}) - -return Icons \ No newline at end of file