New UI, simpler

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", {
+	return Roact.createElement(Roact.Portal, {
-		AutoLocalize = false,
+		target = self.dockWidget,
-		ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
 	}, children)
 end
 
 function App:didMount()
 	Logging.trace("Rojo %s initializing", self.displayedVersion)
 
-	local toolbar = self.props.plugin:CreateToolbar("Rojo " .. self.displayedVersion)
+	checkUpgrade(self.props.plugin)
-
-	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)
-
 	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

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, {
+	return e(Panel, nil, {
-		containerKind = "ImageLabel",
+		Layout = e("UIListLayout", {
-		containerProps = {
+			SortOrder = Enum.SortOrder.LayoutOrder,
-			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 = {
 			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
 

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 ConnectionActivePanel = Roact.Component:extend("ConnectionActivePanel")
-local WhiteCross = Assets.Sprites.WhiteCross
 
-local function ConnectionActivePanel(props)
+function ConnectionActivePanel:render()
-	local stopSession = props.stopSession
+	local stopSession = self.props.stopSession
 
-	return e(FitList, {
+	return e(Panel, nil, {
-		containerKind = "ImageLabel",
+		Layout = Roact.createElement("UIListLayout", {
-		containerProps = {
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
-			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,
 			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", {
+		DisconnectButton = e(FormButton, {
-			Size = UDim2.new(0, 30, 0, 30),
+			layoutOrder = 2,
-			BackgroundTransparency = 1,
+			text = "Disconnect",
-
+			secondary = true,
-			[Roact.Event.Activated] = function()
+			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

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

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