diff --git a/assets/kenney-ui-gray-sheet.png b/assets/kenney-ui-gray-sheet.png new file mode 100644 index 00000000..1ebbd975 Binary files /dev/null and b/assets/kenney-ui-gray-sheet.png differ 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