forked from rojo-rbx/rojo
Visualize table changes (#834)
Implements a pop out diff view for table properties like Attributes and Tags
This commit is contained in:
boatbomber
GitHub
@@ -14,6 +14,123 @@ local EMPTY_TABLE = {}
|
||||
|
||||
local e = Roact.createElement
|
||||
|
||||
local function ViewDiffButton(props)
|
||||
return Theme.with(function(theme)
|
||||
return e("TextButton", {
|
||||
Text = "",
|
||||
Size = UDim2.new(0.7, 0, 1, -4),
|
||||
LayoutOrder = 2,
|
||||
BackgroundTransparency = 1,
|
||||
[Roact.Event.Activated] = props.onClick,
|
||||
}, {
|
||||
e(BorderedContainer, {
|
||||
size = UDim2.new(1, 0, 1, 0),
|
||||
transparency = props.transparency:map(function(t)
|
||||
return 0.5 + (0.5 * t)
|
||||
end),
|
||||
}, {
|
||||
Layout = e("UIListLayout", {
|
||||
FillDirection = Enum.FillDirection.Horizontal,
|
||||
SortOrder = Enum.SortOrder.LayoutOrder,
|
||||
HorizontalAlignment = Enum.HorizontalAlignment.Center,
|
||||
VerticalAlignment = Enum.VerticalAlignment.Center,
|
||||
Padding = UDim.new(0, 5),
|
||||
}),
|
||||
Label = e("TextLabel", {
|
||||
Text = "View Diff",
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamMedium,
|
||||
TextSize = 14,
|
||||
TextColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
TextTransparency = props.transparency,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
Size = UDim2.new(0, 65, 1, 0),
|
||||
LayoutOrder = 1,
|
||||
}),
|
||||
Icon = e("ImageLabel", {
|
||||
Image = Assets.Images.Icons.Expand,
|
||||
ImageColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
ImageTransparency = props.transparency,
|
||||
|
||||
Size = UDim2.new(0, 16, 0, 16),
|
||||
Position = UDim2.new(0.5, 0, 0.5, 0),
|
||||
AnchorPoint = Vector2.new(0.5, 0.5),
|
||||
|
||||
BackgroundTransparency = 1,
|
||||
LayoutOrder = 2,
|
||||
}),
|
||||
}),
|
||||
})
|
||||
end)
|
||||
end
|
||||
|
||||
local function RowContent(props)
|
||||
local values = props.values
|
||||
local metadata = props.metadata
|
||||
|
||||
if props.showStringDiff and values[1] == "Source" then
|
||||
-- Special case for .Source updates
|
||||
return e(ViewDiffButton, {
|
||||
transparency = props.transparency,
|
||||
onClick = function()
|
||||
if not props.showStringDiff then
|
||||
return
|
||||
end
|
||||
props.showStringDiff(tostring(values[2]), tostring(values[3]))
|
||||
end,
|
||||
})
|
||||
end
|
||||
|
||||
if props.showTableDiff and (type(values[2]) == "table" or type(values[3]) == "table") then
|
||||
-- Special case for table properties (like Attributes/Tags)
|
||||
return e(ViewDiffButton, {
|
||||
transparency = props.transparency,
|
||||
onClick = function()
|
||||
if not props.showTableDiff then
|
||||
return
|
||||
end
|
||||
props.showTableDiff(values[2], values[3])
|
||||
end,
|
||||
})
|
||||
end
|
||||
|
||||
return Theme.with(function(theme)
|
||||
return Roact.createFragment({
|
||||
ColumnB = e(
|
||||
"Frame",
|
||||
{
|
||||
BackgroundTransparency = 1,
|
||||
Size = UDim2.new(0.35, 0, 1, 0),
|
||||
LayoutOrder = 2,
|
||||
},
|
||||
e(DisplayValue, {
|
||||
value = values[2],
|
||||
transparency = props.transparency,
|
||||
textColor = if metadata.isWarning
|
||||
then theme.Diff.Warning
|
||||
else theme.Settings.Setting.DescriptionColor,
|
||||
})
|
||||
),
|
||||
ColumnC = e(
|
||||
"Frame",
|
||||
{
|
||||
BackgroundTransparency = 1,
|
||||
Size = UDim2.new(0.35, 0, 1, 0),
|
||||
LayoutOrder = 3,
|
||||
},
|
||||
e(DisplayValue, {
|
||||
value = values[3],
|
||||
transparency = props.transparency,
|
||||
textColor = if metadata.isWarning
|
||||
then theme.Diff.Warning
|
||||
else theme.Settings.Setting.DescriptionColor,
|
||||
})
|
||||
),
|
||||
})
|
||||
end)
|
||||
end
|
||||
|
||||
local ChangeList = Roact.Component:extend("ChangeList")
|
||||
|
||||
function ChangeList:init()
|
||||
@@ -36,6 +153,7 @@ function ChangeList:render()
|
||||
PaddingRight = UDim.new(0, 5),
|
||||
}
|
||||
|
||||
local headerRow = changes[1]
|
||||
local headers = e("Frame", {
|
||||
Size = UDim2.new(1, 0, 0, 30),
|
||||
BackgroundTransparency = rowTransparency,
|
||||
@@ -49,8 +167,8 @@ function ChangeList:render()
|
||||
HorizontalAlignment = Enum.HorizontalAlignment.Left,
|
||||
VerticalAlignment = Enum.VerticalAlignment.Center,
|
||||
}),
|
||||
A = e("TextLabel", {
|
||||
Text = tostring(changes[1][1]),
|
||||
ColumnA = e("TextLabel", {
|
||||
Text = tostring(headerRow[1]),
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamBold,
|
||||
TextSize = 14,
|
||||
@@ -61,8 +179,8 @@ function ChangeList:render()
|
||||
Size = UDim2.new(0.3, 0, 1, 0),
|
||||
LayoutOrder = 1,
|
||||
}),
|
||||
B = e("TextLabel", {
|
||||
Text = tostring(changes[1][2]),
|
||||
ColumnB = e("TextLabel", {
|
||||
Text = tostring(headerRow[2]),
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamBold,
|
||||
TextSize = 14,
|
||||
@@ -73,8 +191,8 @@ function ChangeList:render()
|
||||
Size = UDim2.new(0.35, 0, 1, 0),
|
||||
LayoutOrder = 2,
|
||||
}),
|
||||
C = e("TextLabel", {
|
||||
Text = tostring(changes[1][3]),
|
||||
ColumnC = e("TextLabel", {
|
||||
Text = tostring(headerRow[3]),
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamBold,
|
||||
TextSize = 14,
|
||||
@@ -95,89 +213,6 @@ function ChangeList:render()
|
||||
local metadata = values[4] or EMPTY_TABLE
|
||||
local isWarning = metadata.isWarning
|
||||
|
||||
-- Special case for .Source updates
|
||||
-- because we want to display a syntax highlighted diff for better UX
|
||||
if self.props.showSourceDiff and tostring(values[1]) == "Source" then
|
||||
rows[row] = e("Frame", {
|
||||
Size = UDim2.new(1, 0, 0, 30),
|
||||
BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
|
||||
BackgroundColor3 = theme.Diff.Row,
|
||||
BorderSizePixel = 0,
|
||||
LayoutOrder = row,
|
||||
}, {
|
||||
Padding = e("UIPadding", pad),
|
||||
Layout = e("UIListLayout", {
|
||||
FillDirection = Enum.FillDirection.Horizontal,
|
||||
SortOrder = Enum.SortOrder.LayoutOrder,
|
||||
HorizontalAlignment = Enum.HorizontalAlignment.Left,
|
||||
VerticalAlignment = Enum.VerticalAlignment.Center,
|
||||
}),
|
||||
A = e("TextLabel", {
|
||||
Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamMedium,
|
||||
TextSize = 14,
|
||||
TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
TextTransparency = props.transparency,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
Size = UDim2.new(0.3, 0, 1, 0),
|
||||
LayoutOrder = 1,
|
||||
}),
|
||||
Button = e("TextButton", {
|
||||
Text = "",
|
||||
Size = UDim2.new(0.7, 0, 1, -4),
|
||||
LayoutOrder = 2,
|
||||
BackgroundTransparency = 1,
|
||||
[Roact.Event.Activated] = function()
|
||||
if props.showSourceDiff then
|
||||
props.showSourceDiff(tostring(values[2]), tostring(values[3]))
|
||||
end
|
||||
end,
|
||||
}, {
|
||||
e(BorderedContainer, {
|
||||
size = UDim2.new(1, 0, 1, 0),
|
||||
transparency = self.props.transparency:map(function(t)
|
||||
return 0.5 + (0.5 * t)
|
||||
end),
|
||||
}, {
|
||||
Layout = e("UIListLayout", {
|
||||
FillDirection = Enum.FillDirection.Horizontal,
|
||||
SortOrder = Enum.SortOrder.LayoutOrder,
|
||||
HorizontalAlignment = Enum.HorizontalAlignment.Center,
|
||||
VerticalAlignment = Enum.VerticalAlignment.Center,
|
||||
Padding = UDim.new(0, 5),
|
||||
}),
|
||||
Label = e("TextLabel", {
|
||||
Text = "View Diff",
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamMedium,
|
||||
TextSize = 14,
|
||||
TextColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
TextXAlignment = Enum.TextXAlignment.Left,
|
||||
TextTransparency = props.transparency,
|
||||
TextTruncate = Enum.TextTruncate.AtEnd,
|
||||
Size = UDim2.new(0, 65, 1, 0),
|
||||
LayoutOrder = 1,
|
||||
}),
|
||||
Icon = e("ImageLabel", {
|
||||
Image = Assets.Images.Icons.Expand,
|
||||
ImageColor3 = theme.Settings.Setting.DescriptionColor,
|
||||
ImageTransparency = self.props.transparency,
|
||||
|
||||
Size = UDim2.new(0, 16, 0, 16),
|
||||
Position = UDim2.new(0.5, 0, 0.5, 0),
|
||||
AnchorPoint = Vector2.new(0.5, 0.5),
|
||||
|
||||
BackgroundTransparency = 1,
|
||||
LayoutOrder = 2,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
})
|
||||
continue
|
||||
end
|
||||
|
||||
rows[row] = e("Frame", {
|
||||
Size = UDim2.new(1, 0, 0, 30),
|
||||
BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
|
||||
@@ -192,7 +227,7 @@ function ChangeList:render()
|
||||
HorizontalAlignment = Enum.HorizontalAlignment.Left,
|
||||
VerticalAlignment = Enum.VerticalAlignment.Center,
|
||||
}),
|
||||
A = e("TextLabel", {
|
||||
ColumnA = e("TextLabel", {
|
||||
Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
|
||||
BackgroundTransparency = 1,
|
||||
Font = Enum.Font.GothamMedium,
|
||||
@@ -204,32 +239,13 @@ function ChangeList:render()
|
||||
Size = UDim2.new(0.3, 0, 1, 0),
|
||||
LayoutOrder = 1,
|
||||
}),
|
||||
B = e(
|
||||
"Frame",
|
||||
{
|
||||
BackgroundTransparency = 1,
|
||||
Size = UDim2.new(0.35, 0, 1, 0),
|
||||
LayoutOrder = 2,
|
||||
},
|
||||
e(DisplayValue, {
|
||||
value = values[2],
|
||||
transparency = props.transparency,
|
||||
textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
|
||||
})
|
||||
),
|
||||
C = e(
|
||||
"Frame",
|
||||
{
|
||||
BackgroundTransparency = 1,
|
||||
Size = UDim2.new(0.35, 0, 1, 0),
|
||||
LayoutOrder = 3,
|
||||
},
|
||||
e(DisplayValue, {
|
||||
value = values[3],
|
||||
transparency = props.transparency,
|
||||
textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
|
||||
})
|
||||
),
|
||||
Content = e(RowContent, {
|
||||
values = values,
|
||||
metadata = metadata,
|
||||
transparency = props.transparency,
|
||||
showStringDiff = props.showStringDiff,
|
||||
showTableDiff = props.showTableDiff,
|
||||
}),
|
||||
})
|
||||
end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user