TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Added a label to the SortMenu component to make it more explicit (#19171)

Browse Source 
fixes ADM-21
This commit is contained in:
Sodbileg Gansukh 2023-11-29 20:12:02 +08:00 committed by GitHub
parent 2f43f58010
commit 614574a44d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/admin-x-design-system/src/global/SortMenu.tsx
View File

@ -65,18 +65,21 @@ const SortMenu: React.FC<SortMenuProps> = ({
return (
<Popover position={position} trigger={trigger}>
<div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
{localItems.map(item => (
<button key={item.id} className="group relative mx-1 flex grow cursor-pointer items-center rounded-[2.5px] px-8 py-1.5 pr-12 text-left text-sm hover:bg-grey-100 dark:hover:bg-grey-800" type="button" onClick={() => {
handleSortChange(item.id);
}}>
{item.selected ? <Icon className='absolute left-2' name='check' size='xs' /> : null}
{item.label}
{item.selected ? <button className='absolute right-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full hover:bg-grey-300' title={`${localDirection === 'asc' ? 'Ascending' : 'Descending'}`} type='button' onClick={handleSortDirection}>
{localDirection === 'asc' ? <Icon name='arrow-up' size='xs' /> : <Icon name='arrow-down' size='xs' />}
</button> : null}
</button>
))}
<div className='flex flex-col'>
<div className='cursor-default select-none border-b border-b-grey-200 p-2 pl-3 text-sm font-semibold'>Sort by</div>
<div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
{localItems.map(item => (
<button key={item.id} className="group relative mx-1 flex grow cursor-pointer items-center rounded-[2.5px] px-8 py-1.5 pr-12 text-left text-sm hover:bg-grey-100 dark:hover:bg-grey-800" type="button" onClick={() => {
handleSortChange(item.id);
}}>
{item.selected ? <Icon className='absolute left-2' name='check' size='xs' /> : null}
{item.label}
{item.selected ? <button className='absolute right-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full hover:bg-grey-300' title={`${localDirection === 'asc' ? 'Ascending' : 'Descending'}`} type='button' onClick={handleSortDirection}>
{localDirection === 'asc' ? <Icon name='arrow-up' size='xs' /> : <Icon name='arrow-down' size='xs' />}
</button> : null}
</button>
))}
</div>
</div>
</Popover>
);