Skip to content

Commit

Permalink
Confirmation behaviors (rojo-rbx#774)
Browse files Browse the repository at this point in the history
  • Loading branch information
@boatbomber
boatbomber authored Aug 20, 2023
1 parent c9ab933 commit c43726b
Show file tree
Hide file tree
Showing 8 changed files with 281 additions and 40 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
* Don't override the initial enabled state for source diffing ([#760])
* Added support for `Terrain.MaterialColors` ([#770])
* Allow `Terrain` to be specified without a classname ([#771])
* Add Confirmation Behavior setting ([#774])

[#761]: https://github.com/rojo-rbx/rojo/pull/761
[#745]: https://github.com/rojo-rbx/rojo/pull/745
Expand Down Expand Up @@ -54,6 +55,7 @@
[#760]: https://github.com/rojo-rbx/rojo/pull/760
[#770]: https://github.com/rojo-rbx/rojo/pull/770
[#771]: https://github.com/rojo-rbx/rojo/pull/771
[#774]: https://github.com/rojo-rbx/rojo/pull/774

## [7.3.0] - April 22, 2023
* Added `$attributes` to project format. ([#574])
Expand Down
103 changes: 103 additions & 0 deletions plugin/src/App/Components/TextInput.lua
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
local Rojo = script:FindFirstAncestor("Rojo")
local Plugin = Rojo.Plugin
local Packages = Rojo.Packages

local Roact = require(Packages.Roact)
local Flipper = require(Packages.Flipper)

local Theme = require(Plugin.App.Theme)
local Assets = require(Plugin.Assets)
local bindingUtil = require(Plugin.App.bindingUtil)

local SlicedImage = require(script.Parent.SlicedImage)

local SPRING_PROPS = {
frequency = 5,
dampingRatio = 1,
}

local e = Roact.createElement

local TextInput = Roact.Component:extend("TextInput")

function TextInput:init()
self.motor = Flipper.GroupMotor.new({
hover = 0,
enabled = self.props.enabled and 1 or 0,
})
self.binding = bindingUtil.fromMotor(self.motor)
end

function TextInput:didUpdate(lastProps)
if lastProps.enabled ~= self.props.enabled then
self.motor:setGoal({
enabled = Flipper.Spring.new(self.props.enabled and 1 or 0),
})
end
end

function TextInput:render()
return Theme.with(function(theme)
theme = theme.TextInput

local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")

return e(SlicedImage, {
slice = Assets.Slices.RoundedBorder,
color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
transparency = self.props.transparency,

size = self.props.size or UDim2.new(1, 0, 1, 0),
position = self.props.position,
layoutOrder = self.props.layoutOrder,
anchorPoint = self.props.anchorPoint,
}, {
HoverOverlay = e(SlicedImage, {
slice = Assets.Slices.RoundedBackground,
color = theme.ActionFillColor,
transparency = Roact.joinBindings({
hover = bindingHover:map(function(value)
return 1 - value
end),
transparency = self.props.transparency,
}):map(function(values)
return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
end),
size = UDim2.new(1, 0, 1, 0),
zIndex = -1,
}),
Input = e("TextBox", {
BackgroundTransparency = 1,
Size = UDim2.fromScale(1, 1),
Text = self.props.text,
PlaceholderText = self.props.placeholder,
Font = Enum.Font.GothamMedium,
TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
PlaceholderColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.PlaceholderColor, theme.Enabled.PlaceholderColor),
TextSize = 18,
TextEditable = self.props.enabled,
ClearTextOnFocus = self.props.clearTextOnFocus,

[Roact.Event.MouseEnter] = function()
self.motor:setGoal({
hover = Flipper.Spring.new(1, SPRING_PROPS),
})
end,

[Roact.Event.MouseLeave] = function()
self.motor:setGoal({
hover = Flipper.Spring.new(0, SPRING_PROPS),
})
end,

[Roact.Event.FocusLost] = function(rbx)
self.props.onEntered(rbx.Text)
end,
}),
Children = Roact.createFragment(self.props[Roact.Children]),
})
end)
end

return TextInput
89 changes: 53 additions & 36 deletions plugin/src/App/StatusPages/Settings/Setting.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ local Setting = Roact.Component:extend("Setting")
function Setting:init()
self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
self.inputSize, self.setInputSize = Roact.createBinding(Vector2.new(0, 0))

self:setState({
setting = Settings:get(self.props.id),
Expand Down Expand Up @@ -65,43 +66,56 @@ function Setting:render()
self.setContainerSize(object.AbsoluteSize)
end,
}, {
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,
position = UDim2.new(1, 0, 0.5, 0),
anchorPoint = Vector2.new(1, 0.5),
onClick = function(option)
Settings:set(self.props.id, option)
end,
})
else
e(Checkbox, {
locked = self.props.locked,
active = self.state.setting,
transparency = self.props.transparency,
position = UDim2.new(1, 0, 0.5, 0),
anchorPoint = Vector2.new(1, 0.5),
onClick = function()
local currentValue = Settings:get(self.props.id)
Settings:set(self.props.id, not currentValue)
RightAligned = Roact.createElement("Frame", {
BackgroundTransparency = 1,
Size = UDim2.new(1, 0, 1, 0),
}, {
Layout = e("UIListLayout", {
VerticalAlignment = Enum.VerticalAlignment.Center,
HorizontalAlignment = Enum.HorizontalAlignment.Right,
FillDirection = Enum.FillDirection.Horizontal,
SortOrder = Enum.SortOrder.LayoutOrder,
Padding = UDim.new(0, 2),
[Roact.Change.AbsoluteContentSize] = function(rbx)
self.setInputSize(rbx.AbsoluteContentSize)
end,
}),

Reset = if self.props.onReset then e(IconButton, {
icon = Assets.Images.Icons.Reset,
iconSize = 24,
color = theme.BackButtonColor,
transparency = self.props.transparency,
visible = self.props.showReset,

position = UDim2.new(1, -32 - (self.props.options ~= nil and 120 or 40), 0.5, 0),
anchorPoint = Vector2.new(0, 0.5),
Input =
if self.props.input ~= nil then
self.props.input
elseif self.props.options ~= nil then
e(Dropdown, {
locked = self.props.locked,
options = self.props.options,
active = self.state.setting,
transparency = self.props.transparency,
onClick = function(option)
Settings:set(self.props.id, option)
end,
})
else
e(Checkbox, {
locked = self.props.locked,
active = self.state.setting,
transparency = self.props.transparency,
onClick = function()
local currentValue = Settings:get(self.props.id)
Settings:set(self.props.id, not currentValue)
end,
}),

Reset = if self.props.onReset then e(IconButton, {
icon = Assets.Images.Icons.Reset,
iconSize = 24,
color = theme.BackButtonColor,
transparency = self.props.transparency,
visible = self.props.showReset,
layoutOrder = -1,

onClick = self.props.onReset,
}) else nil,
onClick = self.props.onReset,
}) else nil,
}),

Text = e("Frame", {
Size = UDim2.new(1, 0, 1, 0),
Expand Down Expand Up @@ -133,12 +147,15 @@ function Setting:render()
TextWrapped = true,
RichText = true,

Size = self.containerSize:map(function(value)
Size = Roact.joinBindings({
containerSize = self.containerSize,
inputSize = self.inputSize,
}):map(function(values)
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 offset = values.inputSize.X + 5
local textBounds = getTextBounds(
desc, 14, Enum.Font.Gotham, 1.2,
Vector2.new(value.X - offset, math.huge)
Vector2.new(values.containerSize.X - offset, math.huge)
)
return UDim2.new(1, -offset, 0, textBounds.Y)
end),
Expand Down
46 changes: 43 additions & 3 deletions plugin/src/App/StatusPages/Settings/init.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ local Theme = require(Plugin.App.Theme)
local IconButton = require(Plugin.App.Components.IconButton)
local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
local Tooltip = require(Plugin.App.Components.Tooltip)
local TextInput = require(Plugin.App.Components.TextInput)
local Setting = require(script.Setting)

local e = Roact.createElement
Expand All @@ -25,6 +26,7 @@ local function invertTbl(tbl)
end

local invertedLevels = invertTbl(Log.Level)
local confirmationBehaviors = { "Initial", "Always", "Large Changes", "Unlisted PlaceId" }

local function Navbar(props)
return Theme.with(function(theme)
Expand Down Expand Up @@ -104,12 +106,50 @@ function SettingsPage:render()
layoutOrder = 2,
}),

ConfirmationBehavior = e(Setting, {
id = "confirmationBehavior",
name = "Confirmation Behavior",
description = "When to prompt for confirmation before syncing",
transparency = self.props.transparency,
layoutOrder = 3,

options = confirmationBehaviors,
}),

LargeChangesConfirmationThreshold = e(Setting, {
id = "largeChangesConfirmationThreshold",
name = "Confirmation Threshold",
description = "How many modified instances to be considered a large change",
transparency = self.props.transparency,
layoutOrder = 4,
visible = Settings:getBinding("confirmationBehavior"):map(function(value)
return value == "Large Changes"
end),
input = e(TextInput, {
size = UDim2.new(0, 40, 0, 28),
text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
return tostring(value)
end),
transparency = self.props.transparency,
enabled = true,
onEntered = function(text)
local number = tonumber(string.match(text, "%d+"))
if number then
Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
else
-- Force text back to last valid value
Settings:set("largeChangesConfirmationThreshold", Settings:get("largeChangesConfirmationThreshold"))
end
end,
}),
}),

PlaySounds = e(Setting, {
id = "playSounds",
name = "Play Sounds",
description = "Toggle sound effects",
transparency = self.props.transparency,
layoutOrder = 3,
layoutOrder = 5,
}),

OpenScriptsExternally = e(Setting, {
Expand All @@ -119,7 +159,7 @@ function SettingsPage:render()
locked = self.props.syncActive,
experimental = true,
transparency = self.props.transparency,
layoutOrder = 4,
layoutOrder = 6,
}),

TwoWaySync = e(Setting, {
Expand All @@ -129,7 +169,7 @@ function SettingsPage:render()
locked = self.props.syncActive,
experimental = true,
transparency = self.props.transparency,
layoutOrder = 5,
layoutOrder = 7,
}),

LogLevel = e(Setting, {
Expand Down
28 changes: 28 additions & 0 deletions plugin/src/App/Theme.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,20 @@ local lightTheme = strict("LightTheme", {
IconColor = Color3.fromHex("EEEEEE"),
},
},
TextInput = {
Enabled = {
TextColor = Color3.fromHex("000000"),
PlaceholderColor = Color3.fromHex("8C8C8C"),
BorderColor = Color3.fromHex("ACACAC"),
},
Disabled = {
TextColor = Color3.fromHex("393939"),
PlaceholderColor = Color3.fromHex("8C8C8C"),
BorderColor = Color3.fromHex("AFAFAF"),
},
ActionFillColor = Color3.fromHex("000000"),
ActionFillTransparency = 0.9,
},
AddressEntry = {
TextColor = Color3.fromHex("000000"),
PlaceholderColor = Color3.fromHex("8C8C8C")
Expand Down Expand Up @@ -170,6 +184,20 @@ local darkTheme = strict("DarkTheme", {
IconColor = Color3.fromHex("484848"),
},
},
TextInput = {
Enabled = {
TextColor = Color3.fromHex("FFFFFF"),
PlaceholderColor = Color3.fromHex("8B8B8B"),
BorderColor = Color3.fromHex("535353"),
},
Disabled = {
TextColor = Color3.fromHex("484848"),
PlaceholderColor = Color3.fromHex("8B8B8B"),
BorderColor = Color3.fromHex("5A5A5A"),
},
ActionFillColor = Color3.fromHex("FFFFFF"),
ActionFillTransparency = 0.9,
},
AddressEntry = {
TextColor = Color3.fromHex("FFFFFF"),
PlaceholderColor = Color3.fromHex("8B8B8B")
Expand Down
Loading

0 comments on commit c43726b

Please sign in to comment.