Add warning theming and reject confirmation dialog to ConfirmingPage

- Introduced a new 'Warning' style in the theme for buttons, enhancing visual feedback for destructive actions.
- Updated the ConfirmingPage to include a reject confirmation dialog, allowing users to confirm their decision before rejecting changes.
- Adjusted button styles in the confirmation dialog to reflect the new warning theming, improving consistency and user experience.
This commit is contained in:
Joe 2026-01-24 04:52:59 -06:00
parent a1cba88b94
commit 06d5ff4d80
3 changed files with 99 additions and 15 deletions

View file

@ -95,7 +95,7 @@ function TextButton:render()
BackgroundTransparency = 1, BackgroundTransparency = 1,
}), }),
Border = style == "Bordered" and e(SlicedImage, { Border = (style == "Bordered") and e(SlicedImage, {
slice = Assets.Slices.RoundedBorder, slice = Assets.Slices.RoundedBorder,
color = bindingUtil.mapLerp( color = bindingUtil.mapLerp(
bindingEnabled, bindingEnabled,
@ -130,7 +130,7 @@ function TextButton:render()
zIndex = -1, zIndex = -1,
}), }),
Background = style == "Solid" and e(SlicedImage, { Background = (style == "Solid" or style == "Warning") and e(SlicedImage, {
slice = Assets.Slices.RoundedBackground, slice = Assets.Slices.RoundedBackground,
color = bindingUtil.mapLerp( color = bindingUtil.mapLerp(
bindingEnabled, bindingEnabled,

View file

@ -28,6 +28,7 @@ function ConfirmingPage:init()
showingTableDiff = false, showingTableDiff = false,
oldTable = {}, oldTable = {},
newTable = {}, newTable = {},
showingRejectConfirm = false,
}) })
end end
@ -89,19 +90,21 @@ function ConfirmingPage:render()
}), }),
}), }),
Reject = if Settings:get("twoWaySync") Reject = if Settings:get("twoWaySync")
then e(TextButton, { then e(TextButton, {
text = "Reject", text = "Reject",
style = "Bordered", style = "Warning",
transparency = self.props.transparency, transparency = self.props.transparency,
layoutOrder = 2, layoutOrder = 2,
onClick = self.props.onReject, onClick = function()
}, { self:setState({ showingRejectConfirm = true })
Tip = e(Tooltip.Trigger, { end,
text = "Push Studio changes to the Rojo server", }, {
}), Tip = e(Tooltip.Trigger, {
}) text = "Push Studio changes to the Rojo server",
else nil, }),
})
else nil,
Accept = e(TextButton, { Accept = e(TextButton, {
text = "Accept", text = "Accept",
@ -211,6 +214,74 @@ function ConfirmingPage:render()
}), }),
}), }),
}), }),
RejectConfirm = e(StudioPluginGui, {
id = "Rojo_RejectConfirm",
title = "Confirm Reject",
active = self.state.showingRejectConfirm,
isEphemeral = true,
initDockState = Enum.InitialDockState.Float,
overridePreviousState = true,
floatingSize = Vector2.new(340, 120),
minimumSize = Vector2.new(300, 100),
zIndexBehavior = Enum.ZIndexBehavior.Sibling,
onClose = function()
self:setState({ showingRejectConfirm = false })
end,
}, {
Content = e("Frame", {
Size = UDim2.fromScale(1, 1),
BackgroundColor3 = theme.BackgroundColor,
}, {
Message = e("TextLabel", {
Text = "Are you sure you want to reject incoming changes and push Studio changes to the server?",
FontFace = theme.Font.Main,
TextSize = theme.TextSize.Body,
TextColor3 = theme.TextColor,
TextWrapped = true,
Size = UDim2.new(1, -20, 0, 50),
Position = UDim2.new(0, 10, 0, 10),
BackgroundTransparency = 1,
}),
Buttons = e("Frame", {
Size = UDim2.new(1, -20, 0, 34),
Position = UDim2.new(0, 10, 1, -44),
BackgroundTransparency = 1,
}, {
Layout = e("UIListLayout", {
HorizontalAlignment = Enum.HorizontalAlignment.Right,
FillDirection = Enum.FillDirection.Horizontal,
SortOrder = Enum.SortOrder.LayoutOrder,
Padding = UDim.new(0, 10),
}),
Cancel = e(TextButton, {
text = "Cancel",
style = "Bordered",
transparency = self.props.transparency,
layoutOrder = 1,
onClick = function()
self:setState({ showingRejectConfirm = false })
end,
}),
Confirm = e(TextButton, {
text = "Reject",
style = "Warning",
transparency = self.props.transparency,
layoutOrder = 2,
onClick = function()
self:setState({ showingRejectConfirm = false })
self.props.onReject()
end,
}),
}),
}),
}),
}) })
if self.props.createPopup then if self.props.createPopup then

View file

@ -75,6 +75,19 @@ function StudioProvider:updateTheme()
BackgroundColor = BRAND_COLOR, BackgroundColor = BRAND_COLOR,
}, },
}, },
Warning = {
-- Warning uses orange theming for destructive actions.
ActionFillColor = Color3.fromHex("FFFFFF"),
ActionFillTransparency = 0.8,
Enabled = {
TextColor = Color3.fromHex("FFFFFF"),
BackgroundColor = Color3.fromHex("E67E22"),
},
Disabled = {
TextColor = Color3.fromHex("FFFFFF"),
BackgroundColor = Color3.fromHex("B5651D"),
},
},
Bordered = { Bordered = {
ActionFillColor = studioTheme:GetColor( ActionFillColor = studioTheme:GetColor(
Enum.StudioStyleGuideColor.ButtonText, Enum.StudioStyleGuideColor.ButtonText,