From 5fd1d05670ecc6bde0d68243064e62b659b135f3 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Mon, 3 Jun 2024 09:39:33 -0500
Subject: [PATCH] Show account notes in tooltip on sidebar (#2796)
* Show account notes in tooltip on sidebar
* add release note
* Only show tooltip for accounts
* Split account name and note into separate nodes
* Add padding inside tooltip
* Move tooltip to the right
* remove commented code
* Tweak the visual design
* Fix lint
* adjust padding
* Update packages/desktop-client/src/components/sidebar/Account.tsx
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
* refactor to avoid function
---------
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---
.../src/components/sidebar/Account.tsx | 50 ++++++++++++++++++-
upcoming-release-notes/2796.md | 6 +++
2 files changed, 55 insertions(+), 1 deletion(-)
create mode 100644 upcoming-release-notes/2796.md
diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
index 0a1536727..c0b89c9fa 100644
--- a/packages/desktop-client/src/components/sidebar/Account.tsx
+++ b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -5,10 +5,14 @@ import { css } from 'glamor';
import { type AccountEntity } from 'loot-core/src/types/models';
+import { useNotes } from '../../hooks/useNotes';
import { styles, theme, type CSSProperties } from '../../style';
import { AlignedText } from '../common/AlignedText';
import { Link } from '../common/Link';
+import { Text } from '../common/Text';
+import { Tooltip } from '../common/Tooltip';
import { View } from '../common/View';
+import { Notes } from '../Notes';
import {
useDraggable,
useDroppable,
@@ -82,7 +86,10 @@ export function Account({
onDrop,
});
- return (
+ const accountNote = useNotes(`account-${account?.id}`);
+ const needsTooltip = !!account?.id;
+
+ const accountRow = (
<View innerRef={dropRef} style={{ flexShrink: 0, ...outerStyle }}>
<View>
<DropHighlight pos={dropPos} />
@@ -148,4 +155,45 @@ export function Account({
</View>
</View>
);
+
+ if (!needsTooltip) {
+ return accountRow;
+ }
+
+ return (
+ <Tooltip
+ content={
+ <View
+ style={{
+ padding: 10,
+ }}
+ >
+ <Text
+ style={{
+ fontWeight: 'bold',
+ borderBottom: accountNote ? `1px solid ${theme.tableBorder}` : 0,
+ marginBottom: accountNote ? '0.5rem' : 0,
+ }}
+ >
+ {name}
+ </Text>
+ {accountNote && (
+ <Notes
+ getStyle={() => ({
+ padding: 0,
+ })}
+ notes={accountNote}
+ />
+ )}
+ </View>
+ }
+ style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+ placement="right top"
+ triggerProps={{
+ delay: 1000,
+ }}
+ >
+ {accountRow}
+ </Tooltip>
+ );
}
diff --git a/upcoming-release-notes/2796.md b/upcoming-release-notes/2796.md
new file mode 100644
index 000000000..701a78a25
--- /dev/null
+++ b/upcoming-release-notes/2796.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Show account notes in tooltip on sidebar.
--
GitLab