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

Allow selection of the bottom edit labels footer

Browse source
This commit is contained in:
Jackson Harper 2022-04-11 13:05:26 -07:00
parent 4888c75b9a
commit 9f02f3ec15
1 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
packages/web/components/templates/article/EditLabelsControl.tsx
View file

@ -43,9 +43,6 @@ const FormInput = styled('input', {
const StyledLabel = styled('label', {
display: 'flex',
justifyContent: 'flex-start',
'&:focus': {
bg: '$grayBgActive',
},
})
function Header(props: HeaderProps): JSX.Element {
@ -149,6 +146,39 @@ function LabelListItem(props: LabelListItemProps): JSX.Element {
)
}
type EditLabelsButtonFooterProps = {
focused: boolean
}
function EditLabelsButtonFooter(props: EditLabelsButtonFooterProps): JSX.Element {
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
if (props.focused && ref.current) {
ref.current.focus()
}
}, [props.focused])
return (
<HStack
ref={ref}
distribution="start" alignment="center" css={{
ml: '20px', gap: '8px', width: '100%', fontSize: '12px', p: '8px', height: '42px',
bg: props.focused ? '$grayBgActive' : 'unset',
'a:link': {
textDecoration: 'none',
},
'a:visited': {
color: theme.colors.grayText.toString(),
},
}}
>
<PencilSimple size={18} color={theme.colors.grayText.toString()} />
<Link href="/settings/labels">Edit labels</Link>
</HStack>
)
}
export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
const [filterText, setFilterText] = useState('')
const { labels } = useGetLabelsQuery()
@ -211,7 +241,6 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
} else {
setFocusedIndex(Math.min(maxIndex, focusedIndex + 1))
}
console.log('focusedIndex', focusedIndex)
}
if (event.key === 'Enter') {
event.preventDefault()
@ -275,19 +304,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
</Button>
)}
<HStack distribution="start" alignment="center" css={{
ml: '20px', gap: '8px', width: '100%', fontSize: '12px', p: '8px', height: '42px',
'a:link': {
textDecoration: 'none',
},
'a:visited': {
color: theme.colors.grayText.toString(),
},
}}
>
<PencilSimple size={18} color={theme.colors.grayText.toString()} />
<Link href="/settings/labels">Edit labels</Link>
</HStack>
<EditLabelsButtonFooter focused={focusedIndex === (filteredLabels.length + 1)} />
</VStack>
)
}