Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add 'View on Hover' to Category Notes for #563 #579

Merged
merged 6 commits into from
Jan 27, 2023
Merged

Add 'View on Hover' to Category Notes for #563 #579

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac11826
add hover state to NotesButton
gsumpster Jan 27, 2023
6091e00
switch NotesButton editability to a ternary
gsumpster Jan 27, 2023
1916d2c
fix new lines, adjust padding on textarea
gsumpster Jan 27, 2023
758a5e3
add workBreak to text styling
gsumpster Jan 27, 2023
879ee3d
Update packages/loot-design/src/components/NotesButton.js
gsumpster Jan 27, 2023
74ce13f
change wordBreak to overflowWrap
gsumpster Jan 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 41 additions & 16 deletions packages/loot-design/src/components/NotesButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
);
}
Expand All @@ -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])
Expand All @@ -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,
Expand All @@ -75,6 +97,8 @@ export default function NotesButton({
'& button, & .hover-visible': { display: 'flex', opacity: 1 }
}
]}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<Button
bare
Expand All @@ -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}
Expand Down