prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve keyboard control messaging in the label selector

Browse source
This commit is contained in:
Jackson Harper 2023-06-21 20:22:47 +08:00
parent e540c57da4
commit 82e4ecd524
1 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/web/components/templates/article/SetLabelsControl.tsx
View file

@ -172,6 +172,8 @@ function LabelListItem(props: LabelListItemProps): JSX.Element {
type FooterProps = {
focused: boolean
filterText: string
selectedLabels: Label[]
availableLabels: Label[]
}
function Footer(props: FooterProps): JSX.Element {
@ -183,6 +185,20 @@ function Footer(props: FooterProps): JSX.Element {
}
}, [props.focused])
const textMatch: 'selected' | 'available' | 'none' = useMemo(() => {
const findLabel = (l: Label) =>
l.name.toLowerCase() == props.filterText.toLowerCase()
const available = props.availableLabels.find(findLabel)
const selected = props.selectedLabels.find(findLabel)
if (available && !selected) {
return 'available'
}
if (selected) {
return 'selected'
}
return 'none'
}, [props])
return (
<HStack
ref={ref}
@ -214,11 +230,24 @@ function Footer(props: FooterProps): JSX.Element {
}}
// onClick={createLabelFromFilterText}
>
<HStack alignment="center" distribution="start" css={{ gap: '8px' }}>
<Plus size={18} color={theme.colors.grayText.toString()} />
<SpanBox
css={{ fontSize: '12px' }}
>{`Use Enter to create new label "${props.filterText}"`}</SpanBox>
<HStack
alignment="center"
distribution="start"
css={{ gap: '8px', fontSize: '12px' }}
>
{textMatch === 'available' && (
<>
<Check size={18} color={theme.colors.grayText.toString()} />
Use Enter to add label "{props.filterText}"
</>
)}
{textMatch === 'none' && (
<>
<Plus size={18} color={theme.colors.grayText.toString()} />
Use Enter to create new label "{props.filterText}"
</>
)}
</HStack>
</Button>
) : (
@ -447,6 +476,8 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
) : (
<Footer
filterText={inputValue}
selectedLabels={props.selectedLabels}
availableLabels={labels}
focused={focusedIndex === filteredLabels.length + 1}
/>
)}