From c82f242c1675416c6d424ee5f28bba60875aed43 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Mon, 27 Feb 2023 13:42:43 -0500
Subject: [PATCH] Fix notes button not being visible unless hovered (#700)
* Fix notes button not being visible unless hovered
* A few tweaks
* !important
---
.../loot-design/src/components/NotesButton.js | 34 ++++++-------------
1 file changed, 11 insertions(+), 23 deletions(-)
diff --git a/packages/loot-design/src/components/NotesButton.js b/packages/loot-design/src/components/NotesButton.js
index 4de150645..bca6ed5b4 100644
--- a/packages/loot-design/src/components/NotesButton.js
+++ b/packages/loot-design/src/components/NotesButton.js
@@ -81,10 +81,9 @@ export default function NotesButton({
const [delayHandler, setDelayHandler] = useState(null);
- const handleMouseEnter = event => {
+ const handleMouseEnter = () => {
setDelayHandler(
setTimeout(() => {
- // whatever your data is
setHover(true);
}, 300),
);
@@ -100,30 +99,19 @@ export default function NotesButton({
return (
<View
- style={[
- { flexShrink: 0 },
- tooltipOpen && {
- '& button, & .hover-visible': {
- display: 'flex',
- opacity: 1,
- color: colors.n1,
- },
- },
- hasNotes && {
- '& button, & .hover-visible': { display: 'flex', opacity: 1 },
- },
- ]}
- onMouseEnter={async () => {
- handleMouseEnter();
- }}
- onMouseLeave={() => {
- handleMouseLeave();
- }}
+ style={[{ flexShrink: 0 }]}
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
>
<Button
bare
- className="hover-visible"
- style={[{ color: defaultColor }, style]}
+ className={!hasNotes && !tooltipOpen ? 'hover-visible' : ''}
+ style={[
+ { color: defaultColor },
+ style,
+ hasNotes && { display: 'flex !important' },
+ tooltipOpen && { color: colors.n1 },
+ ]}
{...tooltip.getOpenEvents()}
>
<CustomNotesPaper style={{ width, height, color: 'currentColor' }} />
--
GitLab