self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-29 21:21:15 +02:00
Code Issues Releases Activity

Desktop: Fixes #5178: Allow styling note list items using custom CSS (#6542)

Browse Source
This commit is contained in:
Kenichi Kobayashi 2022-06-08 18:33:06 +09:00 committed by GitHub
parent 27ef917350
commit fb9e78d6c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/app-desktop/gui/NoteList/NoteList.tsx
View File

@ -55,7 +55,7 @@ const NoteListComponent = (props: Props) => {
}; };
}, []); }, []);
const itemHeight = 34; const [itemHeight, setItemHeight] = useState(34);
const focusItemIID_ = useRef<any>(null); const focusItemIID_ = useRef<any>(null);
const noteListRef = useRef(null); const noteListRef = useRef(null);
@ -453,6 +453,16 @@ const NoteListComponent = (props: Props) => {
}; };
}, []); }, []);
useEffect(() => {
// When a note list item is styled by userchrome.css, its height is reflected.
// Ref. https://github.com/laurent22/joplin/pull/6542
const noteItem = Object.values<any>(itemAnchorRefs_.current)[0]?.current;
const actualItemHeight = noteItem?.getHeight() ?? 0;
if (actualItemHeight >= 8) { // To avoid generating too many narrow items
setItemHeight(actualItemHeight);
}
});
const renderEmptyList = () => { const renderEmptyList = () => {
if (props.notes.length) return null; if (props.notes.length) return null;

1
packages/app-desktop/gui/NoteListItem.tsx
View File

@ -73,6 +73,7 @@ function NoteListItem(props: NoteListItemProps, ref: any) {
focus: function() { focus: function() {
if (anchorRef.current) anchorRef.current.focus(); if (anchorRef.current) anchorRef.current.focus();
}, },
getHeight: () => anchorRef.current?.clientHeight,
}; };
}); });