diff --git a/plugin/src/Components/App.lua b/plugin/src/Components/App.lua index 78900ba3..bef4973e 100644 --- a/plugin/src/Components/App.lua +++ b/plugin/src/Components/App.lua @@ -13,11 +13,12 @@ local Version = require(Plugin.Version) local preloadAssets = require(Plugin.preloadAssets) local strict = require(Plugin.strict) -local Theme = require(Plugin.Components.Theme) local ConnectPanel = require(Plugin.Components.ConnectPanel) local ConnectingPanel = require(Plugin.Components.ConnectingPanel) local ConnectionActivePanel = require(Plugin.Components.ConnectionActivePanel) local ErrorPanel = require(Plugin.Components.ErrorPanel) +local SettingsPanel = require(Plugin.Components.SettingsPanel) +local Theme = require(Plugin.Components.Theme) local e = Roact.createElement @@ -62,6 +63,7 @@ local AppStatus = strict("AppStatus", { Connecting = "Connecting", Connected = "Connected", Error = "Error", + Settings = "Settings", }) local App = Roact.Component:extend("App") @@ -155,6 +157,11 @@ function App:render() startSession = function(address, port) self:startSession(address, port) end, + openSettings = function() + self:setState({ + appStatus = AppStatus.Settings, + }) + end, cancel = function() Log.trace("Canceling session configuration") @@ -166,7 +173,7 @@ function App:render() } elseif self.state.appStatus == AppStatus.Connecting then children = { - ConnectingPanel = Roact.createElement(ConnectingPanel), + ConnectingPanel = e(ConnectingPanel), } elseif self.state.appStatus == AppStatus.Connected then children = { @@ -184,9 +191,19 @@ function App:render() end, }), } + elseif self.state.appStatus == AppStatus.Settings then + children = { + e(SettingsPanel, { + back = function() + self:setState({ + appStatus = AppStatus.NotStarted, + }) + end, + }), + } elseif self.state.appStatus == AppStatus.Error then children = { - ErrorPanel = Roact.createElement(ErrorPanel, { + ErrorPanel = e(ErrorPanel, { errorMessage = self.state.errorMessage, onDismiss = function() self:setState({ @@ -197,8 +214,8 @@ function App:render() } end - return Roact.createElement(Theme.StudioProvider, nil, { - UI = Roact.createElement(Roact.Portal, { + return e(Theme.StudioProvider, nil, { + UI = e(Roact.Portal, { target = self.dockWidget, }, children), }) diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index 7c89efe4..8a3e3a99 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -25,6 +25,7 @@ end function ConnectPanel:render() local startSession = self.props.startSession + local openSettings = self.props.openSettings return Theme.with(function(theme) return e(Panel, nil, { @@ -136,6 +137,17 @@ function ConnectPanel:render() PaddingRight = UDim.new(0, 24), }, }, { + e(FormButton, { + layoutOrder = 1, + text = "Settings", + secondary = true, + onClick = function() + if openSettings ~= nil then + openSettings() + end + end, + }), + e(FormButton, { layoutOrder = 2, text = "Connect", diff --git a/plugin/src/Components/SettingsPanel.lua b/plugin/src/Components/SettingsPanel.lua new file mode 100644 index 00000000..3f026d87 --- /dev/null +++ b/plugin/src/Components/SettingsPanel.lua @@ -0,0 +1,47 @@ +local Roact = require(script:FindFirstAncestor("Rojo").Roact) + +local Plugin = script:FindFirstAncestor("Plugin") + +local Theme = require(Plugin.Components.Theme) +local Panel = require(Plugin.Components.Panel) +local FitText = require(Plugin.Components.FitText) +local FormButton = require(Plugin.Components.FormButton) + +local e = Roact.createElement + +local SettingsPanel = Roact.Component:extend("SettingsPanel") + +function SettingsPanel:render() + local back = self.props.back + + return Theme.with(function(theme) + return e(Panel, nil, { + Layout = Roact.createElement("UIListLayout", { + HorizontalAlignment = Enum.HorizontalAlignment.Center, + VerticalAlignment = Enum.VerticalAlignment.Center, + SortOrder = Enum.SortOrder.LayoutOrder, + Padding = UDim.new(0, 8), + }), + + Text = e(FitText, { + Padding = Vector2.new(12, 6), + Font = theme.ButtonFont, + TextSize = 18, + Text = "This will be a settings panel.", + TextColor3 = theme.Text1, + BackgroundTransparency = 1, + }), + + DisconnectButton = e(FormButton, { + layoutOrder = 2, + text = "Okay", + secondary = true, + onClick = function() + back() + end, + }), + }) + end) +end + +return SettingsPanel \ No newline at end of file