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;