Add locked tooltip (#998)

Adds the ability to define descriptive tooltips for settings when they
are locked.


![image](https://github.com/user-attachments/assets/5d5778c8-911b-4358-b4e6-f0389270ad76)


Makes some minor improvements to tooltip layout logic as well.
This commit is contained in:
boatbomber
2024-12-28 15:03:11 -08:00
committed by GitHub
parent b7d3394464
commit 19ca2b12fc
5 changed files with 16 additions and 8 deletions

View File

@@ -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, {

View File

@@ -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),

View File

@@ -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