Skip to content

Commit 1ed5844

Browse files
boatbomberboatbomber
authored
Confirmation behaviors (rojo-rbx#774)
1 parent d30f855 commit 1ed5844

File tree

8 files changed

+281
-40
lines changed

8 files changed

+281
-40
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
* Don't override the initial enabled state for source diffing ([#760])
2828
* Added support for `Terrain.MaterialColors` ([#770])
2929
* Allow `Terrain` to be specified without a classname ([#771])
30+
* Add Confirmation Behavior setting ([#774])
3031

3132
[#761]: https://github.com/rojo-rbx/rojo/pull/761
3233
[#745]: https://github.com/rojo-rbx/rojo/pull/745
@@ -54,6 +55,7 @@
5455
[#760]: https://github.com/rojo-rbx/rojo/pull/760
5556
[#770]: https://github.com/rojo-rbx/rojo/pull/770
5657
[#771]: https://github.com/rojo-rbx/rojo/pull/771
58+
[#774]: https://github.com/rojo-rbx/rojo/pull/774
5759

5860
## [7.3.0] - April 22, 2023
5961
* Added `$attributes` to project format. ([#574])

‎plugin/src/App/Components/TextInput.lua

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
local Rojo = script:FindFirstAncestor("Rojo")
2+
local Plugin = Rojo.Plugin
3+
local Packages = Rojo.Packages
4+
5+
local Roact = require(Packages.Roact)
6+
local Flipper = require(Packages.Flipper)
7+
8+
local Theme = require(Plugin.App.Theme)
9+
local Assets = require(Plugin.Assets)
10+
local bindingUtil = require(Plugin.App.bindingUtil)
11+
12+
local SlicedImage = require(script.Parent.SlicedImage)
13+
14+
local SPRING_PROPS = {
15+
frequency = 5,
16+
dampingRatio = 1,
17+
}
18+
19+
local e = Roact.createElement
20+
21+
local TextInput = Roact.Component:extend("TextInput")
22+
23+
function TextInput:init()
24+
self.motor = Flipper.GroupMotor.new({
25+
hover = 0,
26+
enabled = self.props.enabled and 1 or 0,
27+
})
28+
self.binding = bindingUtil.fromMotor(self.motor)
29+
end
30+
31+
function TextInput:didUpdate(lastProps)
32+
if lastProps.enabled ~= self.props.enabled then
33+
self.motor:setGoal({
34+
enabled = Flipper.Spring.new(self.props.enabled and 1 or 0),
35+
})
36+
end
37+
end
38+
39+
function TextInput:render()
40+
return Theme.with(function(theme)
41+
theme = theme.TextInput
42+
43+
local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
44+
local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")
45+
46+
return e(SlicedImage, {
47+
slice = Assets.Slices.RoundedBorder,
48+
color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
49+
transparency = self.props.transparency,
50+
51+
size = self.props.size or UDim2.new(1, 0, 1, 0),
52+
position = self.props.position,
53+
layoutOrder = self.props.layoutOrder,
54+
anchorPoint = self.props.anchorPoint,
55+
}, {
56+
HoverOverlay = e(SlicedImage, {
57+
slice = Assets.Slices.RoundedBackground,
58+
color = theme.ActionFillColor,
59+
transparency = Roact.joinBindings({
60+
hover = bindingHover:map(function(value)
61+
return 1 - value
62+
end),
63+
transparency = self.props.transparency,
64+
}):map(function(values)
65+
return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
66+
end),
67+
size = UDim2.new(1, 0, 1, 0),
68+
zIndex = -1,
69+
}),
70+
Input = e("TextBox", {
71+
BackgroundTransparency = 1,
72+
Size = UDim2.fromScale(1, 1),
73+
Text = self.props.text,
74+
PlaceholderText = self.props.placeholder,
75+
Font = Enum.Font.GothamMedium,
76+
TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
77+
PlaceholderColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.PlaceholderColor, theme.Enabled.PlaceholderColor),
78+
TextSize = 18,
79+
TextEditable = self.props.enabled,
80+
ClearTextOnFocus = self.props.clearTextOnFocus,
81+
82+
[Roact.Event.MouseEnter] = function()
83+
self.motor:setGoal({
84+
hover = Flipper.Spring.new(1, SPRING_PROPS),
85+
})
86+
end,
87+
88+
[Roact.Event.MouseLeave] = function()
89+
self.motor:setGoal({
90+
hover = Flipper.Spring.new(0, SPRING_PROPS),
91+
})
92+
end,
93+
94+
[Roact.Event.FocusLost] = function(rbx)
95+
self.props.onEntered(rbx.Text)
96+
end,
97+
}),
98+
Children = Roact.createFragment(self.props[Roact.Children]),
99+
})
100+
end)
101+
end
102+
103+
return TextInput

‎plugin/src/App/StatusPages/Settings/Setting.lua

+53-36
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ local Setting = Roact.Component:extend("Setting")
3232
function Setting:init()
3333
self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
3434
self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
35+
self.inputSize, self.setInputSize = Roact.createBinding(Vector2.new(0, 0))
3536

3637
self:setState({
3738
setting = Settings:get(self.props.id),
@@ -65,43 +66,56 @@ function Setting:render()
6566
self.setContainerSize(object.AbsoluteSize)
6667
end,
6768
}, {
68-
Input = if self.props.options ~= nil then
69-
e(Dropdown, {
70-
locked = self.props.locked,
71-
options = self.props.options,
72-
active = self.state.setting,
73-
transparency = self.props.transparency,
74-
position = UDim2.new(1, 0, 0.5, 0),
75-
anchorPoint = Vector2.new(1, 0.5),
76-
onClick = function(option)
77-
Settings:set(self.props.id, option)
78-
end,
79-
})
80-
else
81-
e(Checkbox, {
82-
locked = self.props.locked,
83-
active = self.state.setting,
84-
transparency = self.props.transparency,
85-
position = UDim2.new(1, 0, 0.5, 0),
86-
anchorPoint = Vector2.new(1, 0.5),
87-
onClick = function()
88-
local currentValue = Settings:get(self.props.id)
89-
Settings:set(self.props.id, not currentValue)
69+
RightAligned = Roact.createElement("Frame", {
70+
BackgroundTransparency = 1,
71+
Size = UDim2.new(1, 0, 1, 0),
72+
}, {
73+
Layout = e("UIListLayout", {
74+
VerticalAlignment = Enum.VerticalAlignment.Center,
75+
HorizontalAlignment = Enum.HorizontalAlignment.Right,
76+
FillDirection = Enum.FillDirection.Horizontal,
77+
SortOrder = Enum.SortOrder.LayoutOrder,
78+
Padding = UDim.new(0, 2),
79+
[Roact.Change.AbsoluteContentSize] = function(rbx)
80+
self.setInputSize(rbx.AbsoluteContentSize)
9081
end,
9182
}),
9283

93-
Reset = if self.props.onReset then e(IconButton, {
94-
icon = Assets.Images.Icons.Reset,
95-
iconSize = 24,
96-
color = theme.BackButtonColor,
97-
transparency = self.props.transparency,
98-
visible = self.props.showReset,
99-
100-
position = UDim2.new(1, -32 - (self.props.options ~= nil and 120 or 40), 0.5, 0),
101-
anchorPoint = Vector2.new(0, 0.5),
84+
Input =
85+
if self.props.input ~= nil then
86+
self.props.input
87+
elseif self.props.options ~= nil then
88+
e(Dropdown, {
89+
locked = self.props.locked,
90+
options = self.props.options,
91+
active = self.state.setting,
92+
transparency = self.props.transparency,
93+
onClick = function(option)
94+
Settings:set(self.props.id, option)
95+
end,
96+
})
97+
else
98+
e(Checkbox, {
99+
locked = self.props.locked,
100+
active = self.state.setting,
101+
transparency = self.props.transparency,
102+
onClick = function()
103+
local currentValue = Settings:get(self.props.id)
104+
Settings:set(self.props.id, not currentValue)
105+
end,
106+
}),
107+
108+
Reset = if self.props.onReset then e(IconButton, {
109+
icon = Assets.Images.Icons.Reset,
110+
iconSize = 24,
111+
color = theme.BackButtonColor,
112+
transparency = self.props.transparency,
113+
visible = self.props.showReset,
114+
layoutOrder = -1,
102115

103-
onClick = self.props.onReset,
104-
}) else nil,
116+
onClick = self.props.onReset,
117+
}) else nil,
118+
}),
105119

106120
Text = e("Frame", {
107121
Size = UDim2.new(1, 0, 1, 0),
@@ -133,12 +147,15 @@ function Setting:render()
133147
TextWrapped = true,
134148
RichText = true,
135149

136-
Size = self.containerSize:map(function(value)
150+
Size = Roact.joinBindings({
151+
containerSize = self.containerSize,
152+
inputSize = self.inputSize,
153+
}):map(function(values)
137154
local desc = (if self.props.experimental then "[Experimental] " else "") .. self.props.description
138-
local offset = (self.props.onReset and 34 or 0) + (self.props.options ~= nil and 120 or 40)
155+
local offset = values.inputSize.X + 5
139156
local textBounds = getTextBounds(
140157
desc, 14, Enum.Font.Gotham, 1.2,
141-
Vector2.new(value.X - offset, math.huge)
158+
Vector2.new(values.containerSize.X - offset, math.huge)
142159
)
143160
return UDim2.new(1, -offset, 0, textBounds.Y)
144161
end),

‎plugin/src/App/StatusPages/Settings/init.lua

+43-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ local Theme = require(Plugin.App.Theme)
1212
local IconButton = require(Plugin.App.Components.IconButton)
1313
local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
1414
local Tooltip = require(Plugin.App.Components.Tooltip)
15+
local TextInput = require(Plugin.App.Components.TextInput)
1516
local Setting = require(script.Setting)
1617

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

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

2931
local function Navbar(props)
3032
return Theme.with(function(theme)
@@ -104,12 +106,50 @@ function SettingsPage:render()
104106
layoutOrder = 2,
105107
}),
106108

109+
ConfirmationBehavior = e(Setting, {
110+
id = "confirmationBehavior",
111+
name = "Confirmation Behavior",
112+
description = "When to prompt for confirmation before syncing",
113+
transparency = self.props.transparency,
114+
layoutOrder = 3,
115+
116+
options = confirmationBehaviors,
117+
}),
118+
119+
LargeChangesConfirmationThreshold = e(Setting, {
120+
id = "largeChangesConfirmationThreshold",
121+
name = "Confirmation Threshold",
122+
description = "How many modified instances to be considered a large change",
123+
transparency = self.props.transparency,
124+
layoutOrder = 4,
125+
visible = Settings:getBinding("confirmationBehavior"):map(function(value)
126+
return value == "Large Changes"
127+
end),
128+
input = e(TextInput, {
129+
size = UDim2.new(0, 40, 0, 28),
130+
text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
131+
return tostring(value)
132+
end),
133+
transparency = self.props.transparency,
134+
enabled = true,
135+
onEntered = function(text)
136+
local number = tonumber(string.match(text, "%d+"))
137+
if number then
138+
Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
139+
else
140+
-- Force text back to last valid value
141+
Settings:set("largeChangesConfirmationThreshold", Settings:get("largeChangesConfirmationThreshold"))
142+
end
143+
end,
144+
}),
145+
}),
146+
107147
PlaySounds = e(Setting, {
108148
id = "playSounds",
109149
name = "Play Sounds",
110150
description = "Toggle sound effects",
111151
transparency = self.props.transparency,
112-
layoutOrder = 3,
152+
layoutOrder = 5,
113153
}),
114154

115155
OpenScriptsExternally = e(Setting, {
@@ -119,7 +159,7 @@ function SettingsPage:render()
119159
locked = self.props.syncActive,
120160
experimental = true,
121161
transparency = self.props.transparency,
122-
layoutOrder = 4,
162+
layoutOrder = 6,
123163
}),
124164

125165
TwoWaySync = e(Setting, {
@@ -129,7 +169,7 @@ function SettingsPage:render()
129169
locked = self.props.syncActive,
130170
experimental = true,
131171
transparency = self.props.transparency,
132-
layoutOrder = 5,
172+
layoutOrder = 7,
133173
}),
134174

135175
LogLevel = e(Setting, {

‎plugin/src/App/Theme.lua

+28
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,20 @@ local lightTheme = strict("LightTheme", {
7474
IconColor = Color3.fromHex("EEEEEE"),
7575
},
7676
},
77+
TextInput = {
78+
Enabled = {
79+
TextColor = Color3.fromHex("000000"),
80+
PlaceholderColor = Color3.fromHex("8C8C8C"),
81+
BorderColor = Color3.fromHex("ACACAC"),
82+
},
83+
Disabled = {
84+
TextColor = Color3.fromHex("393939"),
85+
PlaceholderColor = Color3.fromHex("8C8C8C"),
86+
BorderColor = Color3.fromHex("AFAFAF"),
87+
},
88+
ActionFillColor = Color3.fromHex("000000"),
89+
ActionFillTransparency = 0.9,
90+
},
7791
AddressEntry = {
7892
TextColor = Color3.fromHex("000000"),
7993
PlaceholderColor = Color3.fromHex("8C8C8C")
@@ -170,6 +184,20 @@ local darkTheme = strict("DarkTheme", {
170184
IconColor = Color3.fromHex("484848"),
171185
},
172186
},
187+
TextInput = {
188+
Enabled = {
189+
TextColor = Color3.fromHex("FFFFFF"),
190+
PlaceholderColor = Color3.fromHex("8B8B8B"),
191+
BorderColor = Color3.fromHex("535353"),
192+
},
193+
Disabled = {
194+
TextColor = Color3.fromHex("484848"),
195+
PlaceholderColor = Color3.fromHex("8B8B8B"),
196+
BorderColor = Color3.fromHex("5A5A5A"),
197+
},
198+
ActionFillColor = Color3.fromHex("FFFFFF"),
199+
ActionFillTransparency = 0.9,
200+
},
173201
AddressEntry = {
174202
TextColor = Color3.fromHex("FFFFFF"),
175203
PlaceholderColor = Color3.fromHex("8B8B8B")

0 commit comments

Comments
 (0)