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

Implement labelFor on label filters so the whole area can be clicked

Browse source
This commit is contained in:
Jackson Harper 2023-03-06 12:39:41 +08:00
parent 8a27a50eb5
commit 6df0780244
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
View file

@ -286,6 +286,7 @@ type LabelButtonProps = {
}
function LabelButton(props: LabelButtonProps): JSX.Element {
const labelId = `checkbox-label-${props.label.id}`
const state = useMemo(() => {
const term = props.searchTerm ?? ''
if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) {
@ -316,14 +317,17 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
alignment="center"
distribution="start"
>
<Circle size={9} color={props.label.color} weight="fill" />
<SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
<label htmlFor={labelId} style={{ width: '100%' }}>
<Circle size={9} color={props.label.color} weight="fill" />
<SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
</label>
<SpanBox
css={{
ml: 'auto',
}}
>
<input
id={labelId}
type="checkbox"
checked={state === 'on'}
onChange={(e) => {