github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-21 15:36:50 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

Right-align report table numeric columns (#6355)

Browse Source 
* Right-align report table numeric columns

* Set textAlign=right on unexposedContent

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6355

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Stephen Brown II
2025-12-12 19:17:35 -05:00
committed by GitHub
parent 8734f7db22
commit c6fcdb06e4
6 changed files with 52 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

5
packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
View File

@@ -90,6 +90,7 @@ export function ReportTableHeader({
valueStyle={compactStyle}
key={index}
value={header.date}
textAlign="right"
width="flex"
/>
);
@@ -102,6 +103,7 @@ export function ReportTableHeader({
}}
valueStyle={compactStyle}
value={t('Deposits')}
textAlign="right"
width="flex"
/>
<Cell
@@ -110,6 +112,7 @@ export function ReportTableHeader({
}}
valueStyle={compactStyle}
value={t('Payments')}
textAlign="right"
width="flex"
/>
</>
@@ -120,6 +123,7 @@ export function ReportTableHeader({
}}
valueStyle={compactStyle}
value={t('Totals')}
textAlign="right"
width="flex"
/>
<Cell
@@ -128,6 +132,7 @@ export function ReportTableHeader({
}}
valueStyle={compactStyle}
value={t('Average')}
textAlign="right"
width="flex"
/>
</View>

45
packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
View File

@@ -137,6 +137,7 @@ export const ReportTableRow = memo(
return (
<Cell
key={index}
textAlign="right"
style={{
minWidth: compact ? 50 : 85,
...(colorized && {
@@ -144,7 +145,15 @@ export const ReportTableRow = memo(
}),
}}
unexposedContent={({ value }) => (
<Text style={hoverUnderline}>{value}</Text>
<Text
style={{
...hoverUnderline,
textAlign: 'right',
flexGrow: 1,
}}
>
{value}
</Text>
)}
valueStyle={compactStyle}
value={format(intervalItem[balanceTypeOp], 'financial')}
@@ -188,6 +197,7 @@ export const ReportTableRow = memo(
? format(item.totalAssets, 'financial')
: undefined
}
textAlign="right"
width="flex"
privacyFilter
style={{
@@ -197,7 +207,15 @@ export const ReportTableRow = memo(
}),
}}
unexposedContent={({ value }) => (
<Text style={hoverUnderline}>{value}</Text>
<Text
style={{
...hoverUnderline,
textAlign: 'right',
flexGrow: 1,
}}
>
{value}
</Text>
)}
valueStyle={compactStyle}
onClick={() =>
@@ -228,6 +246,7 @@ export const ReportTableRow = memo(
? format(item.totalDebts, 'financial')
: undefined
}
textAlign="right"
width="flex"
privacyFilter
style={{
@@ -237,7 +256,15 @@ export const ReportTableRow = memo(
}),
}}
unexposedContent={({ value }) => (
<Text style={hoverUnderline}>{value}</Text>
<Text
style={{
...hoverUnderline,
textAlign: 'right',
flexGrow: 1,
}}
>
{value}
</Text>
)}
valueStyle={compactStyle}
onClick={() =>
@@ -270,13 +297,22 @@ export const ReportTableRow = memo(
? format(item[balanceTypeOp], 'financial')
: undefined
}
textAlign="right"
style={{
fontWeight: 600,
minWidth: compact ? 50 : 85,
...(colorized && { color: getAmountColor(item[balanceTypeOp]) }),
}}
unexposedContent={({ value }) => (
<Text style={hoverUnderline}>{value}</Text>
<Text
style={{
...hoverUnderline,
textAlign: 'right',
flexGrow: 1,
}}
>
{value}
</Text>
)}
valueStyle={compactStyle}
onClick={() =>
@@ -309,6 +345,7 @@ export const ReportTableRow = memo(
? format(average, 'financial')
: undefined
}
textAlign="right"
style={{
fontWeight: 600,
minWidth: compact ? 50 : 85,