Material icons

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

View File

@ -7,6 +7,7 @@ import FontAwesome from 'react-fontawesome'
import Header from '../components/Header'
import Thumbnail from '../components/Thumbnail'
import Icon from '../components/Icon'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
@ -57,7 +58,10 @@ class Debug extends React.Component{
return (
<div className="view debugger-view">
<Header icon="cog" title="Debugger" options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="settings" type="material" />
Debug
</Header>
<div className="content-wrapper">

View File

@ -162,7 +162,10 @@ class Queue extends React.Component{
return (
<div className="view queue-view">
<Header icon="play" className="overlay" title="Now playing" options={options} uiActions={this.props.uiActions} />
<Header className="overlay" options={options} uiActions={this.props.uiActions}>
<Icon name="play_arrow" type="material" />
Now playing
</Header>
<Parallax blur image={current_track_image} />
<div className="content-wrapper">

View File

@ -7,6 +7,7 @@ import FontAwesome from 'react-fontawesome'
import TrackList from '../components/TrackList'
import Header from '../components/Header'
import Icon from '../components/Icon'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
@ -47,7 +48,10 @@ class QueueHistory extends React.Component{
return (
<div className="view queue-history-view">
<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="play_arrow" type="material" />
Playback history
</Header>
<section className="content-wrapper">
<TrackList
className="queue-history-track-list"

View File

@ -7,6 +7,7 @@ import FontAwesome from 'react-fontawesome'
import ReactGA from 'react-ga'
import Header from '../components/Header'
import Icon from '../components/Icon'
import DropdownField from '../components/Fields/DropdownField'
import TrackList from '../components/TrackList'
import ArtistGrid from '../components/ArtistGrid'
@ -358,11 +359,9 @@ class Search extends React.Component{
return (
<div className="view search-view">
<Header
icon="search"
options={options}
uiActions={this.props.uiActions}
/>
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="search" type="material" />
</Header>
<SearchForm
query={(this.props.params.query ? this.props.params.query : '')}

View File

@ -158,7 +158,10 @@ class Settings extends React.Component {
return (
<div className="view settings-view">
<Header className="overlay" icon="cog" title="Settings" options={options} uiActions={this.props.uiActions} />
<Header className="overlay" options={options} uiActions={this.props.uiActions}>
<Icon name="settings" type="material" />
Settings
</Header>
<div className="intro">
<div className="liner">

View File

@ -4,7 +4,9 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Header from '../../components/Header'
import Icon from '../../components/Icon'
import CategoryGrid from '../../components/CategoryGrid'
import * as helpers from '../../helpers'
import * as spotifyActions from '../../services/spotify/actions'
@ -44,7 +46,10 @@ class DiscoverCategories extends React.Component{
return (
<div className="view discover-categories-view">
<Header icon="grid" title="Genre / Mood" />
<Header>
<Icon name="mood" type="material" />
Genre / Mood
</Header>
<section className="content-wrapper grid-wrapper">
<CategoryGrid categories={categories} />
</section>

View File

@ -4,8 +4,10 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Header from '../../components/Header'
import Icon from '../../components/Icon'
import PlaylistGrid from '../../components/PlaylistGrid'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as helpers from '../../helpers'
import * as spotifyActions from '../../services/spotify/actions'
@ -46,7 +48,10 @@ class DiscoverCategory extends React.Component{
if (helpers.isLoading(this.props.load_queue,['spotify_browse/categories/'])){
return (
<div className="view discover-categories-view">
<Header icon="grid" title={(this.props.category ? this.props.category.name : 'Category')} />
<Header>
<Icon name="mood" type="material" />
{(this.props.category ? this.props.category.name : 'Category')}
</Header>
<div className="body-loader loading">
<div className="loader"></div>
</div>
@ -70,7 +75,10 @@ class DiscoverCategory extends React.Component{
return (
<div className="view discover-categories-view">
<Header icon="grid" title={this.props.category.name} />
<Header>
<Icon name="mood" type="material" />
{this.props.category.name}
</Header>
<div className="content-wrapper">
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />

View File

@ -6,6 +6,7 @@ import { Link } from 'react-router'
import PlaylistGrid from '../../components/PlaylistGrid'
import Header from '../../components/Header'
import Icon from '../../components/Icon'
import Parallax from '../../components/Parallax'
import Thumbnail from '../../components/Thumbnail'
@ -75,7 +76,10 @@ class DiscoverFeatured extends React.Component{
if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){
return (
<div className="view discover-featured-view">
<Header icon="star" title="Featured playlists" />
<Header className="overlay">
<Icon name="star" type="material" />
Featured playlists
</Header>
<div className="body-loader loading">
<div className="loader"></div>
</div>
@ -101,7 +105,10 @@ class DiscoverFeatured extends React.Component{
return (
<div className="view discover-featured-view">
<Header className="overlay" icon="star" title="Featured playlists" />
<Header className="overlay">
<Icon name="star" type="material" />
Featured playlists
</Header>
{this.renderIntro(first_playlist)}
<section className="content-wrapper grid-wrapper">
{playlists ? <PlaylistGrid playlists={playlists} /> : null }

View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import Header from '../../components/Header'
import Icon from '../../components/Icon'
import AlbumGrid from '../../components/AlbumGrid'
import Parallax from '../../components/Parallax'
import Thumbnail from '../../components/Thumbnail'
@ -92,7 +93,10 @@ class DiscoverNewReleases extends React.Component{
if (helpers.isLoading(this.props.load_queue,['spotify_browse/new-releases'])){
return (
<div className="view discover-new-releases-view">
<Header icon="leaf" title="New Releases" />
<Header>
<Icon name="new_releases" type="material" />
New releases
</Header>
<div className="body-loader loading">
<div className="loader"></div>
</div>
@ -118,7 +122,10 @@ class DiscoverNewReleases extends React.Component{
return (
<div className="view discover-new-releases-view">
<Header className="overlay" icon="leaf" title="New Releases" />
<Header className="overlay">
<Icon name="new_releases" type="material" />
New releases
</Header>
{this.renderIntro(first_album)}
<section className="content-wrapper grid-wrapper">
<AlbumGrid albums={albums} />

View File

@ -13,6 +13,7 @@ import ArtistSentence from '../../components/ArtistSentence'
import DropdownField from '../../components/Fields/DropdownField'
import FilterField from '../../components/Fields/FilterField'
import LazyLoadListener from '../../components/LazyLoadListener'
import Icon from '../../components/Icon'
import * as helpers from '../../helpers'
import * as coreActions from '../../services/core/actions'
@ -276,7 +277,10 @@ class LibraryAlbums extends React.Component{
return (
<div className="view library-albums-view">
<Header icon="cd" title="My albums" options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="album" type="material" />
My albums
</Header>
{this.renderView()}
</div>
);

View File

@ -10,6 +10,7 @@ import List from '../../components/List'
import DropdownField from '../../components/Fields/DropdownField'
import FilterField from '../../components/Fields/FilterField'
import LazyLoadListener from '../../components/LazyLoadListener'
import Icon from '../../components/Icon'
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
@ -244,7 +245,10 @@ class LibraryArtists extends React.Component{
return (
<div className="view library-artists-view">
<Header icon="mic" title="My artists" options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="recent_actors" type="material" />
My artists
</Header>
{this.renderView()}
</div>
);

View File

@ -9,6 +9,7 @@ import Header from '../../components/Header'
import List from '../../components/List'
import TrackList from '../../components/TrackList'
import GridItem from '../../components/GridItem'
import Icon from '../../components/Icon'
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
@ -121,7 +122,10 @@ class LibraryBrowse extends React.Component{
return (
<div className="view library-local-view">
<Header icon="music" title={title} options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="folder" type="material" />
{title}
</Header>
<section className="content-wrapper">
<List
nocontext
@ -199,7 +203,10 @@ class LibraryBrowse extends React.Component{
return (
<div className="view library-local-view">
<Header icon="folder" title="Browse" />
<Header>
<Icon name="folder" type="material" />
Browse
</Header>
<section className="content-wrapper">
<div className="grid category-grid">
{

View File

@ -11,6 +11,7 @@ import DropdownField from '../../components/Fields/DropdownField'
import Header from '../../components/Header'
import FilterField from '../../components/Fields/FilterField'
import LazyLoadListener from '../../components/LazyLoadListener'
import Icon from '../../components/Icon'
import * as helpers from '../../helpers'
import * as coreActions from '../../services/core/actions'
@ -268,7 +269,10 @@ class LibraryPlaylists extends React.Component{
return (
<div className="view library-playlists-view">
<Header icon="playlist" title="My playlists" options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="queue_music" type="material" />
My playlists
</Header>
{ this.renderView() }
</div>
)

View File

@ -8,6 +8,7 @@ import FontAwesome from 'react-fontawesome'
import TrackList from '../../components/TrackList'
import Header from '../../components/Header'
import LazyLoadListener from '../../components/LazyLoadListener'
import Icon from '../../components/Icon'
import * as helpers from '../../helpers'
import * as mopidyActions from '../../services/mopidy/actions'
@ -73,7 +74,10 @@ class LibraryTracks extends React.Component{
return (
<div className="view library-tracks-view">
<Header icon="music" title="My tracks" options={options} uiActions={this.props.uiActions} />
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="music_note" type="material" />
My tracks
</Header>
<section className="content-wrapper">
<TrackList tracks={tracks} />
<LazyLoadListener loading={this.props.library_tracks_more} loadMore={() => this.loadMore()}/>