github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-15 01:23:53 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

New: Add Star Rating to Album table (#365)

Browse source
This commit is contained in:
Qstick 2018-05-24 23:55:14 -04:00 • committed by GitHub
parent 73157534e0
commit 18b29f8208
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 102 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/Components/StarRating.css Normal file
View file

@ -0,0 +1,19 @@
.starRating {
display: flex;
align-items: center;
justify-content: center;
}
.backStar {
position: relative;
display: flex;
color: #515253;
}
.frontStar {
position: absolute;
top: 0;
display: flex;
overflow: hidden;
color: #ffbc0b;
}

44
frontend/src/Components/StarRating.js Normal file
View file

@ -0,0 +1,44 @@
import PropTypes from 'prop-types';
import React from 'react';
import { icons } from 'Helpers/Props';
import Icon from 'Components/Icon';
import styles from './StarRating.css';
function StarRating({ rating, votes, iconSize }) {
const starWidth = {
width: `${rating * 10}%`
};
const helpText = `${rating/2} (${votes} Votes)`;
return (
<span className={styles.starRating} title={helpText}>
<div className={styles.backStar}>
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<div className={styles.frontStar} style={starWidth}>
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
<Icon name={icons.STAR_FULL} size={iconSize} />
</div>
</div>
</span>
);
}
StarRating.propTypes = {
rating: PropTypes.number.isRequired,
votes: PropTypes.number.isRequired,
iconSize: PropTypes.number.isRequired
};
StarRating.defaultProps = {
iconSize: 14
};
export default StarRating;