Add buttons on connected page (#722)

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Improved sync info text on Connected page. ([#692])
 * Fix patch visualizer breaking when instances are removed during sync ([#713])
 * Patch visualizer now indicates what changes failed to apply. ([#717])
+* Add buttons for navigation on the Connected page ([#722])
 
 [#668]: https://github.com/rojo-rbx/rojo/pull/668
 [#674]: https://github.com/rojo-rbx/rojo/pull/674
@@ -24,7 +25,7 @@
 [#692]: https://github.com/rojo-rbx/rojo/pull/692
 [#713]: https://github.com/rojo-rbx/rojo/pull/713
 [#717]: https://github.com/rojo-rbx/rojo/pull/717
-
+[#722]: https://github.com/rojo-rbx/rojo/pull/722
 
 ## [7.3.0] - April 22, 2023
 * Added `$attributes` to project format. ([#574])

plugin/src/App/StatusPages/Connected.lua

@@ -12,6 +12,7 @@ local PatchSet = require(Plugin.PatchSet)
 
 local Header = require(Plugin.App.Components.Header)
 local IconButton = require(Plugin.App.Components.IconButton)
+local TextButton = require(Plugin.App.Components.TextButton)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
@@ -55,7 +56,7 @@ function ChangesDrawer:render()
 		return e(BorderedContainer, {
 			transparency = self.props.transparency,
 			size = self.props.height:map(function(y)
-				return UDim2.new(1, 0, y, -180 * y)
+				return UDim2.new(1, 0, y, -220 * y)
 			end),
 			position = UDim2.new(0, 0, 1, 0),
 			anchorPoint = Vector2.new(0, 1),
@@ -138,22 +139,6 @@ local function ConnectionDetails(props)
 				}),
 			}),
 
-			Disconnect = e(IconButton, {
-				icon = Assets.Images.Icons.Close,
-				iconSize = 24,
-				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = props.transparency,
-
-				position = UDim2.new(1, 0, 0.5, 0),
-				anchorPoint = Vector2.new(1, 0.5),
-
-				onClick = props.onDisconnect,
-			}, {
-				Tip = e(Tooltip.Trigger, {
-					text = "Disconnect from the Rojo sync server",
-				}),
-			}),
-
 			Padding = e("UIPadding", {
 				PaddingLeft = UDim.new(0, 17),
 				PaddingRight = UDim.new(0, 15),
@@ -290,6 +275,44 @@ function ConnectedPage:render()
 				onDisconnect = self.props.onDisconnect,
 			}),
 
+			Buttons = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 34),
+				LayoutOrder = 3,
+				BackgroundTransparency = 1,
+				ZIndex = 2,
+			}, {
+				Settings = e(TextButton, {
+					text = "Settings",
+					style = "Bordered",
+					transparency = self.props.transparency,
+					layoutOrder = 1,
+					onClick = self.props.onNavigateSettings,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "View and modify plugin settings"
+					}),
+				}),
+
+				Disconnect = e(TextButton, {
+					text = "Disconnect",
+					style = "Solid",
+					transparency = self.props.transparency,
+					layoutOrder = 2,
+					onClick = self.props.onDisconnect,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Disconnect from the Rojo sync server"
+					}),
+				}),
+
+				Layout = e("UIListLayout", {
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 10),
+				}),
+			}),
+
 			ChangeInfo = e("TextButton", {
 				Text = self.changeInfoText,
 				Font = Enum.Font.Gotham,
@@ -303,7 +326,7 @@ function ConnectedPage:render()
 
 				Size = UDim2.new(1, 0, 0, 28),
 
-				LayoutOrder = 3,
+				LayoutOrder = 4,
 				BackgroundTransparency = 1,
 
 				[Roact.Event.MouseEnter] = function()
@@ -346,7 +369,7 @@ function ConnectedPage:render()
 				unappliedPatch = self.props.patchData.unapplied,
 				serveSession = self.props.serveSession,
 				height = self.changeDrawerHeight,
-				layoutOrder = 4,
+				layoutOrder = 5,
 
 				onClose = function()
 					self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {

plugin/src/App/init.lua

@@ -563,6 +563,7 @@ function App:render()
 						end,
 
 						onNavigateSettings = function()
+							self.backPage = AppStatus.NotConnected
 							self:setState({
 								appStatus = AppStatus.Settings,
 							})
@@ -595,12 +596,19 @@ function App:render()
 						onDisconnect = function()
 							self:endSession()
 						end,
+
+						onNavigateSettings = function()
+							self.backPage = AppStatus.Connected
+							self:setState({
+								appStatus = AppStatus.Settings,
+							})
+						end,
 					}),
 
 					Settings = createPageElement(AppStatus.Settings, {
 						onBack = function()
 							self:setState({
-								appStatus = AppStatus.NotConnected,
+								appStatus = self.backPage or AppStatus.NotConnected,
 							})
 						end,
 					}),