forked from rojo-rbx/rojo
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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user