Committing to Material icons
This commit is contained in:
@ -4,6 +4,8 @@ import { connect } from 'react-redux'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
|
||||
import Icon from '../Icon';
|
||||
|
||||
export default class DropdownField extends React.Component{
|
||||
|
||||
constructor(props){
|
||||
@ -107,9 +109,9 @@ export default class DropdownField extends React.Component{
|
||||
current_value = this.props.options[0].value;
|
||||
}
|
||||
|
||||
var selected_icon = <FontAwesome name="check" />
|
||||
var selected_icon = <Icon name="check" />
|
||||
if (this.props.selected_icon){
|
||||
selected_icon = <FontAwesome name={this.props.selected_icon} />
|
||||
selected_icon = <Icon name={this.props.selected_icon} />
|
||||
}
|
||||
|
||||
var options = Object.assign([], this.props.options);
|
||||
@ -124,7 +126,7 @@ export default class DropdownField extends React.Component{
|
||||
return (
|
||||
<div className={className} data-uid={this.uid}>
|
||||
<div className={"label"+(this.props.button ? " button "+this.props.button : "")} onClick={e => this.setExpanded()}>
|
||||
{this.props.icon ? <span><FontAwesome name={this.props.icon} /> </span> : null}
|
||||
{this.props.icon ? <Icon name={this.props.icon} type={this.props.icon_type ? this.props.icon_type : "material"} /> : null}
|
||||
<span className="text">
|
||||
{this.props.name}
|
||||
{this.isMultiSelect() ? ' ('+current_value.length+')' : null}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import FontAwesome from 'react-fontawesome'
|
||||
|
||||
import Icon from '../Icon';
|
||||
|
||||
export default class FilterField extends React.Component{
|
||||
|
||||
@ -58,7 +59,7 @@ export default class FilterField extends React.Component{
|
||||
return (
|
||||
<span className={"filter-field "+(this.state.active ? 'active' : '')} onClick={e => this.activate()}>
|
||||
<form>
|
||||
<FontAwesome name="search" />
|
||||
<Icon name="search" type="material" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter"
|
||||
|
||||
@ -128,10 +128,10 @@ class PlaybackControls extends React.Component{
|
||||
|
||||
<section className="triggers">
|
||||
<a className="control expanded-controls" onClick={() => this.setState({expanded: !this.state.expanded})}>
|
||||
{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
|
||||
{this.state.expanded ? <Icon name="expand_more" type="material" /> : <Icon name="expand_less" type="material" />}
|
||||
</a>
|
||||
<a className={"control sidebar-toggle"+(this.props.sidebar_open ? ' open' : '')} onClick={() => this.props.uiActions.toggleSidebar()}>
|
||||
<Icon className="open" name="bars" type="fontawesome" />
|
||||
<Icon className="open" name="menu" type="material" />
|
||||
</a>
|
||||
</section>
|
||||
|
||||
|
||||
@ -15,16 +15,12 @@ export default class Icon extends React.Component{
|
||||
}
|
||||
|
||||
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>;
|
||||
className += ' material-icon';
|
||||
return <i className={className}>{this.props.name}</i>;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -50,7 +50,7 @@ class Debug extends React.Component{
|
||||
var options = (
|
||||
<span>
|
||||
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'settings')}>
|
||||
<FontAwesome name="reply" />
|
||||
<Icon name="keyboard_backspace" />
|
||||
Back
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -141,20 +141,20 @@ class Queue extends React.Component{
|
||||
var options = (
|
||||
<span>
|
||||
{this.props.spotify_enabled ? <button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
|
||||
<Icon name="broadcast" />
|
||||
<Icon name="radio" />
|
||||
Radio
|
||||
{this.props.radio && this.props.radio.enabled ? <span className="flag blue">On</span> : null}
|
||||
</button> : null}
|
||||
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'queue/history')}>
|
||||
<FontAwesome name="history" />
|
||||
<Icon name="history" />
|
||||
History
|
||||
</button>
|
||||
<button className="no-hover" onClick={e => {this.props.mopidyActions.clearTracklist(); this.props.uiActions.hideContextMenu();}}>
|
||||
<FontAwesome name="trash" />
|
||||
<Icon name="delete_sweep" />
|
||||
Clear
|
||||
</button>
|
||||
<button className="no-hover" onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
|
||||
<FontAwesome name="plus" />
|
||||
<Icon name="playlist_add" />
|
||||
Add URI
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -40,7 +40,7 @@ class QueueHistory extends React.Component{
|
||||
var options = (
|
||||
<span>
|
||||
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'queue')}>
|
||||
<FontAwesome name="reply" />
|
||||
<Icon name="keyboard_backspace" />
|
||||
Back
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -340,7 +340,7 @@ class Search extends React.Component{
|
||||
var options = (
|
||||
<span>
|
||||
<DropdownField
|
||||
icon="sort"
|
||||
icon="filter_list"
|
||||
name="Sort"
|
||||
value={this.props.sort}
|
||||
options={sort_options}
|
||||
@ -348,7 +348,7 @@ class Search extends React.Component{
|
||||
handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu()}}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="database"
|
||||
icon="cloud"
|
||||
name="Sources"
|
||||
value={this.props.search_uri_schemes}
|
||||
options={provider_options}
|
||||
|
||||
@ -132,12 +132,12 @@ class Settings extends React.Component {
|
||||
var options = (
|
||||
<span>
|
||||
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'settings/debug')}>
|
||||
<FontAwesome name="flask" />
|
||||
<Icon name="code" />
|
||||
Debug
|
||||
{this.props.ui && this.props.ui.test_mode ? <span className="flag warning">Test mode</span> : null}
|
||||
</button>
|
||||
<a className="no-hover button" href="https://github.com/jaedb/Iris/wiki" target="_blank">
|
||||
<FontAwesome name="question" />
|
||||
<Icon name="help" />
|
||||
Help
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@ -255,18 +255,18 @@ class LibraryAlbums extends React.Component{
|
||||
name="Sort"
|
||||
value={this.props.sort}
|
||||
options={sort_options}
|
||||
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
|
||||
selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
|
||||
handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="eye"
|
||||
icon="visibility"
|
||||
name="View"
|
||||
value={this.props.view}
|
||||
options={view_options}
|
||||
handleChange={val => {this.props.uiActions.set({ library_albums_view: val }); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="database"
|
||||
icon="cloud"
|
||||
name="Source"
|
||||
value={this.props.source}
|
||||
options={source_options}
|
||||
|
||||
@ -221,20 +221,20 @@ class LibraryArtists extends React.Component{
|
||||
<DropdownField
|
||||
icon="sort"
|
||||
name="Sort"
|
||||
value={ this.props.sort }
|
||||
value={this.props.sort}
|
||||
options={sort_options}
|
||||
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
|
||||
selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
|
||||
handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="eye"
|
||||
icon="visibility"
|
||||
name="View"
|
||||
value={ this.props.view }
|
||||
value={this.props.view}
|
||||
options={view_options}
|
||||
handleChange={value => {this.props.uiActions.set({ library_artists_view: value }); this.props.uiActions.hideContextMenu()}}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="database"
|
||||
icon="cloud"
|
||||
name="Source"
|
||||
value={this.props.source}
|
||||
options={source_options}
|
||||
|
||||
@ -110,11 +110,11 @@ class LibraryBrowse extends React.Component{
|
||||
var options = (
|
||||
<span>
|
||||
<button className="no-hover" onClick={e => this.playAll(e)}>
|
||||
<FontAwesome name="play" />
|
||||
<Icon name="play_circle_filled" />
|
||||
Play all
|
||||
</button>
|
||||
<button className="no-hover" onClick={e => this.goBack(e)}>
|
||||
<FontAwesome name="reply" />
|
||||
<Icon name="keyboard_backspace" />
|
||||
Back
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -243,25 +243,25 @@ class LibraryPlaylists extends React.Component{
|
||||
name="Sort"
|
||||
value={this.props.sort}
|
||||
options={sort_options}
|
||||
selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'}
|
||||
selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
|
||||
handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="eye"
|
||||
icon="visibility"
|
||||
name="View"
|
||||
value={this.props.view}
|
||||
options={view_options}
|
||||
handleChange={value => {this.props.uiActions.set({ library_playlists_view: value}); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<DropdownField
|
||||
icon="database"
|
||||
icon="cloud"
|
||||
name="Source"
|
||||
value={this.props.source}
|
||||
options={source_options}
|
||||
handleChange={value => {this.props.uiActions.set({ library_playlists_source: value}); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
|
||||
<FontAwesome name="plus" />
|
||||
<Icon name="add" />
|
||||
New
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -66,7 +66,7 @@ class LibraryTracks extends React.Component{
|
||||
var options = (
|
||||
<span>
|
||||
<button className="no-hover" onClick={e => this.playAll(e)}>
|
||||
<FontAwesome name="play" />
|
||||
<Icon name="play_circle_filled" />
|
||||
Play all
|
||||
</button>
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user