From 9d48af2b505d5043927ab2ad9c6ff09995ae47c7 Mon Sep 17 00:00:00 2001 From: boatbomber Date: Wed, 12 Jul 2023 13:00:07 -0700 Subject: [PATCH] Better settings control (#725) - Lock some settings during sync - Make experimental features more clearly labelled --- CHANGELOG.md | 2 ++ plugin/src/App/Components/Checkbox.lua | 13 +++++++++---- plugin/src/App/Components/Dropdown.lua | 12 ++++++++++-- plugin/src/App/StatusPages/Settings/Setting.lua | 11 ++++++++--- plugin/src/App/StatusPages/Settings/init.lua | 8 ++++++-- plugin/src/App/init.lua | 2 ++ plugin/src/Assets.lua | 2 ++ 7 files changed, 39 insertions(+), 11 deletions(-) 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",