rojo-rbx/rojo
1
0
Fork 1
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-04-21 05:06:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revamp UI using Kenney UI assets

Browse Source
This commit is contained in:
Lucien Greathouse
2019-01-11 14:10:02 -08:00
parent 5ad830a6d7
commit d81eaa6c13
10 changed files with 270 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
plugin/src/Components/ConnectPanel.lua
View File

@@ -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