Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mobile payees and rules pages
Browse files Browse the repository at this point in the history
joel-jeremy committed Jan 12, 2024
1 parent 8b96857 commit d62f572
Showing 8 changed files with 69 additions and 22 deletions.
2 changes: 2 additions & 0 deletions packages/desktop-client/src/components/FinancesApp.tsx
Original file line number Diff line number Diff line change
@@ -247,6 +247,8 @@ function FinancesAppWithoutContext() {
<Route path="/budget" element={<MobileNavTabs />} />
<Route path="/accounts" element={<MobileNavTabs />} />
<Route path="/settings" element={<MobileNavTabs />} />
<Route path="/payees" element={<MobileNavTabs />} />
<Route path="/rules" element={<MobileNavTabs />} />
<Route path="*" element={null} />
</Routes>
</View>
16 changes: 14 additions & 2 deletions packages/desktop-client/src/components/ManageRules.tsx
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ import { type RuleEntity } from 'loot-core/src/types/models';

import { useCategories } from '../hooks/useCategories';
import { useSelected, SelectedProvider } from '../hooks/useSelected';
import { useResponsive } from '../ResponsiveProvider';
import { theme } from '../style';

import { Button } from './common/Button';
@@ -241,6 +242,12 @@ function ManageRulesContent({
setHoveredRule(id);
}, []);

const { isNarrowWidth } = useResponsive();

if (allRules === null) {
return null;
}

return (
<SelectedProvider instance={selectedInst}>
<View>
@@ -250,14 +257,16 @@ function ManageRulesContent({
alignItems: 'center',
padding: isModal ? '0 13px 15px' : '0 0 15px',
flexShrink: 0,
justifyContent: 'space-between',
flexWrap: 'wrap',
}}
>
<View
style={{
color: theme.pageTextLight,
flexDirection: 'row',
alignItems: 'center',
width: '50%',
justifySelf: 'flex-start',
}}
>
<Text>
@@ -270,11 +279,14 @@ function ManageRulesContent({
</ExternalLink>
</Text>
</View>
<View style={{ flex: 1 }} />
<Search
placeholder="Filter rules..."
value={filter}
onChange={onSearchChange}
style={{
justifySelf: 'flex-end',
...(isNarrowWidth && { flexBasis: '100%', marginTop: 10 }),
}}
/>
</View>
<View style={{ flex: 1 }}>
14 changes: 13 additions & 1 deletion packages/desktop-client/src/components/ManageRulesPage.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
import React from 'react';

import { useResponsive } from '../ResponsiveProvider';
import { theme } from '../style';

import { ManageRules } from './ManageRules';
import { Page } from './Page';

export function ManageRulesPage() {
const { isNarrowWidth } = useResponsive();
return (
<Page title="Rules">
<Page
title="Rules"
titleStyle={{
...(isNarrowWidth && {
backgroundColor: theme.mobileHeaderBackground,
color: theme.mobileHeaderText,
}),
}}
>
<ManageRules isModal={false} payeeId={null} />
</Page>
);
11 changes: 7 additions & 4 deletions packages/desktop-client/src/components/common/Search.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type ChangeEvent, type Ref } from 'react';

import { SvgRemove, SvgSearchAlternate } from '../../icons/v2';
import { theme } from '../../style';
import { type CSSProperties, theme } from '../../style';

import { Button } from './Button';
import { InputWithContent } from './InputWithContent';
@@ -12,25 +12,28 @@ type SearchProps = {
onChange: (value: string) => unknown;
placeholder: string;
isInModal?: boolean;
width?: number;
style?: CSSProperties;
};

const DEFAULT_WIDTH = 250;

export function Search({
inputRef,
value,
onChange,
placeholder,
isInModal = false,
width = 250,
style,
}: SearchProps) {
return (
<InputWithContent
inputRef={inputRef}
style={{
width,
width: style?.width || DEFAULT_WIDTH,
flex: '',
borderColor: isInModal ? null : 'transparent',
backgroundColor: isInModal ? null : theme.formInputBackground,
...style,
}}
focusStyle={
isInModal
Original file line number Diff line number Diff line change
@@ -58,14 +58,14 @@ export function MobileNavTabs() {
Icon: SvgCalendar,
},
{
name: 'Payees (Soon)',
path: '/payees/soon',
name: 'Payees',
path: '/payees',
style: navTabStyle,
Icon: SvgStoreFront,
},
{
name: 'Rules (Soon)',
path: '/rules/soon',
name: 'Rules',
path: '/rules',
style: navTabStyle,
Icon: SvgTuning,
},
23 changes: 14 additions & 9 deletions packages/desktop-client/src/components/payees/ManagePayees.jsx
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ import {
} from '../../hooks/useSelected';
import { useStableCallback } from '../../hooks/useStableCallback';
import { SvgExpandArrow } from '../../icons/v0';
import { useResponsive } from '../../ResponsiveProvider';
import { theme } from '../../style';
import { Button } from '../common/Button';
import { Search } from '../common/Search';
@@ -219,8 +220,8 @@ export const ManagePayees = forwardRef(
);

const payeesById = getPayeesById(payees);

const [menuOpen, setMenuOpen] = useState(false);
const { isNarrowWidth } = useResponsive();

return (
<View style={{ height: '100%' }}>
@@ -229,9 +230,16 @@ export const ManagePayees = forwardRef(
flexDirection: 'row',
alignItems: 'center',
padding: '0 0 15px',
justifyContent: 'space-between',
flexWrap: 'wrap-reverse',
}}
>
<View style={{ flexShrink: 0 }}>
<View
style={{
flexDirection: 'row',
justifySelf: 'flex-start',
}}
>
<Button
type="bare"
style={{ marginRight: 10 }}
@@ -254,12 +262,6 @@ export const ManagePayees = forwardRef(
onMerge={onMerge}
/>
)}
</View>
<View
style={{
flexShrink: 0,
}}
>
{(orphanedOnly ||
(orphanedPayees && orphanedPayees.length > 0)) && (
<Button
@@ -281,12 +283,15 @@ export const ManagePayees = forwardRef(
</Button>
)}
</View>
<View style={{ flex: 1 }} />
<Search
id="filter-input"
placeholder="Filter payees..."
value={filter}
onChange={applyFilter}
style={{
justifySelf: 'flex-end',
...(isNarrowWidth && { flexBasis: '100%', marginBottom: 10 }),
}}
/>
</View>

Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
import React from 'react';
import { useLocation } from 'react-router-dom';

import { useResponsive } from '../../ResponsiveProvider';
import { theme } from '../../style';
import { Page } from '../Page';

import { ManagePayeesWithData } from './ManagePayeesWithData';

export function ManagePayeesPage() {
const location = useLocation();
const { isNarrowWidth } = useResponsive();
return (
<Page title="Payees">
<Page
title="Payees"
titleStyle={{
...(isNarrowWidth && {
backgroundColor: theme.mobileHeaderBackground,
color: theme.mobileHeaderText,
}),
}}
>
<ManagePayeesWithData
initialSelectedIds={
location.state && location.state.selectedPayee
Original file line number Diff line number Diff line change
@@ -64,7 +64,9 @@ export function ScheduleLink({
<Search
inputRef={searchInput}
isInModal
width={300}
style={{
width: 300,
}}
placeholder="Filter schedules…"
value={filter}
onChange={setFilter}

0 comments on commit d62f572

Please sign in to comment.