secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Popularity for responsive; Sources UI more intuitive; Artist bug when sorting albums duplicated URIs

Browse Source
This commit is contained in:
James Barnsley
2018-06-17 13:27:01 +12:00
parent 2837486aef
commit f00582259f
12 changed files with 217 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/components/Fields/SourcesPriority.js
View File

@ -45,6 +45,7 @@ export default class SourcesPriority extends React.Component{
return (
<span className="source flag grey" key={scheme} data-id={scheme}>
<Icon name="drag_indicator" />
{name}
</span>
);

2
src/js/components/List.js
View File

@ -9,6 +9,7 @@ import Dater from './Dater'
import URILink from './URILink'
import ContextMenuTrigger from './ContextMenuTrigger'
import Icon from './Icon'
import Popularity from './Popularity'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
@ -77,6 +78,7 @@ class List extends React.Component{
if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
if (key_string === 'popularity') return <Popularity full popularity={value} />
if (key[0] === 'artists') return <ArtistSentence artists={value} />
if (value === true) return <Icon name="check" />
if (typeof(value) === 'number') return <span>{value.toLocaleString()}</span>

17
src/js/components/Popularity.js
View File

@ -15,12 +15,17 @@ export default class Popularity extends React.Component{
}
return (
<span className="popularity-diagram">
<span className={"bar"+(this.props.popularity > 10 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 30 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 50 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 70 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 90 ? " filled" : "")}></span>
<span className="popularity">
<span className="popularity-bars">
<span className={"bar"+(this.props.popularity > 10 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 30 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 50 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 70 ? " filled" : "")}></span>
<span className={"bar"+(this.props.popularity > 90 ? " filled" : "")}></span>
</span>
<span className="popularity-value">
{this.props.popularity}% popularity
</span>
</span>
);
}