New: Increase clickable area of series select in poster/overview

This commit is contained in:
Mark McDowall 2023-02-13 17:26:32 -08:00
parent 279d3a89b6
commit 57a64b056a
3 changed files with 32 additions and 27 deletions

View File

@ -1,36 +1,38 @@
.checkButton {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 36px;
height: 36px;
}
.checkContainer {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
top: 8px;
left: 8px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--defaultColor);
}
.icon {
position: absolute;
top: -1px;
left: -1px;
}
.selected {
composes: icon;
color: var(--sonarrBlue);
&:hover {
color: var(--white);
}
}
.unselected {
composes: icon;
color: var(--white);
}
.checkButton {
&:hover {
.selected {
color: var(--white);
}
.unselected {
color: var(--sonarrBlue);
}
}
}

View File

@ -1,8 +1,8 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'checkButton': string;
'checkContainer': string;
'icon': string;
'selected': string;
'unselected': string;
}

View File

@ -1,6 +1,7 @@
import React, { useCallback } from 'react';
import { SelectActionType, useSelect } from 'App/SelectContext';
import IconButton from 'Components/Link/IconButton';
import Icon from 'Components/Icon';
import Link from 'Components/Link/Link';
import { icons } from 'Helpers/Props';
import styles from './SeriesIndexPosterSelect.css';
@ -28,13 +29,15 @@ function SeriesIndexPosterSelect(props: SeriesIndexPosterSelectProps) {
);
return (
<IconButton
className={styles.checkContainer}
iconClassName={isSelected ? styles.selected : styles.unselected}
<Link className={styles.checkButton} onPress={onSelectPress}>
<span className={styles.checkContainer}>
<Icon
className={isSelected ? styles.selected : styles.unselected}
name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
size={20}
onPress={onSelectPress}
/>
</span>
</Link>
);
}