Skip to content

Commit

Permalink
Mobile create account
Browse files Browse the repository at this point in the history
  • Loading branch information
@joel-jeremy
joel-jeremy committed Nov 16, 2023
1 parent 7c0b7a2 commit 0db11f7
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 125 deletions.
81 changes: 61 additions & 20 deletions packages/desktop-client/src/components/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,21 @@ import { theme, styles, type CSSProperties } from '../style';
import Text from './common/Text';
import View from './common/View';

function PageTitle({
name,
style,
}: {
type PageHeaderProps = {
name: ReactNode;
style?: CSSProperties;
}) {
leftContent?: ReactNode;
rightContent?: ReactNode;
};

const HEADER_HEIGHT = 50;

function PageHeader({
name,
style,
leftContent,
rightContent,
}: PageHeaderProps) {
const { isNarrowWidth } = useResponsive();

if (isNarrowWidth) {
Expand All @@ -23,16 +31,42 @@ function PageTitle({
backgroundColor: theme.mobilePageBackground,
color: theme.mobileModalText,
flexDirection: 'row',
flex: '1 0 auto',
fontSize: 18,
fontWeight: 500,
height: 50,
justifyContent: 'center',
overflowY: 'auto',
flexShrink: 0,
height: HEADER_HEIGHT,
...style,
}}
>
{name}
<View
style={{
flexBasis: '25%',
justifyContent: 'flex-start',
flexDirection: 'row',
}}
>
{leftContent}
</View>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
flexBasis: '50%',
fontSize: 18,
fontWeight: 500,
justifyContent: 'center',
overflowY: 'auto',
}}
>
{name}
</View>
<View
style={{
flexBasis: '25%',
justifyContent: 'flex-end',
flexDirection: 'row',
}}
>
{rightContent}
</View>
</View>
);
}
Expand All @@ -51,25 +85,32 @@ function PageTitle({
);
}

type PageProps = {
title: ReactNode;
titleStyle?: CSSProperties;
headerLeftContent?: ReactNode;
headerRightContent?: ReactNode;
children: ReactNode;
};

export function Page({
title,
children,
titleStyle,
}: {
title: ReactNode;
children: ReactNode;
titleStyle?: CSSProperties;
}) {
headerLeftContent,
headerRightContent,
children,
}: PageProps) {
let { isNarrowWidth } = useResponsive();
let HORIZONTAL_PADDING = isNarrowWidth ? 10 : 20;

return (
<View style={isNarrowWidth ? undefined : styles.page}>
<PageTitle
<PageHeader
name={title}
leftContent={headerLeftContent}
rightContent={headerRightContent}
style={{
...titleStyle,
paddingInline: HORIZONTAL_PADDING,
}}
/>
<View
Expand Down
212 changes: 109 additions & 103 deletions packages/desktop-client/src/components/accounts/MobileAccountDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,109 +106,7 @@ export default function AccountDetails({
top: 0,
}}
>
<View
style={{
flexDirection: 'row',
flexShrink: 0,
height: BUDGET_HEADER_HEIGHT,
width: '100%',
backgroundColor: theme.mobileHeaderBackground,
}}
>
<View
style={{
width: LEFT_RIGHT_FLEX_WIDTH,
flexDirection: 'row',
}}
>
<Button
type="bare"
style={{
color: theme.mobileHeaderText,
justifyContent: 'center',
margin: 10,
paddingLeft: 5,
paddingRight: 3,
}}
hoveredStyle={{
color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover,
}}
>
<Link
to={-1}
style={{
alignItems: 'center',
display: 'flex',
textDecoration: 'none',
}}
>
<CheveronLeft
style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
/>
<Text
style={{
...styles.text,
fontWeight: 500,
marginLeft: 5,
marginRight: 5,
}}
>
Back
</Text>
</Link>
</Button>
<View
style={{
flex: 1,
}}
/>
</View>
<View
style={{
flex: 1,
fontSize: 16,
fontWeight: 500,
alignItems: 'center',
justifyContent: 'center',
color: theme.mobileHeaderText,
}}
role="heading"
>
{account.name}
</View>

<View
style={{
width: LEFT_RIGHT_FLEX_WIDTH,
flexDirection: 'row',
}}
>
<View
style={{
flex: 1,
}}
/>
<ButtonLink
to="transactions/new"
type="bare"
aria-label="Add Transaction"
style={{
justifyContent: 'center',
padding: 10,
margin: 10,
color: theme.mobileHeaderText,
}}
hoveredStyle={{
color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover,
}}
activeStyle={{ background: 'transparent' }}
>
<Add width={20} height={20} style={{ margin: -5 }} />
</ButtonLink>
</View>
</View>
<AccountDetailsHeader account={account} />
<Label title="BALANCE" style={{ marginTop: 10 }} />
<CellValue
binding={balance}
Expand Down Expand Up @@ -245,3 +143,111 @@ export default function AccountDetails({
</View>
);
}

function AccountDetailsHeader({ account }) {
return (
<View
style={{
flexDirection: 'row',
flexShrink: 0,
height: BUDGET_HEADER_HEIGHT,
width: '100%',
backgroundColor: theme.mobileHeaderBackground,
}}
>
<View
style={{
width: LEFT_RIGHT_FLEX_WIDTH,
flexDirection: 'row',
}}
>
<Button
type="bare"
style={{
color: theme.mobileHeaderText,
justifyContent: 'center',
margin: 10,
paddingLeft: 5,
paddingRight: 3,
}}
hoveredStyle={{
color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover,
}}
>
<Link
to={-1}
style={{
alignItems: 'center',
display: 'flex',
textDecoration: 'none',
}}
>
<CheveronLeft
style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
/>
<Text
style={{
...styles.text,
fontWeight: 500,
marginLeft: 5,
marginRight: 5,
}}
>
Back
</Text>
</Link>
</Button>
<View
style={{
flex: 1,
}}
/>
</View>
<View
style={{
flex: 1,
fontSize: 16,
fontWeight: 500,
alignItems: 'center',
justifyContent: 'center',
color: theme.mobileHeaderText,
}}
role="heading"
>
{account.name}
</View>

<View
style={{
width: LEFT_RIGHT_FLEX_WIDTH,
flexDirection: 'row',
}}
>
<View
style={{
flex: 1,
}}
/>
<ButtonLink
to="transactions/new"
type="bare"
aria-label="Add Transaction"
style={{
justifyContent: 'center',
padding: 10,
margin: 10,
color: theme.mobileHeaderText,
}}
hoveredStyle={{
color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover,
}}
activeStyle={{ background: 'transparent' }}
>
<Add width={20} height={20} style={{ margin: -5 }} />
</ButtonLink>
</View>
</View>
);
}
25 changes: 23 additions & 2 deletions packages/desktop-client/src/components/accounts/MobileAccounts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useActions } from '../../hooks/useActions';
import useCategories from '../../hooks/useCategories';
import useNavigate from '../../hooks/useNavigate';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import Add from '../../icons/v1/Add';
import { theme, styles } from '../../style';
import Button from '../common/Button';
import Text from '../common/Text';
Expand Down Expand Up @@ -180,6 +181,26 @@ function AccountList({
color: theme.mobileHeaderText,
fontSize: 16,
}}
headerRightContent={
<Button
type="bare"
style={{
backgroundColor: 'transparent',
paddingLeft: 12,
paddingRight: 12,
color: 'white',
}}
activeStyle={{
color: 'white',
}}
hoveredStyle={{
color: 'white',
}}
onClick={onAddAccount}
>
<Add width={20} height={20} />
</Button>
}
>
<PullToRefresh onRefresh={syncAndDownload}>
<AccountHeader name="For Budget" amount={getOnBudgetBalance()} />
Expand Down Expand Up @@ -225,7 +246,7 @@ export default function Accounts() {
);

const { list: categories } = useCategories();
let { getAccounts } = useActions();
let { getAccounts, replaceModal } = useActions();

const transactions = useState({});
const navigate = useNavigate();
Expand Down Expand Up @@ -258,7 +279,7 @@ export default function Accounts() {
getBalanceQuery={queries.accountBalance}
getOnBudgetBalance={queries.budgetedAccountBalance}
getOffBudgetBalance={queries.offbudgetAccountBalance}
onAddAccount={() => {}} // () => navigate('AddAccountModal')
onAddAccount={() => replaceModal('add-account')}
onSelectAccount={onSelectAccount}
onSelectTransaction={onSelectTransaction}
/>
Expand Down

0 comments on commit 0db11f7

Please sign in to comment.