From 72006ef64dd410e93a59260af75c23c24f2918c3 Mon Sep 17 00:00:00 2001
From: George Sumpster <gsumpster@gmail.com>
Date: Fri, 27 Jan 2023 13:45:48 -0800
Subject: [PATCH] Add 'View on Hover' to Category Notes for #563 (#579)
* add hover state to NotesButton
* switch NotesButton editability to a ternary
* fix new lines, adjust padding on textarea
* add workBreak to text styling
* Update packages/loot-design/src/components/NotesButton.js
Co-authored-by: Jed Fox <git@jedfox.com>
* change wordBreak to overflowWrap
---------
Co-authored-by: Jed Fox <git@jedfox.com>
---
.../loot-design/src/components/NotesButton.js | 57 +++++++++++++------
1 file changed, 41 insertions(+), 16 deletions(-)
diff --git a/packages/loot-design/src/components/NotesButton.js b/packages/loot-design/src/components/NotesButton.js
index c077e0dd9..ccd10f72f 100644
--- a/packages/loot-design/src/components/NotesButton.js
+++ b/packages/loot-design/src/components/NotesButton.js
@@ -9,9 +9,10 @@ import { send } from 'loot-core/src/platform/client/fetch';
import { colors } from '../style';
import CustomNotesPaper from '../svg/v2/CustomNotesPaper';
-import { View, Button, Tooltip, useTooltip } from './common';
+import { View, Button, Tooltip, useTooltip, Text } from './common';
export function NotesTooltip({
+ editable,
defaultNotes,
position = 'bottom-left',
onClose
@@ -20,22 +21,39 @@ export function NotesTooltip({
let inputRef = React.createRef();
useEffect(() => {
- inputRef.current.focus();
- }, []);
+ if (editable) {
+ inputRef.current.focus();
+ }
+ }, [inputRef, editable]);
return (
<Tooltip position={position} onClose={() => onClose(notes)}>
- <textarea
- ref={inputRef}
- {...css({
- border: '1px solid ' + colors.border,
- minWidth: 300,
- minHeight: 120,
- outline: 'none'
- })}
- value={notes || ''}
- onChange={e => setNotes(e.target.value)}
- ></textarea>
+ {editable ? (
+ <textarea
+ ref={inputRef}
+ {...css({
+ border: '1px solid ' + colors.border,
+ padding: 7,
+ minWidth: 300,
+ minHeight: 120,
+ outline: 'none'
+ })}
+ value={notes || ''}
+ onChange={e => setNotes(e.target.value)}
+ ></textarea>
+ ) : (
+ <Text
+ {...css({
+ display: 'block',
+ maxWidth: 225,
+ padding: 8,
+ whiteSpace: 'pre-wrap',
+ overflowWrap: 'break-word'
+ })}
+ >
+ {notes}
+ </Text>
+ )}
</Tooltip>
);
}
@@ -48,6 +66,7 @@ export default function NotesButton({
tooltipPosition,
style
}) {
+ let [hover, setHover] = useState(false);
let tooltip = useTooltip();
let { data } = useLiveQuery(
useMemo(() => q('notes').filter({ id }).select('*'), [id])
@@ -60,11 +79,14 @@ export default function NotesButton({
tooltip.close();
}
+ // This account for both the tooltip hover, and editing tooltip
+ const tooltipOpen = tooltip.isOpen || (hasNotes && hover);
+
return (
<View
style={[
{ flexShrink: 0 },
- tooltip.isOpen && {
+ tooltipOpen && {
'& button, & .hover-visible': {
display: 'flex',
opacity: 1,
@@ -75,6 +97,8 @@ export default function NotesButton({
'& button, & .hover-visible': { display: 'flex', opacity: 1 }
}
]}
+ onMouseEnter={() => setHover(true)}
+ onMouseLeave={() => setHover(false)}
>
<Button
bare
@@ -84,8 +108,9 @@ export default function NotesButton({
>
<CustomNotesPaper style={{ width, height, color: 'currentColor' }} />
</Button>
- {tooltip.isOpen && (
+ {tooltipOpen && (
<NotesTooltip
+ editable={tooltip.isOpen}
defaultNotes={note}
position={tooltipPosition}
onClose={onClose}
--
GitLab