Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css
View File

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

2
frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css.d.ts vendored
View File

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

19
frontend/src/Series/Index/Select/SeriesIndexPosterSelect.tsx
View File

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