From aceedb75e67cdaa088316a209b8d6ef1131669ab Mon Sep 17 00:00:00 2001 From: Laurens Deprost Date: Sat, 5 Sep 2020 13:35:59 +0200 Subject: [PATCH 1/6] feat: Add count component to navigator item --- src/components/atoms/NavigatorItem.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/atoms/NavigatorItem.tsx b/src/components/atoms/NavigatorItem.tsx index af7821c4a8..0a73de03ab 100644 --- a/src/components/atoms/NavigatorItem.tsx +++ b/src/components/atoms/NavigatorItem.tsx @@ -19,6 +19,9 @@ const Container = styled.div` .control { opacity: 1; } + .counter { + opacity: 0; + } } ` @@ -94,6 +97,15 @@ const IconContainer = styled.div` font-size: 18px; ` +const ItemCounter = styled.p` + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + color: ${({ theme }) => theme.navItemColor}; +` + interface NavigatorItemProps { label: string iconPath?: string @@ -102,6 +114,7 @@ interface NavigatorItemProps { className?: string folded?: boolean active?: boolean + count?: number onFoldButtonClick?: (event: React.MouseEvent) => void onClick?: (event: React.MouseEvent) => void onContextMenu?: (event: React.MouseEvent) => void @@ -119,6 +132,7 @@ const NavigatorItem = ({ className, folded, active, + count, onFoldButtonClick, onClick, onDoubleClick, @@ -158,6 +172,11 @@ const NavigatorItem = ({ )} + {count && ( + + {count} + + )} {control && {control}} From 2d562f3f481e812a07123e3c810021890dcfc05d Mon Sep 17 00:00:00 2001 From: Laurens Deprost Date: Sat, 5 Sep 2020 13:38:35 +0200 Subject: [PATCH 2/6] feat: Add folder note count prop --- src/components/molecules/FolderNavigatorItem.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/molecules/FolderNavigatorItem.tsx b/src/components/molecules/FolderNavigatorItem.tsx index 31c3cee096..c74dd63812 100644 --- a/src/components/molecules/FolderNavigatorItem.tsx +++ b/src/components/molecules/FolderNavigatorItem.tsx @@ -16,6 +16,7 @@ interface FolderNavigatorItemProps { storageId: string folderPathname: string folderSetWithSubFolders: Set + noteCount?: number createNoteInFolderAndRedirect: (folderPathname: string) => void showPromptToCreateFolder: (folderPathname: string) => void showPromptToRenameFolder: (folderPathname: string) => void @@ -26,6 +27,7 @@ const FolderNavigatorItem = ({ storageId, folderPathname, folderSetWithSubFolders, + noteCount = 0, createNoteInFolderAndRedirect, showPromptToCreateFolder, showPromptToRenameFolder, @@ -245,6 +247,7 @@ const FolderNavigatorItem = ({ active={active} iconPath={active ? mdiFolderOpen : mdiFolder} label={folderName} + count={noteCount} onClick={openFolder} onDoubleClick={showRenamePrompt} onContextMenu={openContextMenu} From 23813c602b42de1908be1976bf19cc43a6ca17ad Mon Sep 17 00:00:00 2001 From: Laurens Deprost Date: Sat, 5 Sep 2020 13:41:33 +0200 Subject: [PATCH 3/6] feat: Pass amount of notes in folder to folder nav item --- src/components/molecules/FolderNavigatorFragment.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/molecules/FolderNavigatorFragment.tsx b/src/components/molecules/FolderNavigatorFragment.tsx index 3d4157eeda..a7859216be 100644 --- a/src/components/molecules/FolderNavigatorFragment.tsx +++ b/src/components/molecules/FolderNavigatorFragment.tsx @@ -50,6 +50,13 @@ const FolderListFragment = ({ ) }, [folderPathnames, storageId, sideNavOpenedItemSet]) + const getFolderNoteCount = (folderPathname: string): number => + Object.values(storage.noteMap).filter( + (note) => + (!note!.trashed && note!.folderPathname === folderPathname) || + note!.folderPathname.startsWith(folderPathname + '/') + ).length + return ( <> {openedFolderPathnameList.map((folderPathname: string) => { @@ -63,6 +70,7 @@ const FolderListFragment = ({ storageId={storage.id} folderPathname={folderPathname} folderSetWithSubFolders={folderSetWithSubFolders} + noteCount={getFolderNoteCount(folderPathname)} createNoteInFolderAndRedirect={createNoteInFolderAndRedirect} showPromptToCreateFolder={showPromptToCreateFolder} showPromptToRenameFolder={showPromptToRenameFolder} From fd5218f50f35179dff78c2b6d07e547dad55c0be Mon Sep 17 00:00:00 2001 From: Laurens Deprost Date: Sat, 5 Sep 2020 13:43:41 +0200 Subject: [PATCH 4/6] feat: Show totals for all notes, attachments & trash --- src/components/molecules/StorageNavigatorFragment.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/molecules/StorageNavigatorFragment.tsx b/src/components/molecules/StorageNavigatorFragment.tsx index 969c5aa295..4f4bb4774a 100644 --- a/src/components/molecules/StorageNavigatorFragment.tsx +++ b/src/components/molecules/StorageNavigatorFragment.tsx @@ -292,6 +292,12 @@ const StorageNavigatorFragment = ({ const attachments = useMemo(() => Object.values(storage.attachmentMap), [ storage.attachmentMap, ]) + + const noteCount = useMemo( + () => + Object.values(storage.noteMap).filter((note) => !note!.trashed).length, + [storage.noteMap] + ) const trashed = useMemo( () => Object.values(storage.noteMap).filter((note) => note!.trashed), [storage.noteMap] @@ -340,6 +346,7 @@ const StorageNavigatorFragment = ({ label='All Notes' iconPath={mdiBookOpen} active={allNotesPageIsActive} + count={noteCount} onClick={() => push(allNotesPagePathname)} onContextMenu={openAllNotesContextMenu} control={ @@ -362,6 +369,7 @@ const StorageNavigatorFragment = ({ label={t('general.attachments')} iconPath={mdiPaperclip} active={attachmentsPageIsActive} + count={attachments.length} onClick={() => push(attachmentsPagePathname)} onContextMenu={(event) => { event.preventDefault() @@ -374,6 +382,7 @@ const StorageNavigatorFragment = ({ label={t('general.trash')} iconPath={mdiTrashCanOutline} active={trashcanPageIsActive} + count={trashed.length} onClick={() => push(trashcanPagePathname)} onContextMenu={(event) => { event.preventDefault() From 00a99bffff8a365b4cee2e27419949e8ec9bc07f Mon Sep 17 00:00:00 2001 From: Laurens Deprost Date: Sat, 5 Sep 2020 13:46:01 +0200 Subject: [PATCH 5/6] feat: Show note count for tags --- src/components/molecules/TagListFragment.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/molecules/TagListFragment.tsx b/src/components/molecules/TagListFragment.tsx index 06b1e4b7f5..03864d0582 100644 --- a/src/components/molecules/TagListFragment.tsx +++ b/src/components/molecules/TagListFragment.tsx @@ -27,6 +27,11 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => { const tagListNavItemId = getTagListItemId(storage.id) const tagListIsFolded = !sideNavOpenedItemSet.has(tagListNavItemId) + const getTagNoteCount = (tagName: string): number => + Object.values(storage.noteMap).filter( + (note) => !note!.trashed && note!.tags.includes(tagName) + ).length + const tagList = useMemo(() => { return Object.keys(tagMap).map((tagName) => { const tagPathname = `/app/storages/${storageId}/tags/${tagName}` @@ -37,6 +42,7 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => { depth={1} iconPath={mdiPound} label={tagName} + count={getTagNoteCount(tagName)} onClick={() => { push(tagPathname) }} From 162f316e5c8bd0b1b022a655a7469b56b122c409 Mon Sep 17 00:00:00 2001 From: Laurens Deprost Date: Sat, 5 Sep 2020 13:56:35 +0200 Subject: [PATCH 6/6] fix: Note count for empty folders/tags --- src/components/atoms/NavigatorItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/atoms/NavigatorItem.tsx b/src/components/atoms/NavigatorItem.tsx index 0a73de03ab..c9e721a74a 100644 --- a/src/components/atoms/NavigatorItem.tsx +++ b/src/components/atoms/NavigatorItem.tsx @@ -172,7 +172,7 @@ const NavigatorItem = ({ )} - {count && ( + {count !== undefined && ( {count}