diff --git a/plugin/src/App/Components/Checkbox.lua b/plugin/src/App/Components/Checkbox.lua index c4572e930..98cbf8c0c 100644 --- a/plugin/src/App/Components/Checkbox.lua +++ b/plugin/src/App/Components/Checkbox.lua @@ -57,8 +57,9 @@ function Checkbox:render() end, }, { StateTip = e(Tooltip.Trigger, { - text = (if self.props.locked then "[LOCKED] " else "") - .. (if self.props.active then "Enabled" else "Disabled"), + text = (if self.props.locked + then (self.props.lockedTooltip or "(Cannot be changed right now)") .. "\n" + else "") .. (if self.props.active then "Enabled" else "Disabled"), }), Active = e(SlicedImage, { diff --git a/plugin/src/App/Components/Dropdown.lua b/plugin/src/App/Components/Dropdown.lua index 72629c18f..486a614c7 100644 --- a/plugin/src/App/Components/Dropdown.lua +++ b/plugin/src/App/Components/Dropdown.lua @@ -12,6 +12,7 @@ local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync) local SlicedImage = require(script.Parent.SlicedImage) local ScrollingFrame = require(script.Parent.ScrollingFrame) +local Tooltip = require(script.Parent.Tooltip) local e = Roact.createElement @@ -119,6 +120,12 @@ function Dropdown:render() end), BackgroundTransparency = 1, + }, { + StateTip = if self.props.locked + then e(Tooltip.Trigger, { + text = self.props.lockedTooltip or "(Cannot be changed right now)", + }) + else nil, }), Active = e("TextLabel", { Size = UDim2.new(1, -30, 1, 0), diff --git a/plugin/src/App/Components/Tooltip.lua b/plugin/src/App/Components/Tooltip.lua index 55b056c23..25423e8ca 100644 --- a/plugin/src/App/Components/Tooltip.lua +++ b/plugin/src/App/Components/Tooltip.lua @@ -23,11 +23,8 @@ local TooltipContext = Roact.createContext({}) local function Popup(props) return Theme.with(function(theme) - local textXSpace = math.min(props.parentSize.X, 120) - local textBounds = Vector2.new( - textXSpace, - getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace).Y - ) + local textXSpace = math.min(props.parentSize.X, 250) - TEXT_PADDING.X + local textBounds = getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace) local contentSize = textBounds + TEXT_PADDING + (Vector2.one * 2) local trigger = props.Trigger:getValue() @@ -39,7 +36,7 @@ local function Popup(props) -- If there's not enough space below, and there's more space above, then show the tooltip above the trigger local displayAbove = spaceBelow < contentSize.Y and spaceAbove > spaceBelow - local X = math.clamp(props.Position.X - X_OFFSET, 0, props.parentSize.X - contentSize.X) + local X = math.clamp(props.Position.X - X_OFFSET, 0, math.max(props.parentSize.X - contentSize.X, 1)) local Y = 0 if displayAbove then diff --git a/plugin/src/App/StatusPages/Settings/Setting.lua b/plugin/src/App/StatusPages/Settings/Setting.lua index e9ea13c20..01608cf2a 100644 --- a/plugin/src/App/StatusPages/Settings/Setting.lua +++ b/plugin/src/App/StatusPages/Settings/Setting.lua @@ -114,6 +114,7 @@ function Setting:render() then self.props.input elseif self.props.options ~= nil then e(Dropdown, { locked = self.props.locked, + lockedTooltip = self.props.lockedTooltip, options = self.props.options, active = self.state.setting, transparency = self.props.transparency, @@ -123,6 +124,7 @@ function Setting:render() }) else e(Checkbox, { locked = self.props.locked, + lockedTooltip = self.props.lockedTooltip, active = self.state.setting, transparency = self.props.transparency, onClick = function() diff --git a/plugin/src/App/StatusPages/Settings/init.lua b/plugin/src/App/StatusPages/Settings/init.lua index e0f3413ce..1f9af0c0a 100644 --- a/plugin/src/App/StatusPages/Settings/init.lua +++ b/plugin/src/App/StatusPages/Settings/init.lua @@ -201,6 +201,7 @@ function SettingsPage:render() name = "Two-Way Sync", description = "Editing files in Studio will sync them into the filesystem", locked = self.props.syncActive, + lockedTooltip = "(Cannot change while currently syncing. Disconnect first.)", tag = "unstable", transparency = self.props.transparency, layoutOrder = layoutIncrement(),