New: Rating votes tooltip and series filter
This commit is contained in:
parent
dca5239420
commit
703dee9383
|
@ -145,6 +145,7 @@ class AddNewSeriesSearchResult extends Component {
|
||||||
<Label size={sizes.LARGE}>
|
<Label size={sizes.LARGE}>
|
||||||
<HeartRating
|
<HeartRating
|
||||||
rating={ratings.value}
|
rating={ratings.value}
|
||||||
|
votes={ratings.votes}
|
||||||
iconSize={13}
|
iconSize={13}
|
||||||
/>
|
/>
|
||||||
</Label>
|
</Label>
|
||||||
|
|
|
@ -1,11 +1,15 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Icon from 'Components/Icon';
|
import Icon from 'Components/Icon';
|
||||||
import { icons } from 'Helpers/Props';
|
import Tooltip from 'Components/Tooltip/Tooltip';
|
||||||
|
import { icons, kinds, tooltipPositions } from 'Helpers/Props';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
import styles from './HeartRating.css';
|
import styles from './HeartRating.css';
|
||||||
|
|
||||||
function HeartRating({ rating, iconSize }) {
|
function HeartRating({ rating, votes, iconSize }) {
|
||||||
return (
|
return (
|
||||||
|
<Tooltip
|
||||||
|
anchor={
|
||||||
<span className={styles.rating}>
|
<span className={styles.rating}>
|
||||||
<Icon
|
<Icon
|
||||||
className={styles.heart}
|
className={styles.heart}
|
||||||
|
@ -15,15 +19,22 @@ function HeartRating({ rating, iconSize }) {
|
||||||
|
|
||||||
{rating * 10}%
|
{rating * 10}%
|
||||||
</span>
|
</span>
|
||||||
|
}
|
||||||
|
tooltip={translate('CountVotes', { votes })}
|
||||||
|
kind={kinds.INVERSE}
|
||||||
|
position={tooltipPositions.TOP}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
HeartRating.propTypes = {
|
HeartRating.propTypes = {
|
||||||
rating: PropTypes.number.isRequired,
|
rating: PropTypes.number.isRequired,
|
||||||
|
votes: PropTypes.number.isRequired,
|
||||||
iconSize: PropTypes.number.isRequired
|
iconSize: PropTypes.number.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
HeartRating.defaultProps = {
|
HeartRating.defaultProps = {
|
||||||
|
votes: 0,
|
||||||
iconSize: 14
|
iconSize: 14
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -412,10 +412,12 @@ class SeriesDetails extends Component {
|
||||||
ratings.value ?
|
ratings.value ?
|
||||||
<HeartRating
|
<HeartRating
|
||||||
rating={ratings.value}
|
rating={ratings.value}
|
||||||
|
votes={ratings.votes}
|
||||||
iconSize={20}
|
iconSize={20}
|
||||||
/> :
|
/> :
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
|
|
||||||
<SeriesGenres genres={genres} />
|
<SeriesGenres genres={genres} />
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
|
|
|
@ -401,7 +401,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
|
||||||
if (name === 'ratings') {
|
if (name === 'ratings') {
|
||||||
return (
|
return (
|
||||||
<VirtualTableRowCell key={name} className={styles[name]}>
|
<VirtualTableRowCell key={name} className={styles[name]}>
|
||||||
<HeartRating rating={ratings.value} />
|
<HeartRating rating={ratings.value} votes={ratings.votes} />
|
||||||
</VirtualTableRowCell>
|
</VirtualTableRowCell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -128,8 +128,16 @@ export const filterPredicates = {
|
||||||
|
|
||||||
ratings: function(item, filterValue, type) {
|
ratings: function(item, filterValue, type) {
|
||||||
const predicate = filterTypePredicates[type];
|
const predicate = filterTypePredicates[type];
|
||||||
|
const { value = 0 } = item.ratings;
|
||||||
|
|
||||||
return predicate(item.ratings.value * 10, filterValue);
|
return predicate(value * 10, filterValue);
|
||||||
|
},
|
||||||
|
|
||||||
|
ratingVotes: function(item, filterValue, type) {
|
||||||
|
const predicate = filterTypePredicates[type];
|
||||||
|
const { votes = 0 } = item.ratings;
|
||||||
|
|
||||||
|
return predicate(votes, filterValue);
|
||||||
},
|
},
|
||||||
|
|
||||||
originalLanguage: function(item, filterValue, type) {
|
originalLanguage: function(item, filterValue, type) {
|
||||||
|
@ -347,6 +355,11 @@ export const filterBuilderProps = [
|
||||||
label: () => translate('Rating'),
|
label: () => translate('Rating'),
|
||||||
type: filterBuilderTypes.NUMBER
|
type: filterBuilderTypes.NUMBER
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'ratingVotes',
|
||||||
|
label: () => translate('RatingVotes'),
|
||||||
|
type: filterBuilderTypes.NUMBER
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'certification',
|
name: 'certification',
|
||||||
label: () => translate('Certification'),
|
label: () => translate('Certification'),
|
||||||
|
|
|
@ -265,6 +265,7 @@
|
||||||
"CountSelectedFile": "{selectedCount} selected file",
|
"CountSelectedFile": "{selectedCount} selected file",
|
||||||
"CountSelectedFiles": "{selectedCount} selected files",
|
"CountSelectedFiles": "{selectedCount} selected files",
|
||||||
"CountSeriesSelected": "{count} series selected",
|
"CountSeriesSelected": "{count} series selected",
|
||||||
|
"CountVotes": "{votes} votes",
|
||||||
"CreateEmptySeriesFolders": "Create Empty Series Folders",
|
"CreateEmptySeriesFolders": "Create Empty Series Folders",
|
||||||
"CreateEmptySeriesFoldersHelpText": "Create missing series folders during disk scan",
|
"CreateEmptySeriesFoldersHelpText": "Create missing series folders during disk scan",
|
||||||
"CreateGroup": "Create Group",
|
"CreateGroup": "Create Group",
|
||||||
|
@ -1585,6 +1586,7 @@
|
||||||
"QuickSearch": "Quick Search",
|
"QuickSearch": "Quick Search",
|
||||||
"Range": "Range",
|
"Range": "Range",
|
||||||
"Rating": "Rating",
|
"Rating": "Rating",
|
||||||
|
"RatingVotes": "Rating Votes",
|
||||||
"ReadTheWikiForMoreInformation": "Read the Wiki for more information",
|
"ReadTheWikiForMoreInformation": "Read the Wiki for more information",
|
||||||
"Real": "Real",
|
"Real": "Real",
|
||||||
"Reason": "Reason",
|
"Reason": "Reason",
|
||||||
|
|
Loading…
Reference in New Issue