Real-time status about sync details (#569)

* Rough prototype of patch info display

* Remove extra newline

* Switch to binding

* Update slower for older timestamps

* Batch patches within a second of each other

* Fix indentation

* Less wasteful refresh hz

* More apt variable name

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>
This commit is contained in:
boatbomber
2022-08-03 15:58:28 -07:00
committed by GitHub
parent eb5c897ac0
commit e110f3726a
3 changed files with 125 additions and 23 deletions

View File

@@ -13,6 +13,26 @@ local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
local e = Roact.createElement
local AGE_UNITS = { {31556909, "year"}, {2629743, "month"}, {604800, "week"}, {86400, "day"}, {3600, "hour"}, {60, "minute"}, }
function timeSinceText(elapsed: number): string
if elapsed < 3 then
return "just now"
end
local ageText = string.format("%d seconds ago", elapsed)
for _,UnitData in ipairs(AGE_UNITS) do
local UnitSeconds, UnitName = UnitData[1], UnitData[2]
if elapsed > UnitSeconds then
local c = math.floor(elapsed/UnitSeconds)
ageText = string.format("%d %s%s ago", c, UnitName, c>1 and "s" or "")
break
end
end
return ageText
end
local function ConnectionDetails(props)
return Theme.with(function(theme)
return e(BorderedContainer, {
@@ -83,33 +103,59 @@ end
local ConnectedPage = Roact.Component:extend("ConnectedPage")
function ConnectedPage:render()
return Roact.createFragment({
Header = e(Header, {
transparency = self.props.transparency,
layoutOrder = 1,
}),
return Theme.with(function(theme)
return Roact.createFragment({
Header = e(Header, {
transparency = self.props.transparency,
layoutOrder = 1,
}),
ConnectionDetails = e(ConnectionDetails, {
projectName = self.state.projectName,
address = self.state.address,
transparency = self.props.transparency,
layoutOrder = 2,
ConnectionDetails = e(ConnectionDetails, {
projectName = self.state.projectName,
address = self.state.address,
transparency = self.props.transparency,
layoutOrder = 2,
onDisconnect = self.props.onDisconnect,
}),
onDisconnect = self.props.onDisconnect,
}),
Layout = e("UIListLayout", {
VerticalAlignment = Enum.VerticalAlignment.Center,
FillDirection = Enum.FillDirection.Vertical,
SortOrder = Enum.SortOrder.LayoutOrder,
Padding = UDim.new(0, 10),
}),
Info = e("TextLabel", {
Text = self.props.patchInfo:map(function(info)
return string.format(
"<i>Synced %d change%s %s</i>",
info.changes,
info.changes == 1 and "" or "s",
timeSinceText(os.time() - info.timestamp)
)
end),
Font = Enum.Font.Gotham,
TextSize = 14,
TextWrapped = true,
RichText = true,
TextColor3 = theme.Header.VersionColor,
TextXAlignment = Enum.TextXAlignment.Left,
TextYAlignment = Enum.TextYAlignment.Top,
TextTransparency = self.props.transparency,
Padding = e("UIPadding", {
PaddingLeft = UDim.new(0, 20),
PaddingRight = UDim.new(0, 20),
}),
})
Size = UDim2.new(1, 0, 0, 28),
LayoutOrder = 3,
BackgroundTransparency = 1,
}),
Layout = e("UIListLayout", {
VerticalAlignment = Enum.VerticalAlignment.Center,
FillDirection = Enum.FillDirection.Vertical,
SortOrder = Enum.SortOrder.LayoutOrder,
Padding = UDim.new(0, 10),
}),
Padding = e("UIPadding", {
PaddingLeft = UDim.new(0, 20),
PaddingRight = UDim.new(0, 20),
}),
})
end)
end
function ConnectedPage.getDerivedStateFromProps(props)