From 82d4481a3b0e8c98d738f87bd073bba68b92f23f Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Wed, 31 Aug 2022 18:08:28 -0400
Subject: [PATCH] Move Tools above Accounts, make the whole sidebar scroll
---
.../loot-design/src/components/sidebar.js | 108 ++++++++++--------
1 file changed, 59 insertions(+), 49 deletions(-)
diff --git a/packages/loot-design/src/components/sidebar.js b/packages/loot-design/src/components/sidebar.js
index 4b1aae7b5..9cbe691db 100644
--- a/packages/loot-design/src/components/sidebar.js
+++ b/packages/loot-design/src/components/sidebar.js
@@ -77,7 +77,7 @@ export function Item({
);
return (
- <View style={style}>
+ <View style={[{ flexShrink: 0 }, style]}>
{onClick ? (
<RectButton onClick={onClick}>
<View style={linkStyle}>{content}</View>
@@ -272,7 +272,7 @@ export function Accounts({
};
return (
- <View style={{ overflow: 'auto', flex: 1 }}>
+ <View>
{budgetedAccounts.length > 0 && (
<Account
name="For budget"
@@ -444,7 +444,12 @@ function Tools() {
}
}, [location.pathname]);
return (
- <View style={{ borderLeft: isOpen ? '4px solid ' + colors.n9 : '' }}>
+ <View
+ style={{
+ borderLeft: isOpen ? '4px solid ' + colors.n9 : '',
+ flexShrink: 0
+ }}
+ >
<Item
title="Tools"
icon={<Wrench width={15} height={15} style={{ color: 'inherit' }} />}
@@ -524,7 +529,6 @@ export function Sidebar({
{
width: SIDEBAR_WIDTH,
color: colors.n9,
- overflow: 'auto',
backgroundColor: colors.n1,
'& .float': {
opacity: 0,
@@ -594,52 +598,58 @@ export function Sidebar({
{!hasWindowButtons && <ToggleButton onFloat={onFloat} />}
{Platform.isBrowser && <MenuButton />}
</View>
- <Item
- title="Budget"
- icon={<Wallet width={15} height={15} style={{ color: 'inherit' }} />}
- to="/budget"
- />
- <Item
- title="Reports"
- icon={<Reports width={15} height={15} style={{ color: 'inherit' }} />}
- to="/reports"
- />
- <Item
- title="Accounts"
- to="/accounts"
- icon={<PiggyBank width={15} height={15} style={{ color: 'inherit' }} />}
- exact={true}
- button={
- <Button
- bare
- onClick={e => {
- e.stopPropagation();
- e.preventDefault();
- onAddAccount();
- }}
- >
- <Add width={12} height={12} style={{ color: colors.n6 }} />
- </Button>
- }
- />
- <Tools />
-
- <Accounts
- accounts={accounts}
- failedAccounts={failedAccounts}
- updatedAccounts={updatedAccounts}
- getAccountPath={account => `/accounts/${account.id}`}
- budgetedAccountPath="/accounts/budgeted"
- offBudgetAccountPath="/accounts/offbudget"
- getBalanceQuery={getBalanceQuery}
- getOnBudgetBalance={getOnBudgetBalance}
- getOffBudgetBalance={getOffBudgetBalance}
- showClosedAccounts={showClosedAccounts}
- onAddAccount={onAddAccount}
- onToggleClosedAccounts={onToggleClosedAccounts}
- onReorder={onReorder}
- />
+ <View style={{ overflow: 'auto' }}>
+ <Item
+ title="Budget"
+ icon={<Wallet width={15} height={15} style={{ color: 'inherit' }} />}
+ to="/budget"
+ />
+ <Item
+ title="Reports"
+ icon={<Reports width={15} height={15} style={{ color: 'inherit' }} />}
+ to="/reports"
+ />
+
+ <Tools />
+
+ <Item
+ title="Accounts"
+ to="/accounts"
+ icon={
+ <PiggyBank width={15} height={15} style={{ color: 'inherit' }} />
+ }
+ exact={true}
+ button={
+ <Button
+ bare
+ onClick={e => {
+ e.stopPropagation();
+ e.preventDefault();
+ onAddAccount();
+ }}
+ >
+ <Add width={12} height={12} style={{ color: colors.n6 }} />
+ </Button>
+ }
+ />
+
+ <Accounts
+ accounts={accounts}
+ failedAccounts={failedAccounts}
+ updatedAccounts={updatedAccounts}
+ getAccountPath={account => `/accounts/${account.id}`}
+ budgetedAccountPath="/accounts/budgeted"
+ offBudgetAccountPath="/accounts/offbudget"
+ getBalanceQuery={getBalanceQuery}
+ getOnBudgetBalance={getOnBudgetBalance}
+ getOffBudgetBalance={getOffBudgetBalance}
+ showClosedAccounts={showClosedAccounts}
+ onAddAccount={onAddAccount}
+ onToggleClosedAccounts={onToggleClosedAccounts}
+ onReorder={onReorder}
+ />
+ </View>
</View>
);
}
--
GitLab