Committing to Material icons

This commit is contained in:
James Barnsley
2018-05-16 16:50:46 +12:00
parent c8d0d90d1a
commit eb89ac29ee
25 changed files with 25579 additions and 23662 deletions

View File

@ -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} />&nbsp; </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}

View File

@ -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"

View File

@ -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>

View File

@ -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>;
}
}
}

View File

@ -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" />&nbsp;
<Icon name="keyboard_backspace" />&nbsp;
Back
</button>
</span>

View File

@ -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" />&nbsp;
<Icon name="radio" />&nbsp;
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" />&nbsp;
<Icon name="history" />&nbsp;
History
</button>
<button className="no-hover" onClick={e => {this.props.mopidyActions.clearTracklist(); this.props.uiActions.hideContextMenu();}}>
<FontAwesome name="trash" />&nbsp;
<Icon name="delete_sweep" />&nbsp;
Clear
</button>
<button className="no-hover" onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
<FontAwesome name="plus" />&nbsp;
<Icon name="playlist_add" />&nbsp;
Add URI
</button>
</span>

View File

@ -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" />&nbsp;
<Icon name="keyboard_backspace" />&nbsp;
Back
</button>
</span>

View File

@ -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}

View File

@ -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" />&nbsp;
<Icon name="code" />&nbsp;
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" />&nbsp;
<Icon name="help" />&nbsp;
Help
</a>
</span>

View File

@ -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}

View File

@ -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}

View File

@ -110,11 +110,11 @@ class LibraryBrowse extends React.Component{
var options = (
<span>
<button className="no-hover" onClick={e => this.playAll(e)}>
<FontAwesome name="play" />&nbsp;
<Icon name="play_circle_filled" />&nbsp;
Play all
</button>
<button className="no-hover" onClick={e => this.goBack(e)}>
<FontAwesome name="reply" />&nbsp;
<Icon name="keyboard_backspace" />&nbsp;
Back
</button>
</span>

View File

@ -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" />&nbsp;
<Icon name="add" />
New
</button>
</span>

View File

@ -66,7 +66,7 @@ class LibraryTracks extends React.Component{
var options = (
<span>
<button className="no-hover" onClick={e => this.playAll(e)}>
<FontAwesome name="play" />&nbsp;
<Icon name="play_circle_filled" />&nbsp;
Play all
</button>
</span>