Button to .button; Commands setup UI; polishing context menu

This commit is contained in:
James Barnsley
2018-11-16 15:26:10 +13:00
parent 55c75729e6
commit 6341bbb1ac
20 changed files with 436 additions and 385 deletions

View File

@ -1,8 +1,8 @@
import React, { PropTypes } from 'react'
import Icon from './Icon'
import ContextMenuTrigger from './ContextMenuTrigger'
import Icon from './Icon';
import ContextMenuTrigger from './ContextMenuTrigger';
export default class Header extends React.Component{

View File

@ -167,7 +167,7 @@ class Settings extends React.Component {
{
commands.map(command => {
return (
<div className="list__item commands-setup__item" key={command.id}>
<div className="list__item commands-setup__item no-click" key={command.id}>
<div className="col col--w90">
<div className="commands__item commands__item--interactive" onClick={e => this.props.pusherActions.sendCommand(command.id, true)}>
<Icon className="commands__item__icon" name={command.icon} />

View File

@ -52,7 +52,7 @@ class DiscoverCategories extends React.Component{
return (
<div className="view discover-categories-view">
<Header>
<Header uiActions={this.props.uiActions}>
<Icon name="mood" type="material" />
Genre / Mood
</Header>

View File

@ -85,7 +85,7 @@ class DiscoverCategory extends React.Component{
return (
<div className="view discover-categories-view">
<Header>
<Header uiActions={this.props.uiActions}>
<Icon name="mood" type="material" />
{category.name}
</Header>

View File

@ -77,7 +77,7 @@ class DiscoverFeatured extends React.Component{
if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){
return (
<div className="view discover-featured-view">
<Header className="overlay">
<Header className="overlay" uiActions={this.props.uiActions}>
<Icon name="star" type="material" />
Featured playlists
</Header>
@ -105,9 +105,9 @@ class DiscoverFeatured extends React.Component{
}
var options = (
<button className="no-hover" onClick={e => this.props.spotifyActions.getFeaturedPlaylists()}>
<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.props.spotifyActions.getFeaturedPlaylists()}}>
<Icon name="refresh" />Refresh
</button>
</a>
);
return (

View File

@ -121,14 +121,14 @@ class DiscoverNewReleases extends React.Component{
}
var options = (
<button className="no-hover" onClick={e => this.props.spotifyActions.getNewReleases()}>
<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.props.spotifyActions.getNewReleases()}}>
<Icon name="refresh" />Refresh
</button>
</a>
);
return (
<div className="view discover-new-releases-view preserve-3d">
<Header className="overlay" options={options}>
<Header className="overlay" options={options} uiActions={this.props.uiActions}>
<Icon name="new_releases" type="material" />
New releases
</Header>

View File

@ -174,12 +174,12 @@ class LibraryBrowse extends React.Component{
options={view_options}
handleChange={value => {this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu()}}
/>
{tracks ? <button className="no-hover" onClick={e => this.playAll(e, tracks)}>
{tracks ? <a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
<Icon name="play_circle_filled" />Play all
</button> : null }
<button className="no-hover" onClick={e => this.goBack(e)}>
</a> : null }
<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
<Icon name="keyboard_backspace" />Back
</button>
</a>
</span>
);
@ -266,7 +266,7 @@ class LibraryBrowse extends React.Component{
return (
<div className="view library-local-view">
<Header>
<Header uiActions={this.props.uiActions}>
<Icon name="folder" type="material" />
Browse
</Header>

View File

@ -68,11 +68,9 @@ class LibraryTracks extends React.Component{
}
var options = (
<span>
<button className="no-hover" onClick={e => this.playAll(e)}>
<Icon name="play_circle_filled" />Play all
</button>
</span>
<a className="button button--no-hover" onClick={e => this.playAll(e)}>
<Icon name="play_circle_filled" />Play all
</a>
);
return (