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

plugin: UI pretty much done

Browse Source
This commit is contained in:
Lucien Greathouse
2019-01-04 11:54:12 -08:00
parent edcb3d8638
commit 86e0f3fabe
6 changed files with 241 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
plugin/src/Components/App.lua
View File

@@ -1,15 +1,154 @@
local Roact = require(script:FindFirstAncestor("Rojo").Roact)
local Session = require(script.Parent.Parent.Session)
local Config = require(script.Parent.Parent.Config)
local Version = require(script.Parent.Parent.Version)
local Logging = require(script.Parent.Parent.Logging)
local DevSettings = require(script.Parent.Parent.DevSettings)
local ConnectPanel = require(script.Parent.ConnectPanel)
local ConnectionActivePanel = require(script.Parent.ConnectionActivePanel)
local e = Roact.createElement
local function showUpgradeMessage(lastVersion)
local message = (
"Rojo detected an upgrade from version %s to version %s." ..
"\nMake sure you have also upgraded your server!" ..
"\n\nRojo plugin version %s is intended for use with server version %s."
):format(
Version.display(lastVersion), Version.display(Config.version),
Version.display(Config.version), Config.expectedServerVersionString
)
Logging.info(message)
end
--[[
Check if the user is using a newer version of Rojo than last time. If they
are, show them a reminder to make sure they check their server version.
]]
local function checkUpgrade(plugin)
-- When developing Rojo, there's no use in doing version checks
if DevSettings:isEnabled() then
return
end
local lastVersion = plugin:GetSetting("LastRojoVersion")
if lastVersion then
local wasUpgraded = Version.compare(Config.version, lastVersion) == 1
if wasUpgraded then
showUpgradeMessage(lastVersion)
end
end
plugin:SetSetting("LastRojoVersion", Config.version)
end
local SessionStatus = {
Disconnected = "Disconnected",
Connected = "Connected",
Configuring = "Configuring",
-- TODO: Error?
}
setmetatable(SessionStatus, {
__index = function(_, key)
error(("%q is not a valid member of SessionStatus"):format(tostring(key)), 2)
end,
})
local App = Roact.Component:extend("App")
function App:render()
return e("ScreenGui", nil, {
ConnectPanel = e(ConnectPanel),
function App:init()
self:setState({
sessionStatus = SessionStatus.Disconnected,
})
self.currentSession = nil
self.displayedVersion = DevSettings:isEnabled()
and Config.codename
or Version.display(Config.version)
end
function App:render()
local children
if self.state.sessionStatus == SessionStatus.Connected then
children = {
ConnectionActivePanel = e(ConnectionActivePanel),
}
elseif self.state.sessionStatus == SessionStatus.Configuring then
children = {
ConnectPanel = e(ConnectPanel, {
startSession = function(address, port)
Logging.info("Starting new session")
self.currentSession = Session.new({
address = address,
port = port,
onError = function()
Logging.info("Session terminated")
self.currentSession = nil
self:setState({
sessionStatus = SessionStatus.Disconnected,
})
end
})
self:setState({
sessionStatus = SessionStatus.Connected,
})
end,
cancel = function()
Logging.info("Canceling session configuration")
self:setState({
sessionStatus = SessionStatus.Disconnected,
})
end,
}),
}
end
return e("ScreenGui", nil, children)
end
function App:didMount()
Logging.trace("Rojo %s initializing", self.displayedVersion)
local toolbar = self.props.plugin:CreateToolbar("Rojo " .. self.displayedVersion)
-- TODO: Icon!
local connectButton = toolbar:CreateButton("Connect", "Connect to Rojo Session", "")
connectButton.ClickableWhenViewportHidden = true
connectButton.Click:Connect(function()
connectButton:SetActive(false)
checkUpgrade(self.props.plugin)
if self.state.sessionStatus == SessionStatus.Connected then
Logging.info("Disconnecting session")
error("NYI")
elseif self.state.sessionStatus == SessionStatus.Disconnected then
Logging.info("Starting session configuration")
self:setState({
sessionStatus = SessionStatus.Configuring,
})
elseif self.state.sessionStatus == SessionStatus.Configuring then
Logging.info("Canceling session configuration")
self:setState({
sessionStatus = SessionStatus.Disconnected,
})
end
end)
end
return App

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

@@ -5,6 +5,8 @@ local FitText = require(script.Parent.FitText)
local e = Roact.createElement
local FORM_TEXT_SIZE = 20
local ConnectPanel = Roact.Component:extend("ConnectPanel")
function ConnectPanel:init()
@@ -37,7 +39,7 @@ function ConnectPanel:render()
return e(FitList, {
containerProps = {
BackgroundColor3 = Color3.fromRGB(8, 8, 8),
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),
@@ -63,12 +65,13 @@ function ConnectPanel:render()
},
}, {
Label = e(FitText, {
MinSize = Vector2.new(0, 24),
Kind = "TextLabel",
LayoutOrder = 1,
BackgroundTransparency = 1,
TextXAlignment = Enum.TextXAlignment.Left,
Font = Enum.Font.SourceSans,
TextSize = 16,
TextSize = FORM_TEXT_SIZE,
Text = "Address",
TextColor3 = Color3.fromRGB(245, 245, 245),
@@ -81,23 +84,30 @@ function ConnectPanel:render()
}),
}),
Input = e("TextBox", {
InputOuter = e("Frame", {
LayoutOrder = 2,
Size = UDim2.new(0, 300, 0, 20),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = 16,
Text = self.state.address,
TextColor3 = Color3.fromRGB(245, 245, 245),
BackgroundColor3 = Color3.fromRGB(8, 8, 8),
Size = UDim2.new(0, 300, 0, 24),
BackgroundColor3 = Color3.fromRGB(32, 32, 32),
BorderColor3 = Color3.fromRGB(64, 64, 64),
}, {
InputInner = e("TextBox", {
BackgroundTransparency = 1,
Size = UDim2.new(1, -8, 1, -8),
Position = UDim2.new(0.5, 0, 0.5, 0),
AnchorPoint = Vector2.new(0.5, 0.5),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = FORM_TEXT_SIZE,
Text = self.state.address,
TextColor3 = Color3.fromRGB(245, 245, 245),
[Roact.Change.Text] = function(rbx)
self:setState({
address = rbx.Text,
})
end,
[Roact.Change.Text] = function(rbx)
self:setState({
address = rbx.Text,
})
end,
}),
}),
}),
@@ -112,12 +122,13 @@ function ConnectPanel:render()
},
}, {
Label = e(FitText, {
MinSize = Vector2.new(0, 24),
Kind = "TextLabel",
LayoutOrder = 1,
BackgroundTransparency = 1,
TextXAlignment = Enum.TextXAlignment.Left,
Font = Enum.Font.SourceSans,
TextSize = 16,
TextSize = FORM_TEXT_SIZE,
Text = "Port",
TextColor3 = Color3.fromRGB(245, 245, 245),
@@ -130,23 +141,30 @@ function ConnectPanel:render()
}),
}),
Input = e("TextBox", {
InputOuter = e("Frame", {
LayoutOrder = 2,
Size = UDim2.new(0, 300, 0, 20),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = 16,
Text = self.state.port,
TextColor3 = Color3.fromRGB(245, 245, 245),
BackgroundColor3 = Color3.fromRGB(8, 8, 8),
Size = UDim2.new(0, 300, 0, 24),
BackgroundColor3 = Color3.fromRGB(32, 32, 32),
BorderColor3 = Color3.fromRGB(64, 64, 64),
}, {
InputInner = e("TextBox", {
BackgroundTransparency = 1,
Size = UDim2.new(1, -8, 1, -8),
Position = UDim2.new(0.5, 0, 0.5, 0),
AnchorPoint = Vector2.new(0.5, 0.5),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = FORM_TEXT_SIZE,
Text = self.state.port,
TextColor3 = Color3.fromRGB(245, 245, 245),
[Roact.Change.Text] = function(rbx)
self:setState({
port = rbx.Text,
})
end,
[Roact.Change.Text] = function(rbx)
self:setState({
port = rbx.Text,
})
end,
}),
}),
}),
@@ -163,10 +181,13 @@ function ConnectPanel:render()
e(FitText, {
Kind = "TextButton",
LayoutOrder = 1,
BackgroundColor3 = Color3.fromRGB(16, 16, 16),
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()
if startSession ~= nil then
@@ -178,10 +199,13 @@ function ConnectPanel:render()
e(FitText, {
Kind = "TextButton",
LayoutOrder = 2,
BackgroundColor3 = Color3.fromRGB(16, 16, 16),
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()
if cancel ~= nil then

25
plugin/src/Components/ConnectionActivePanel.lua Normal file
View File

@@ -0,0 +1,25 @@
local Roact = require(script:FindFirstAncestor("Rojo").Roact)
local FitText = require(script.Parent.FitText)
local e = Roact.createElement
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),
})
end
return ConnectionActivePanel

6
plugin/src/Components/FitText.lua
View File

@@ -18,6 +18,7 @@ function FitText:render()
local containerProps = Dictionary.merge(self.props, {
Kind = Dictionary.None,
Padding = Dictionary.None,
MinSize = Dictionary.None,
Size = self.sizeBinding
})
@@ -33,6 +34,7 @@ function FitText:didUpdate()
end
function FitText:updateTextMeasurements()
local minSize = self.props.MinSize or Vector2.new(0, 0)
local padding = self.props.Padding or Vector2.new(0, 0)
local text = self.props.Text or ""
@@ -41,8 +43,8 @@ function FitText:updateTextMeasurements()
local measuredText = TextService:GetTextSize(text, textSize, font, Vector2.new(9e6, 9e6))
local totalSize = UDim2.new(
0, padding.X * 2 + measuredText.X,
0, padding.Y * 2 + measuredText.Y)
0, math.max(minSize.X, padding.X * 2 + measuredText.X),
0, math.max(minSize.Y, padding.Y * 2 + measuredText.Y))
self.setSize(totalSize)
end