diff --git a/CHANGELOG.md b/CHANGELOG.md
index 856ed175..e36fb581 100644
--- a/CHANGELOG.md
+++ b/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])
diff --git a/plugin/src/App/Components/Checkbox.lua b/plugin/src/App/Components/Checkbox.lua
index 21ec56b3..aa351b1f 100644
--- a/plugin/src/App/Components/Checkbox.lua
+++ b/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,
diff --git a/plugin/src/App/Components/Dropdown.lua b/plugin/src/App/Components/Dropdown.lua
index ef9a4211..21a60908 100644
--- a/plugin/src/App/Components/Dropdown.lua
+++ b/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),
diff --git a/plugin/src/App/StatusPages/Settings/Setting.lua b/plugin/src/App/StatusPages/Settings/Setting.lua
index 0c0de9f4..79e83e23 100644
--- a/plugin/src/App/StatusPages/Settings/Setting.lua
+++ b/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 "⚠ " 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 "[Experimental] " 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)
diff --git a/plugin/src/App/StatusPages/Settings/init.lua b/plugin/src/App/StatusPages/Settings/init.lua
index f83e145c..298e39a4 100644
--- a/plugin/src/App/StatusPages/Settings/init.lua
+++ b/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,
}),
diff --git a/plugin/src/App/init.lua b/plugin/src/App/init.lua
index e569003a..fd534d0c 100644
--- a/plugin/src/App/init.lua
+++ b/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,
diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua
index 3c919b54..020ec3eb 100644
--- a/plugin/src/Assets.lua
+++ b/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",