ari-party/rojo
1
0
Fork 0
forked from rojo-rbx/rojo
Code Pull Requests Activity

New UI, simpler

Browse Source
This commit is contained in:
Lucien Greathouse
2019-06-11 17:31:42 -07:00
parent 5dcac24f99
commit f29b0f2f26
5 changed files with 160 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,25 +4,19 @@ local Plugin = Rojo.Plugin
local Roact = require(Rojo.Roact)
local Config = require(Plugin.Config)
local Version = require(Plugin.Version)
local Assets = require(Plugin.Assets)
local Theme = require(Plugin.Theme)
local Panel = require(Plugin.Components.Panel)
local FitList = require(Plugin.Components.FitList)
local FitText = require(Plugin.Components.FitText)
local FormButton = require(Plugin.Components.FormButton)
local FormTextInput = require(Plugin.Components.FormTextInput)
local RoundBox = Assets.Slices.RoundBox
local e = Roact.createElement
local ConnectPanel = Roact.Component:extend("ConnectPanel")
function ConnectPanel:init()
self.footerSize, self.setFooterSize = Roact.createBinding(Vector2.new())
self.footerVersionSize, self.setFooterVersionSize = Roact.createBinding(Vector2.new())
self:setState({
address = "",
port = "",
@@ -31,24 +25,14 @@ end
function ConnectPanel:render()
local startSession = self.props.startSession
local cancel = self.props.cancel
return e(FitList, {
containerKind = "ImageLabel",
containerProps = {
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.5, 0),
AnchorPoint = Vector2.new(0.5, 0.5),
},
layoutProps = {
return e(Panel, nil, {
Layout = e("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
HorizontalAlignment = Enum.HorizontalAlignment.Center,
},
}, {
VerticalAlignment = Enum.VerticalAlignment.Center,
}),
Inputs = e(FitList, {
containerProps = {
BackgroundTransparency = 1,
@@ -151,17 +135,6 @@ function ConnectPanel:render()
PaddingRight = UDim.new(0, 24),
},
}, {
e(FormButton, {
layoutOrder = 1,
text = "Cancel",
onClick = function()
if cancel ~= nil then
cancel()
end
end,
secondary = true,
}),
e(FormButton, {
layoutOrder = 2,
text = "Connect",
@@ -182,70 +155,6 @@ function ConnectPanel:render()
end,
}),
}),
Footer = e(FitList, {
fitAxes = "Y",
containerKind = "ImageLabel",
containerProps = {
Image = RoundBox.asset,
ImageRectOffset = RoundBox.offset + Vector2.new(0, RoundBox.size.Y / 2),
ImageRectSize = RoundBox.size * Vector2.new(1, 0.5),
SliceCenter = RoundBox.center,
ScaleType = Enum.ScaleType.Slice,
ImageColor3 = Theme.SecondaryColor,
Size = UDim2.new(1, 0, 0, 0),
LayoutOrder = 3,
BackgroundTransparency = 1,
[Roact.Change.AbsoluteSize] = function(rbx)
self.setFooterSize(rbx.AbsoluteSize)
end,
},
layoutProps = {
FillDirection = Enum.FillDirection.Horizontal,
HorizontalAlignment = Enum.HorizontalAlignment.Center,
VerticalAlignment = Enum.VerticalAlignment.Center,
},
paddingProps = {
PaddingTop = UDim.new(0, 4),
PaddingBottom = UDim.new(0, 4),
PaddingLeft = UDim.new(0, 8),
PaddingRight = UDim.new(0, 8),
},
}, {
LogoContainer = e("Frame", {
BackgroundTransparency = 1,
Size = Roact.joinBindings({
container = self.footerSize,
other = self.footerVersionSize
}):map(function(values)
return UDim2.new(0, values.container.X - values.other.X - 16, 0, 32)
end),
}, {
Logo = e("ImageLabel", {
Image = Assets.Images.Logo,
Size = UDim2.new(0, 80, 0, 40),
ScaleType = Enum.ScaleType.Fit,
BackgroundTransparency = 1,
Position = UDim2.new(0, 0, 1, -10),
AnchorPoint = Vector2.new(0, 1),
}),
}),
Version = e(FitText, {
Font = Theme.TitleFont,
TextSize = 18,
Text = Version.display(Config.version),
TextXAlignment = Enum.TextXAlignment.Right,
TextColor3 = Theme.LightTextColor,
BackgroundTransparency = 1,
[Roact.Change.AbsoluteSize] = function(rbx)
self.setFooterVersionSize(rbx.AbsoluteSize)
end,
}),
}),
})
end