rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Improves Add Tag dropdown UI (#2936)

Browse Source 
* feat: Improves Add Tag dropdown UI

* chore: change string color

* chore: render title prefix conditionally

* chore: cast to boolean
This commit is contained in:
Antonella Sgarlatta
2025-09-23 14:54:03 -03:00
committed by GitHub
parent 51025de17f
commit 54ddd37052
1 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
View File

@@ -78,30 +78,38 @@ const AddTagOption: FunctionComponent<Props> = ({
overrideZIndex="z-modal"
>
<Menu a11yLabel="Tag selection menu" className="!px-0">
{navigationController.tags.map((tag) => (
<MenuItem
key={tag.uuid}
onClick={() => {
isTagLinkedToSelectedItems(tag) ? unlinkTagFromSelectedItems(tag) : linkTagToSelectedItems(tag)
}}
>
{tag.iconString && (
<Icon
type={tag.iconString as IconType}
size={'custom'}
className={'ml-0.5 mr-1.5 h-7 w-7 text-2xl text-neutral lg:h-6 lg:w-6 lg:text-lg'}
/>
)}
<span
className={classNames(
'overflow-hidden overflow-ellipsis whitespace-nowrap',
isTagLinkedToSelectedItems(tag) ? 'font-bold' : '',
)}
{navigationController.tags.map((tag) => {
const tagTitlePrefix = getTitleForLinkedTag(tag, application)?.titlePrefix
return (
<MenuItem
key={tag.uuid}
onClick={() => {
isTagLinkedToSelectedItems(tag) ? unlinkTagFromSelectedItems(tag) : linkTagToSelectedItems(tag)
}}
>
{getTitleForLinkedTag(tag, application)?.longTitle}
</span>
</MenuItem>
))}
{tag.iconString && (
<Icon
type={tag.iconString as IconType}
size={'custom'}
className={'ml-0.5 mr-1.5 h-7 w-7 text-2xl text-neutral lg:h-6 lg:w-6 lg:text-lg'}
/>
)}
<div>
{!!tagTitlePrefix && (
<p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-neutral">{tagTitlePrefix}</p>
)}
<p
className={classNames(
'overflow-hidden overflow-ellipsis whitespace-nowrap',
isTagLinkedToSelectedItems(tag) ? 'font-bold' : '',
)}
>
{tag.title}
</p>
</div>
</MenuItem>
)
})}
</Menu>
</Popover>
</div>