Better settings control (#725)

- Lock some settings during sync
- Make experimental features more clearly labelled

CHANGELOG.md

@@ -14,6 +14,7 @@
 * Patch visualizer now indicates what changes failed to apply. ([#717])
 * Add buttons for navigation on the Connected page ([#722])
 * Improve tooltip behavior ([#723])
+* Better settings controls ([#725])
 
 [#668]: https://github.com/rojo-rbx/rojo/pull/668
 [#674]: https://github.com/rojo-rbx/rojo/pull/674
@@ -28,6 +29,7 @@
 [#717]: https://github.com/rojo-rbx/rojo/pull/717
 [#722]: https://github.com/rojo-rbx/rojo/pull/722
 [#723]: https://github.com/rojo-rbx/rojo/pull/723
+[#725]: https://github.com/rojo-rbx/rojo/pull/725
 
 ## [7.3.0] - April 22, 2023
 * Added `$attributes` to project format. ([#574])

plugin/src/App/Components/Checkbox.lua

@@ -51,10 +51,15 @@ function Checkbox:render()
 			ZIndex = self.props.zIndex,
 			BackgroundTransparency = 1,
 
-			[Roact.Event.Activated] = self.props.onClick,
+			[Roact.Event.Activated] = function()
+				if self.props.locked then return end
+				self.props.onClick()
+			end,
 		}, {
 			StateTip = e(Tooltip.Trigger, {
-				text = if self.props.active then "Enabled" else "Disabled",
+				text =
+					(if self.props.locked then "[LOCKED] " else "")
+					.. (if self.props.active then "Enabled" else "Disabled"),
 			}),
 
 			Active = e(SlicedImage, {
@@ -65,7 +70,7 @@ function Checkbox:render()
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Active,
+					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
 					ImageColor3 = theme.Active.IconColor,
 					ImageTransparency = activeTransparency,
 
@@ -84,7 +89,7 @@ function Checkbox:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Inactive,
+					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Inactive,
 					ImageColor3 = theme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,
 

plugin/src/App/Components/Dropdown.lua

@@ -29,7 +29,13 @@ function Dropdown:init()
 	})
 end
 
-function Dropdown:didUpdate()
+function Dropdown:didUpdate(prevProps)
+	if self.props.locked and not prevProps.locked then
+		self:setState({
+			open = false,
+		})
+	end
+
 	self.openMotor:setGoal(
 		Flipper.Spring.new(self.state.open and 1 or 0, {
 			frequency = 6,
@@ -68,6 +74,7 @@ function Dropdown:render()
 				Font = Enum.Font.GothamMedium,
 
 				[Roact.Event.Activated] = function()
+					if self.props.locked then return end
 					self:setState({
 						open = false,
 					})
@@ -89,6 +96,7 @@ function Dropdown:render()
 			BackgroundTransparency = 1,
 
 			[Roact.Event.Activated] = function()
+				if self.props.locked then return end
 				self:setState({
 					open = not self.state.open,
 				})
@@ -101,7 +109,7 @@ function Dropdown:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				DropArrow = e("ImageLabel", {
-					Image = Assets.Images.Dropdown.Arrow,
+					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
 					ImageColor3 = self.openBinding:map(function(a)
 						return theme.Closed.IconColor:Lerp(theme.Open.IconColor, a)
 					end),

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -67,6 +67,7 @@ function Setting:render()
 		}, {
 			Input = if self.props.options ~= nil then
 				e(Dropdown, {
+					locked = self.props.locked,
 					options = self.props.options,
 					active = self.state.setting,
 					transparency = self.props.transparency,
@@ -78,6 +79,7 @@ function Setting:render()
 				})
 			else
 				e(Checkbox, {
+					locked = self.props.locked,
 					active = self.state.setting,
 					transparency = self.props.transparency,
 					position = UDim2.new(1, 0, 0.5, 0),
@@ -106,12 +108,13 @@ function Setting:render()
 				BackgroundTransparency = 1,
 			}, {
 				Name = e("TextLabel", {
-					Text = self.props.name,
+					Text = (if self.props.experimental then "<font color=\"#FF8E3C\">⚠ </font>" else "") .. self.props.name,
 					Font = Enum.Font.GothamBold,
 					TextSize = 17,
 					TextColor3 = theme.Setting.NameColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
+					RichText = true,
 
 					Size = UDim2.new(1, 0, 0, 17),
 
@@ -120,7 +123,7 @@ function Setting:render()
 				}),
 
 				Description = e("TextLabel", {
-					Text = self.props.description,
+					Text = (if self.props.experimental then "<font color=\"#FF8E3C\">[Experimental] </font>" else "") .. self.props.description,
 					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
 					TextSize = 14,
@@ -128,11 +131,13 @@ function Setting:render()
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 					TextWrapped = true,
+					RichText = true,
 
 					Size = self.containerSize:map(function(value)
+						local desc = (if self.props.experimental then "[Experimental] " else "") .. self.props.description
 						local offset = (self.props.onReset and 34 or 0) + (self.props.options ~= nil and 120 or 40)
 						local textBounds = getTextBounds(
-							self.props.description, 14, Enum.Font.Gotham, 1.2,
+							desc, 14, Enum.Font.Gotham, 1.2,
 							Vector2.new(value.X - offset, math.huge)
 						)
 						return UDim2.new(1, -offset, 0, textBounds.Y)

plugin/src/App/StatusPages/Settings/init.lua

@@ -115,7 +115,9 @@ function SettingsPage:render()
 			OpenScriptsExternally = e(Setting, {
 				id = "openScriptsExternally",
 				name = "Open Scripts Externally",
-				description = "EXPERIMENTAL! Attempt to open scripts in an external editor",
+				description = "Attempt to open scripts in an external editor",
+				locked = self.props.syncActive,
+				experimental = true,
 				transparency = self.props.transparency,
 				layoutOrder = 4,
 			}),
@@ -123,7 +125,9 @@ function SettingsPage:render()
 			TwoWaySync = e(Setting, {
 				id = "twoWaySync",
 				name = "Two-Way Sync",
-				description = "EXPERIMENTAL! Editing files in Studio will sync them into the filesystem",
+				description = "Editing files in Studio will sync them into the filesystem",
+				locked = self.props.syncActive,
+				experimental = true,
 				transparency = self.props.transparency,
 				layoutOrder = 5,
 			}),

plugin/src/App/init.lua

@@ -606,6 +606,8 @@ function App:render()
 					}),
 
 					Settings = createPageElement(AppStatus.Settings, {
+						syncActive = self.serveSession ~= nil and self.serveSession:getStatus() == ServeSession.Status.Connected,
+
 						onBack = function()
 							self:setState({
 								appStatus = self.backPage or AppStatus.NotConnected,

plugin/src/Assets.lua

@@ -33,9 +33,11 @@ local Assets = {
 		Checkbox = {
 			Active = "rbxassetid://6016251644",
 			Inactive = "rbxassetid://6016251963",
+			Locked = "rbxassetid://14011257320",
 		},
 		Dropdown = {
 			Arrow = "rbxassetid://10131770538",
+			Locked = "rbxassetid://14011257320",
 		},
 		Spinner = {
 			Foreground = "rbxassetid://3222731032",