From d2bbe6a98e5072b492c7ff8a2008626b85b9f812 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Tue, 6 Aug 2024 20:36:45 +0100
Subject: [PATCH] Spending Report: Mobile UI (#3209)
* SpendingMobile UI
* notes
---
.../src/components/reports/Header.jsx | 11 ++-
.../components/reports/reports/Spending.tsx | 89 ++++++++++++-------
upcoming-release-notes/3209.md | 6 ++
3 files changed, 70 insertions(+), 36 deletions(-)
create mode 100644 upcoming-release-notes/3209.md
diff --git a/packages/desktop-client/src/components/reports/Header.jsx b/packages/desktop-client/src/components/reports/Header.jsx
index 03c855d29..a494746a3 100644
--- a/packages/desktop-client/src/components/reports/Header.jsx
+++ b/packages/desktop-client/src/components/reports/Header.jsx
@@ -88,12 +88,17 @@ export function Header({
}
value={end}
options={allMonths.map(({ name, pretty }) => [name, pretty])}
+ buttonStyle={{ marginRight: 10 }}
/>
+ {filters && (
+ <FilterButton
+ compact={isNarrowWidth}
+ onApply={onApply}
+ type="accounts"
+ />
+ )}
</View>
- {!isNarrowWidth && filters && (
- <FilterButton onApply={onApply} type="accounts" />
- )}
<View
style={{
flexDirection: 'row',
diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
index 1182eec4a..8de238dfc 100644
--- a/packages/desktop-client/src/components/reports/reports/Spending.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -134,10 +134,10 @@ export function Spending() {
>
<View
style={{
- flexDirection: 'row',
- alignItems: 'center',
+ flexDirection: isNarrowWidth ? 'column' : 'row',
+ alignItems: isNarrowWidth ? 'inherit' : 'center',
padding: 20,
- paddingBottom: conditions.length > 0 ? 0 : 10,
+ paddingBottom: 0,
flexShrink: 0,
}}
>
@@ -146,6 +146,8 @@ export function Spending() {
alignItems: 'center',
flexDirection: 'row',
marginRight: 5,
+ marginBottom: 5,
+ marginTop: 5,
}}
>
<Text
@@ -175,6 +177,15 @@ export function Spending() {
>
to the:
</Text>
+ </View>
+ <View
+ style={{
+ flexDirection: 'row',
+ marginRight: 5,
+ marginTop: 5,
+ marginBottom: 5,
+ }}
+ >
<ModeButton
selected={['lastMonth', 'twoMonthsPrevious'].includes(mode)}
style={{
@@ -211,42 +222,56 @@ export function Spending() {
</ModeButton>
)}
</View>
+ {!isNarrowWidth && (
+ <>
+ <View
+ style={{
+ width: 1,
+ height: 30,
+ backgroundColor: theme.pillBorderDark,
+ marginRight: 10,
+ }}
+ />{' '}
+ </>
+ )}
<View
style={{
- width: 1,
- height: 30,
- backgroundColor: theme.pillBorderDark,
- marginRight: 10,
- }}
- />{' '}
- <FilterButton
- onApply={onApplyFilter}
- compact={false}
- hover={false}
- exclude={['date']}
- />
- <View style={{ flex: 1 }} />
- <Tooltip
- placement="bottom start"
- content={<Text>Save compare and filter options</Text>}
- style={{
- ...styles.tooltip,
- lineHeight: 1.5,
- padding: '6px 10px',
- marginLeft: 10,
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginBottom: 5,
+ marginTop: 5,
+ flex: 1,
}}
>
- <Button
- type="primary"
+ <FilterButton
+ onApply={onApplyFilter}
+ compact={isNarrowWidth}
+ hover={false}
+ exclude={['date']}
+ />
+ <View style={{ flex: 1 }} />
+ <Tooltip
+ placement="bottom start"
+ content={<Text>Save compare and filter options</Text>}
style={{
+ ...styles.tooltip,
+ lineHeight: 1.5,
+ padding: '6px 10px',
marginLeft: 10,
}}
- onClick={saveFilter}
- disabled={filterSaved ? true : false}
>
- {filterSaved ? 'Saved' : 'Save'}
- </Button>
- </Tooltip>
+ <Button
+ type="primary"
+ style={{
+ marginLeft: 10,
+ }}
+ onClick={saveFilter}
+ disabled={filterSaved ? true : false}
+ >
+ {filterSaved ? 'Saved' : 'Save'}
+ </Button>
+ </Tooltip>
+ </View>
</View>
<View
style={{
@@ -269,8 +294,6 @@ export function Spending() {
flexShrink: 0,
flexDirection: 'row',
spacing: 2,
- justifyContent: 'flex-start',
- alignContent: 'flex-start',
}}
>
<AppliedFilters
diff --git a/upcoming-release-notes/3209.md b/upcoming-release-notes/3209.md
new file mode 100644
index 000000000..43c7d6d7a
--- /dev/null
+++ b/upcoming-release-notes/3209.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [carkom]
+---
+
+Adjusting UI so that spending report works on mobile.
--
GitLab