Skip to content

Toggle edit annotation button #838

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

Merged
thostetler merged 2 commits into from
Apr 13, 2026
Merged

Toggle edit annotation button #838

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
09d1c49
toggle edit annotation
shinyichen Apr 8, 2026
14ab6c7
improved edit toggle icon
shinyichen Apr 10, 2026
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
33 changes: 27 additions & 6 deletions src/components/Libraries/DocumentList/DocumentItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
import { Checkbox, CheckboxProps, Flex, IconButton, Stack, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
import {
Checkbox,
CheckboxProps,
Flex,
HStack,
IconButton,
Stack,
Text,
Tooltip,
useDisclosure,
} from '@chakra-ui/react';
import { AuthorList } from '@/components/AllAuthorsModal';
import { ItemResourceDropdowns } from '@/components/ResultList/Item';
import { APP_DEFAULTS } from '@/config';
Expand All @@ -16,6 +26,7 @@ import { getFormattedNumericPubdate, unwrapStringValue } from '@/utils/common/fo
import { noop } from '@/utils/common/noop';
import { IDocsEntity } from '@/api/search/types';
import { LibraryIdentifier } from '@/api/biblib/types';
import { ChevronDownIcon } from '@chakra-ui/icons';

export interface IItemProps {
doc: IDocsEntity;
Expand Down Expand Up @@ -60,7 +71,7 @@ export const DocumentItem = (props: IItemProps): ReactElement => {
pub?.length > APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF ? pub.slice(0, APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF) + '...' : pub;

// annotation / abstract
const { isOpen, onClose, onOpen } = useDisclosure();
const { isOpen, onClose, onOpen, onToggle } = useDisclosure();

// citations
const cite = useNormCite ? (
Expand Down Expand Up @@ -108,13 +119,23 @@ export const DocumentItem = (props: IItemProps): ReactElement => {
<Text as={MathJax} dangerouslySetInnerHTML={{ __html: unwrapStringValue(title) }} />
</SimpleLink>
<Flex alignItems="start" ml={1}>
<Tooltip label="Show annotation">
<Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
<IconButton
aria-label="Show annotation"
icon={<PencilSquareIcon width="18px" height="18px" />}
aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
aria-expanded={isOpen}
icon={
<HStack spacing="1px" align="center">
<PencilSquareIcon width="18px" height="18px" />
<ChevronDownIcon
boxSize="14px"
transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
transition="transform 0.2s ease"
/>
</HStack>
}
variant="link"
size="xs"
onClick={onOpen}
onClick={onToggle}
/>
</Tooltip>
Copy link
Copy Markdown
Member

@thostetler thostetler Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the ticket I was thinking that we should have some visual indication that clicking the button would toggle a menu. Would you mind seeing if you like this type of approach:

<Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
  <IconButton
    aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
    aria-expanded={isOpen}
    icon={
      <HStack spacing="1px" align="center">
        <PencilSquareIcon width="18px" height="18px" />
        <ChevronDownIcon
          boxSize="14px"
          transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
          transition="transform 0.2s ease"
        />
      </HStack>
    }
    variant="link"
    size="xs"
    onClick={onToggle}
  />
</Tooltip>

Composing the icon with a chevron that rotates?
I'm not sure how this would look exactly, haven't tested it, but you get the idea.

Copy link
Copy Markdown
Member Author

@shinyichen shinyichen Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thostetler Updated

{!isClient || hideResources ? null : <ItemResourceDropdowns doc={doc} defaultCitation={defaultCitation} />}
Expand Down
Loading