From d2e3e44d0d059b996ad121d32e4019599c4c73e8 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Tue, 17 Jan 2023 17:00:13 -0500
Subject: [PATCH] =?UTF-8?q?Move=20the=20=E2=80=9C=E2=80=A6=E2=80=9D=20menu?=
=?UTF-8?q?=20to=20the=20budget=20name=20(#459)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/SidebarWithData.js | 56 +++++++++++++++++-
.../loot-design/src/components/sidebar.js | 57 -------------------
2 files changed, 53 insertions(+), 60 deletions(-)
diff --git a/packages/desktop-client/src/components/SidebarWithData.js b/packages/desktop-client/src/components/SidebarWithData.js
index 831c7f03d..5ef3125fe 100644
--- a/packages/desktop-client/src/components/SidebarWithData.js
+++ b/packages/desktop-client/src/components/SidebarWithData.js
@@ -1,23 +1,59 @@
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { withRouter, useHistory } from 'react-router';
import { bindActionCreators } from 'redux';
import * as actions from 'loot-core/src/client/actions';
+import { closeBudget } from 'loot-core/src/client/actions/budgets';
+import Platform from 'loot-core/src/client/platform';
import * as queries from 'loot-core/src/client/queries';
import { send } from 'loot-core/src/platform/client/fetch';
import {
Button,
Input,
InitialFocus,
- Text
+ Text,
+ Tooltip,
+ Menu
} from 'loot-design/src/components/common';
import { Sidebar } from 'loot-design/src/components/sidebar';
import { styles, colors } from 'loot-design/src/style';
+import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
function EditableBudgetName({ prefs, savePrefs }) {
+ let dispatch = useDispatch();
+ let history = useHistory();
const [editing, setEditing] = useState(false);
+ const [menuOpen, setMenuOpen] = useState(false);
+
+ function onMenuSelect(type) {
+ setMenuOpen(false);
+
+ switch (type) {
+ case 'rename':
+ setEditing(true);
+ break;
+ case 'settings':
+ history.push('/settings');
+ break;
+ case 'help':
+ window.open('https://actualbudget.github.io/docs', '_blank');
+ break;
+ case 'close':
+ dispatch(closeBudget());
+ break;
+ default:
+ }
+ }
+
+ let items = [
+ { name: 'rename', text: 'Rename Budget' },
+ { name: 'settings', text: 'Settings' },
+ ...(Platform.isBrowser ? [{ name: 'help', text: 'Help' }] : []),
+ { name: 'close', text: 'Close File' }
+ ];
if (editing) {
return (
@@ -53,11 +89,25 @@ function EditableBudgetName({ prefs, savePrefs }) {
marginLeft: -5,
flex: '0 auto'
}}
- onClick={() => setEditing(true)}
+ onClick={() => setMenuOpen(true)}
>
<Text style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
{prefs.budgetName || 'A budget has no name'}
</Text>
+ <ExpandArrow
+ width={7}
+ height={7}
+ style={{ color: 'inherit', marginLeft: 5 }}
+ />
+ {menuOpen && (
+ <Tooltip
+ position="bottom-left"
+ style={{ padding: 0 }}
+ onClose={() => setMenuOpen(false)}
+ >
+ <Menu onMenuSelect={onMenuSelect} items={items} />
+ </Tooltip>
+ )}
</Button>
);
}
diff --git a/packages/loot-design/src/components/sidebar.js b/packages/loot-design/src/components/sidebar.js
index 5af7b5443..29544d7ca 100644
--- a/packages/loot-design/src/components/sidebar.js
+++ b/packages/loot-design/src/components/sidebar.js
@@ -446,62 +446,6 @@ function ToggleButton({ style, onFloat }) {
);
}
-const MenuButton = withRouter(function MenuButton({ history }) {
- let dispatch = useDispatch();
- let [menuOpen, setMenuOpen] = useState(false);
-
- function onMenuSelect(type) {
- setMenuOpen(false);
-
- switch (type) {
- case 'settings':
- history.push('/settings');
- break;
- case 'help':
- window.open('https://actualbudget.github.io/docs', '_blank');
- break;
- case 'close':
- dispatch(closeBudget());
- break;
- default:
- }
- }
-
- let items = [
- { name: 'settings', text: 'Settings' },
- { name: 'help', text: 'Help' },
- { name: 'close', text: 'Close File' }
- ];
-
- return (
- <Button
- bare
- style={{
- color: colors.n5,
- flexShrink: 0
- }}
- activeStyle={{ color: colors.p7 }}
- onClick={() => setMenuOpen(true)}
- aria-label="Menu"
- >
- <DotsHorizontalTriple
- width={15}
- height={15}
- style={{ color: 'inherit', transform: 'rotateZ(0deg)' }}
- />
- {menuOpen && (
- <Tooltip
- position="bottom-right"
- style={{ padding: 0 }}
- onClose={() => setMenuOpen(false)}
- >
- <Menu onMenuSelect={onMenuSelect} items={items} />
- </Tooltip>
- )}
- </Button>
- );
-});
-
function Tools() {
let [isOpen, setOpen] = useState(false);
let onToggle = useCallback(() => setOpen(open => !open), []);
@@ -638,7 +582,6 @@ export function Sidebar({
<View style={{ flex: 1, flexDirection: 'row' }} />
{!hasWindowButtons && <ToggleButton onFloat={onFloat} />}
- {Platform.isBrowser && <MenuButton />}
</View>
<View style={{ overflow: 'auto' }}>
--
GitLab