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

Material icons

Browse Source
This commit is contained in:
James Barnsley
2018-05-15 21:30:57 +12:00
parent 9d398e53c9
commit c8d0d90d1a
105 changed files with 1351 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/js/components/Fields/PlaybackControls.js
View File

@ -28,33 +28,33 @@ class PlaybackControls extends React.Component{
}
renderPlayButton(){
var button = <a className="control play" onClick={() => this.props.mopidyActions.play()}><Icon name="play" /></a>
var button = <a className="control play" onClick={() => this.props.mopidyActions.play()}><Icon name="play_circle_filled" type="material" /></a>
if (this.props.play_state == 'playing'){
button = <a className="control play" onClick={() => this.props.mopidyActions.pause()}><Icon name="pause" /></a>
button = <a className="control play" onClick={() => this.props.mopidyActions.pause()}><Icon name="pause_circle_filled" type="material" /></a>
}
return button;
}
renderConsumeButton(){
var button = <a className="control has-tooltip" onClick={() => this.props.mopidyActions.setConsume(true)}><FontAwesome name="fire" /><span className="tooltip">Consume</span></a>
var button = <a className="control has-tooltip" onClick={() => this.props.mopidyActions.setConsume(true)}><Icon name="restaurant" type="material" /><span className="tooltip">Consume</span></a>
if (this.props.consume){
button = <a className="control active has-tooltip" onClick={() => this.props.mopidyActions.setConsume(false)}><FontAwesome name="fire" /><span className="tooltip">Consume</span></a>
button = <a className="control active has-tooltip" onClick={() => this.props.mopidyActions.setConsume(false)}><Icon name="restaurant" type="material" /><span className="tooltip">Consume</span></a>
}
return button;
}
renderRandomButton(){
var button = <a className="control has-tooltip" onClick={() => this.props.mopidyActions.setRandom(true)}><FontAwesome name="random" /><span className="tooltip">Shuffle</span></a>
var button = <a className="control has-tooltip" onClick={() => this.props.mopidyActions.setRandom(true)}><Icon name="shuffle" type="material" /><span className="tooltip">Shuffle</span></a>
if (this.props.random){
button = <a className="control active has-tooltip" onClick={() => this.props.mopidyActions.setRandom(false)}><FontAwesome name="random" /><span className="tooltip">Shuffle</span></a>
button = <a className="control active has-tooltip" onClick={() => this.props.mopidyActions.setRandom(false)}><Icon name="shuffle" type="material" /><span className="tooltip">Shuffle</span></a>
}
return button;
}
renderRepeatButton(){
var button = <a className="control has-tooltip" onClick={() => this.props.mopidyActions.setRepeat(true)}><FontAwesome name="repeat" /><span className="tooltip">Repeat</span></a>
var button = <a className="control has-tooltip" onClick={() => this.props.mopidyActions.setRepeat(true)}><Icon name="repeat" /><span className="tooltip">Repeat</span></a>
if (this.props.repeat){
button = <a className="control active has-tooltip" onClick={() => this.props.mopidyActions.setRepeat(false)}><FontAwesome name="repeat" /><span className="tooltip">Repeat</span></a>
button = <a className="control active has-tooltip" onClick={() => this.props.mopidyActions.setRepeat(false)}><Icon name="repeat" /><span className="tooltip">Repeat</span></a>
}
return button;
}
@ -93,14 +93,14 @@ class PlaybackControls extends React.Component{
<section className="playback">
<a className="control previous" onClick={() => this.props.mopidyActions.previous()}>
<Icon name="back" />
<Icon name="skip_previous" type="material" />
</a>
{ this.renderPlayButton() }
<a className="control stop" onClick={() => this.props.mopidyActions.stop()}>
<Icon name="stop" />
<Icon name="stop" type="material" />
</a>
<a className="control next" onClick={() => this.props.mopidyActions.next()}>
<Icon name="skip" />
<Icon name="skip_next" type="material" />
</a>
</section>
@ -131,7 +131,7 @@ class PlaybackControls extends React.Component{
{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
</a>
<a className={"control sidebar-toggle"+(this.props.sidebar_open ? ' open' : '')} onClick={() => this.props.uiActions.toggleSidebar()}>
<FontAwesome className="open" name="bars" />
<Icon className="open" name="bars" type="fontawesome" />
</a>
</section>

3
src/js/components/Header.js
View File

@ -63,8 +63,7 @@ export default class Header extends React.Component{
return (
<header className={(this.props.className ? this.props.className : null)}>
<h1>
{this.props.icon ? <i className={"icon header-icon icon-"+this.props.icon}></i> : null}
{this.props.title ? this.props.title : null}
{this.props.children ? this.props.children : null}
</h1>
{this.renderOptions()}
</header>

16
src/js/components/Icon.js
View File

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import FontAwesome from 'react-fontawesome';
export default class Icon extends React.Component{
@ -8,11 +9,22 @@ export default class Icon extends React.Component{
}
render(){
var className = 'icon icon-'+this.props.name;
var className = "icon";
if (this.props.className){
className += ' '+this.props.className;
}
return <i className={className}></i>;
switch (this.props.type){
case 'material':
className += ' material-icon';
return <i className={className}>{this.props.name}</i>;
case 'fontawesome':
return <FontAwesome name={this.props.name} />;
default:
className += ' icon-'+this.props.name;
return <i className={className}></i>;
}
}
}

24
src/js/components/Sidebar.js
View File

@ -34,11 +34,11 @@ class Sidebar extends React.Component{
<section>
<Link className={this.linkClassName('queue')} to={global.baseURL+"queue"}>
<Icon name="play" />
<Icon name="play_arrow" type="material" />
Now playing
</Link>
<Link className={this.linkClassName('search')} to={global.baseURL+"search"}>
<Icon name="search" />
<Icon name="search" type="material" />
Search
</Link>
</section>
@ -46,19 +46,19 @@ class Sidebar extends React.Component{
{this.props.spotify_enabled ? <section>
<title>Discover</title>
<Link className={this.linkClassName('discover/recommendations')} to={global.baseURL+"discover/recommendations"}>
<Icon name="compass" />
<Icon name="explore" type="material" />
Discover
</Link>
<Link className={this.linkClassName('discover/categories')} to={global.baseURL+"discover/categories"}>
<Icon name="grid" />
<Icon name="mood" type="material" />
Genre / Mood
</Link>
<Link className={this.linkClassName('discover/featured')} to={global.baseURL+"discover/featured"}>
<Icon name="star" />
<Icon name="star" type="material" />
Featured playlists
</Link>
<Link className={this.linkClassName('discover/new-releases')} to={global.baseURL+"discover/new-releases"}>
<Icon name="leaf" />
<Icon name="new_releases" type="material" />
New releases
</Link>
</section> : null}
@ -66,30 +66,30 @@ class Sidebar extends React.Component{
<section>
<title>My Music</title>
<Link className={this.linkClassName('library/playlists')} to={global.baseURL+"library/playlists"}>
<Icon name="playlist" />
<Icon name="queue_music" type="material" />
Playlists
</Link>
<Link className={this.linkClassName('library/artists')} to={global.baseURL+"library/artists"}>
<Icon name="mic" />
<Icon name="recent_actors" type="material" />
Artists
</Link>
<Link className={this.linkClassName('library/albums')} to={global.baseURL+"library/albums"}>
<Icon name="cd" />
<Icon name="album" type="material" />
Albums
</Link>
<Link className={this.linkClassName('library/tracks')} to={global.baseURL+"library/tracks"}>
<Icon name="music" />
<Icon name="music_note" type="material" />
Tracks
</Link>
<Link className={this.linkClassName('library/browse')} to={global.baseURL+"library/browse"}>
<Icon name="folder" />
<Icon name="folder" type="material" />
Browse
</Link>
</section>
<section>
<Link className={this.linkClassName('settings')} to={global.baseURL+"settings"}>
<Icon name="cog" />
<Icon name="settings" type="material" />
Settings
{this.props.test_mode ? <span className="status has-tooltip right-tooltip"><FontAwesome name="info-circle" className="orange-text" /><span className="tooltip">Test mode active</span></span>: null}
{!this.props.mopidy_connected || !this.props.pusher_connected ? <span className="status has-tooltip right-tooltip"><FontAwesome name="exclamation-triangle" className="red-text" /><span className="tooltip">{!this.props.mopidy_connected ? <span>Mopidy not connected<br /></span> : null}{!this.props.pusher_connected ? <span>Pusher not connected<br /></span> : null}</span></span> : null}