diff --git a/plugin/src/Components/App.lua b/plugin/src/Components/App.lua index 79436972..d6a3ebe4 100644 --- a/plugin/src/Components/App.lua +++ b/plugin/src/Components/App.lua @@ -54,7 +54,6 @@ end local SessionStatus = { Disconnected = "Disconnected", Connected = "Connected", - ConfiguringSession = "ConfiguringSession", -- TODO: Error? } @@ -71,12 +70,39 @@ function App:init() sessionStatus = SessionStatus.Disconnected, }) - self.connectButton = nil self.currentSession = nil self.displayedVersion = DevSettings:isEnabled() and Config.codename or Version.display(Config.version) + + local toolbar = self.props.plugin:CreateToolbar("Rojo " .. self.displayedVersion) + + self.toggleButton = toolbar:CreateButton( + "Rojo", + "Show or hide the Rojo panel", + "") + self.toggleButton.ClickableWhenViewportHidden = true + self.toggleButton.Click:Connect(function() + self.dockWidget.Enabled = not self.dockWidget.Enabled + end) + + local widgetInfo = DockWidgetPluginGuiInfo.new( + Enum.InitialDockState.Right, + false, -- Initially enabled state + false, -- Whether to override the widget's previous state + 360, 190, -- Floating size + 360, 190 -- Minimum size + ) + + self.dockWidget = self.props.plugin:CreateDockWidgetPluginGui("Rojo-0.5.x", widgetInfo) + self.dockWidget.Title = self.displayedVersion + self.dockWidget.AutoLocalize = false + self.dockWidget.ZIndexBehavior = Enum.ZIndexBehavior.Sibling + + self.dockWidget:GetPropertyChangedSignal("Enabled"):Connect(function() + self.toggleButton:SetActive(self.dockWidget.Enabled) + end) end function App:render() @@ -98,7 +124,7 @@ function App:render() end, }), } - elseif self.state.sessionStatus == SessionStatus.ConfiguringSession then + elseif self.state.sessionStatus == SessionStatus.Disconnected then children = { ConnectPanel = e(ConnectPanel, { startSession = function(address, port) @@ -135,50 +161,15 @@ function App:render() } end - return e("ScreenGui", { - AutoLocalize = false, - ZIndexBehavior = Enum.ZIndexBehavior.Sibling, + return Roact.createElement(Roact.Portal, { + target = self.dockWidget, }, children) end function App:didMount() Logging.trace("Rojo %s initializing", self.displayedVersion) - local toolbar = self.props.plugin:CreateToolbar("Rojo " .. self.displayedVersion) - - self.connectButton = toolbar:CreateButton( - "Connect", - "Connect to a running Rojo session", - Assets.StartSession) - self.connectButton.ClickableWhenViewportHidden = false - self.connectButton.Click:Connect(function() - checkUpgrade(self.props.plugin) - - if self.state.sessionStatus == SessionStatus.Connected then - Logging.trace("Disconnecting session") - - self.currentSession:disconnect() - self.currentSession = nil - self:setState({ - sessionStatus = SessionStatus.Disconnected, - }) - - Logging.trace("Session terminated by user") - elseif self.state.sessionStatus == SessionStatus.Disconnected then - Logging.trace("Starting session configuration") - - self:setState({ - sessionStatus = SessionStatus.ConfiguringSession, - }) - elseif self.state.sessionStatus == SessionStatus.ConfiguringSession then - Logging.trace("Canceling session configuration") - - self:setState({ - sessionStatus = SessionStatus.Disconnected, - }) - end - end) - + checkUpgrade(self.props.plugin) preloadAssets() end @@ -189,17 +180,4 @@ function App:willUnmount() end end -function App:didUpdate() - local connectActive = self.state.sessionStatus == SessionStatus.ConfiguringSession - or self.state.sessionStatus == SessionStatus.Connected - - self.connectButton:SetActive(connectActive) - - if self.state.sessionStatus == SessionStatus.Connected then - self.connectButton.Icon = Assets.SessionActive - else - self.connectButton.Icon = Assets.StartSession - end -end - return App \ No newline at end of file diff --git a/plugin/src/Components/ConnectPanel.lua b/plugin/src/Components/ConnectPanel.lua index 9d26215f..0d47eec1 100644 --- a/plugin/src/Components/ConnectPanel.lua +++ b/plugin/src/Components/ConnectPanel.lua @@ -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 diff --git a/plugin/src/Components/ConnectionActivePanel.lua b/plugin/src/Components/ConnectionActivePanel.lua index e0a8da26..47cb1aa5 100644 --- a/plugin/src/Components/ConnectionActivePanel.lua +++ b/plugin/src/Components/ConnectionActivePanel.lua @@ -3,63 +3,42 @@ local Roact = require(script:FindFirstAncestor("Rojo").Roact) local Plugin = script:FindFirstAncestor("Plugin") local Theme = require(Plugin.Theme) -local Assets = require(Plugin.Assets) -local FitList = require(Plugin.Components.FitList) +local Panel = require(Plugin.Components.Panel) local FitText = require(Plugin.Components.FitText) +local FormButton = require(Plugin.Components.FormButton) local e = Roact.createElement -local RoundBox = Assets.Slices.RoundBox -local WhiteCross = Assets.Sprites.WhiteCross +local ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel") -local function ConnectionActivePanel(props) - local stopSession = props.stopSession +function ConnectionActivePanel:render() + local stopSession = self.props.stopSession - return e(FitList, { - 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 = Rect.new(4, 4, 4, 4), - ScaleType = Enum.ScaleType.Slice, - BackgroundTransparency = 1, - Position = UDim2.new(0.5, 0, 0, 0), - AnchorPoint = Vector2.new(0.5, 0), - }, - layoutProps = { - FillDirection = Enum.FillDirection.Horizontal, + 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 = "Rojo Connected", + Text = "Connected to Live-Sync Server", TextColor3 = Theme.PrimaryColor, BackgroundTransparency = 1, }), - CloseContainer = e("ImageButton", { - Size = UDim2.new(0, 30, 0, 30), - BackgroundTransparency = 1, - - [Roact.Event.Activated] = function() + DisconnectButton = e(FormButton, { + layoutOrder = 2, + text = "Disconnect", + secondary = true, + onClick = function() stopSession() end, - }, { - CloseImage = e("ImageLabel", { - Size = UDim2.new(0, 16, 0, 16), - Position = UDim2.new(0.5, 0, 0.5, 0), - AnchorPoint = Vector2.new(0.5, 0.5), - Image = WhiteCross.asset, - ImageRectOffset = WhiteCross.offset, - ImageRectSize = WhiteCross.size, - ImageColor3 = Theme.PrimaryColor, - BackgroundTransparency = 1, - }), }), }) end diff --git a/plugin/src/Components/Panel.lua b/plugin/src/Components/Panel.lua new file mode 100644 index 00000000..5ae1e874 --- /dev/null +++ b/plugin/src/Components/Panel.lua @@ -0,0 +1,34 @@ +local Roact = require(script:FindFirstAncestor("Rojo").Roact) + +local Plugin = script:FindFirstAncestor("Plugin") + +local RojoFooter = require(Plugin.Components.RojoFooter) + +local e = Roact.createElement + +local Panel = Roact.Component:extend("Panel") + +function Panel:init() + self.footerSize, self.setFooterSize = Roact.createBinding(Vector2.new()) +end + +function Panel:render() + return e("Frame", { + Size = UDim2.new(1, 0, 1, 0), + BackgroundTransparency = 1, + }, { + Layout = Roact.createElement("UIListLayout", { + HorizontalAlignment = Enum.HorizontalAlignment.Center, + SortOrder = Enum.SortOrder.LayoutOrder, + }), + + Body = e("Frame", { + Size = UDim2.new(0, 360, 1, -32), + BackgroundTransparency = 1, + }, self.props[Roact.Children]), + + Footer = e(RojoFooter), + }) +end + +return Panel \ No newline at end of file diff --git a/plugin/src/Components/RojoFooter.lua b/plugin/src/Components/RojoFooter.lua new file mode 100644 index 00000000..767e82bf --- /dev/null +++ b/plugin/src/Components/RojoFooter.lua @@ -0,0 +1,69 @@ +local Rojo = script:FindFirstAncestor("Rojo") +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 FitText = require(Plugin.Components.FitText) + +local e = Roact.createElement + +local RojoFooter = Roact.Component:extend("RojoFooter") + +function RojoFooter:init() + self.footerSize, self.setFooterSize = Roact.createBinding(Vector2.new()) + self.footerVersionSize, self.setFooterVersionSize = Roact.createBinding(Vector2.new()) +end + +function RojoFooter:render() + return e("Frame", { + LayoutOrder = 3, + Size = UDim2.new(1, 0, 0, 32), + BackgroundColor3 = Theme.SecondaryColor, + BorderSizePixel = 0, + }, { + Padding = e("UIPadding", { + 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 = UDim2.new(0, 0, 0, 32), + }, { + 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("TextLabel", { + Position = UDim2.new(1, 0, 0, 0), + Size = UDim2.new(0, 0, 1, 0), + AnchorPoint = Vector2.new(1, 0), + 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 + +return RojoFooter \ No newline at end of file