diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 014a98f5..c2d9002e 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' +import FontAwesome from 'react-fontawesome' import TrackList from './TrackList' import * as uiActions from '../services/ui/actions' @@ -82,6 +83,7 @@ class ContextMenu extends React.Component{ return ( { item.label } + { this.renderPlaylistSubmenu() } ) diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js index e394b783..0930a1af 100755 --- a/src/js/components/GridItem.js +++ b/src/js/components/GridItem.js @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react' import { Link, browserHistory } from 'react-router' +import FontAwesome from 'react-fontawesome' import Thumbnail from './Thumbnail' import ArtistSentence from './ArtistSentence' @@ -37,8 +38,9 @@ export default class GridItem extends React.Component{
{ item.name }
{ item.artists ? : null } - { item.type == 'playlist' ? item.tracks.total+' tracks' : null } + { item.type == 'playlist' && item.tracks ? item.tracks.total+' tracks' : null } { item.followers ? item.followers.total.toLocaleString()+' followers' : null } + { item.type == 'playlist' && item.can_edit ? : null }
); diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js index f746e650..6bd71e82 100755 --- a/src/js/views/library/LibraryPlaylists.js +++ b/src/js/views/library/LibraryPlaylists.js @@ -4,7 +4,7 @@ import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import { Link } from 'react-router' -import List from '../../components/List' +import PlaylistGrid from '../../components/PlaylistGrid' import Header from '../../components/Header' import * as mopidyActions from '../../services/mopidy/actions' @@ -19,9 +19,10 @@ class LibraryPlaylists extends React.Component{ render(){ if( !this.props.playlists ) return null var columns = [ - { name: 'name', width: '40'}, + { name: 'name', width: '30'}, + { name: 'tracks.total', width: '15'}, { name: 'can_edit', width: '15'}, - { name: 'uri', width: '45'} + { name: 'uri', width: '40'} ] return ( @@ -29,8 +30,8 @@ class LibraryPlaylists extends React.Component{
-
- +
+
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index a54f2260..3463ac89 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -26,6 +26,12 @@ } } + .fa { + font-size: 10px; + float: right; + padding-top: 4px; + } + .submenu { display: none; position: absolute; @@ -35,8 +41,11 @@ overflow-y: scroll; background: lighten($dark_grey, 5%); - .menu-item:hover { - background: lighten($dark_grey, 10%); + .menu-item { + width: 150px; + &:hover { + background: lighten($dark_grey, 10%); + } } } } diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss index 6346f82a..e3bc3d9b 100755 --- a/src/scss/components/_grid.scss +++ b/src/scss/components/_grid.scss @@ -14,6 +14,7 @@ display: inline-block; vertical-align: top; border-bottom: 0; + position: relative; .thumbnail { @include animate(); @@ -31,6 +32,11 @@ color: $secondary_grey; } + .fa { + font-size: 10px; + padding-left: 4px; + } + &:hover{ cursor: pointer;