From 0e72f2a52ea6b975121a14edae9c003db31d66d5 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Mon, 13 Mar 2017 21:19:09 +1300
Subject: [PATCH] Context menu context and titles; List unification

---
 src/js/components/ContextMenu.js                 |  4 +++-
 .../{ArtistList.js => RelatedArtists.js}         |  4 ++--
 src/js/components/TrackList.js                   |  2 +-
 src/js/views/Artist.js                           |  4 ++--
 src/js/views/Playlist.js                         |  4 ++--
 src/js/views/library/LibraryAlbums.js            |  3 ++-
 src/js/views/library/LibraryArtists.js           |  3 ++-
 src/js/views/library/LibraryLocalAlbums.js       |  6 +++++-
 src/js/views/library/LibraryLocalArtists.js      |  1 +
 src/js/views/library/LibraryLocalDirectory.js    |  6 +++++-
 src/js/views/library/LibraryPlaylists.js         |  3 ++-
 src/scss/components/_context-menu.scss           | 16 ++++++++++++++--
 src/scss/components/_lists.scss                  |  2 +-
 13 files changed, 42 insertions(+), 16 deletions(-)
 rename src/js/components/{ArtistList.js => RelatedArtists.js} (85%)

diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index c1f30ae2..52de2e74 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -268,6 +268,7 @@ class ContextMenu extends React.Component{
 		if (context.name == 'custom'){
 			return (
 				<span className="title">
+					<div className="background generic"></div>
 					<div className="text">
 						{this.props.menu.title}
 					</div>
@@ -311,6 +312,7 @@ class ContextMenu extends React.Component{
 						<div className="text">							
 							{context.items_count} items
 						</div>
+						<div className="background generic"></div>
 					</span>
 				)
 				break
@@ -392,7 +394,7 @@ class ContextMenu extends React.Component{
 		var start_radio = (
 			<span className="menu-item-wrapper">
 				<a className="menu-item" onClick={e => this.startRadio(e)}>
-					<span className="label">Start {this.context.nice_name} radio</span>
+					<span className="label">Start radio</span>
 				</a>
 			</span>
 		)
diff --git a/src/js/components/ArtistList.js b/src/js/components/RelatedArtists.js
similarity index 85%
rename from src/js/components/ArtistList.js
rename to src/js/components/RelatedArtists.js
index 7b28c784..301363ce 100755
--- a/src/js/components/ArtistList.js
+++ b/src/js/components/RelatedArtists.js
@@ -3,7 +3,7 @@ import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
 import Thumbnail from './Thumbnail'
 
-export default class ArtistList extends React.Component{
+export default class RelatedArtists extends React.Component{
 
 	constructor(props) {
 		super(props)
@@ -13,7 +13,7 @@ export default class ArtistList extends React.Component{
 		if( !this.props.artists ) return null
 
 		return (
-			<div className="list artist-list">
+			<div className="list related-artist-list">
 				{
 					this.props.artists.map( (artist, index) => {
 						if( artist.uri ){
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index 413894b2..189f0e80 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -132,7 +132,7 @@ class TrackList extends React.Component{
 		var selected_tracks = this.selectedTracks()
 		var data = {
 			e: e,
-			context: (this.props.context ? this.props.context : 'track'),
+			context: (this.props.context ? this.props.context+'-track' : 'track'),
 			tracklist_uri: (this.props.uri ? this.props.uri : null),
 			items: selected_tracks,
 			uris: helpers.asURIs(selected_tracks),
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 1ad4a6da..f14f30b2 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -10,8 +10,8 @@ import TrackList from '../components/TrackList'
 import AlbumGrid from '../components/AlbumGrid'
 import Thumbnail from '../components/Thumbnail'
 import Parallax from '../components/Parallax'
-import ArtistList from '../components/ArtistList'
 import ArtistGrid from '../components/ArtistGrid'
+import RelatedArtists from '../components/RelatedArtists'
 import FollowButton from '../components/FollowButton'
 import SidebarToggleButton from '../components/SidebarToggleButton'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
@@ -178,7 +178,7 @@ class Artist extends React.Component{
 
 				<div className="col w5"></div>
 
-				{related_artists.length > 0 ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><ArtistList artists={related_artists.slice(0,6)} /></div></div> : null}
+				{related_artists.length > 0 ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={related_artists.slice(0,6)} /></div></div> : null}
 
 				<div className="cf"></div>
 
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index c334f192..66cecaf1 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -146,10 +146,10 @@ class Playlist extends React.Component{
 
 	render(){
 		var scheme = helpers.uriSource( this.props.params.uri )
-		var context = 'playlist-track'
+		var context = 'playlist'
 
 		if (this.props.playlist){
-			if (this.props.playlist.can_edit) context = 'editable-playlist-track'
+			if (this.props.playlist.can_edit) context = 'editable-playlist'
 
 			return (
 				<div className="view playlist-view">
diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js
index eba0d964..39d6310a 100755
--- a/src/js/views/library/LibraryAlbums.js
+++ b/src/js/views/library/LibraryAlbums.js
@@ -82,11 +82,12 @@ class LibraryAlbums extends React.Component{
 				}
 			]
 			return (
-				<section className="list-wrapper album-list">
+				<section className="list-wrapper">
 					<List 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={albums} 
 						columns={columns} 
+						className="album-list"
 						link_prefix={global.baseURL+"album/"} />
 				</section>
 			)
diff --git a/src/js/views/library/LibraryArtists.js b/src/js/views/library/LibraryArtists.js
index fafec3f1..4fdc859a 100755
--- a/src/js/views/library/LibraryArtists.js
+++ b/src/js/views/library/LibraryArtists.js
@@ -69,11 +69,12 @@ class LibraryArtists extends React.Component{
 				}
 			]
 			return (
-				<section className="list-wrapper artist-list">
+				<section className="list-wrapper">
 					<List 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={artists} 
 						columns={columns} 
+						className="artist-list"
 						link_prefix={global.baseURL+"artist/"} />
 				</section>
 			)
diff --git a/src/js/views/library/LibraryLocalAlbums.js b/src/js/views/library/LibraryLocalAlbums.js
index ea4b820e..5df06a8f 100755
--- a/src/js/views/library/LibraryLocalAlbums.js
+++ b/src/js/views/library/LibraryLocalAlbums.js
@@ -92,7 +92,11 @@ class LibraryLocalAlbums extends React.Component{
 
 			return (
 				<section className="list-wrapper">
-					<List columns={columns} rows={albums} link_prefix={global.baseURL+"album/"} />
+					<List 
+						columns={columns} 
+						rows={albums} 
+						className="library-local-album-list"
+						link_prefix={global.baseURL+"album/"} />
 				</section>
 			)
 		}else{
diff --git a/src/js/views/library/LibraryLocalArtists.js b/src/js/views/library/LibraryLocalArtists.js
index 1ec6297f..025c1500 100755
--- a/src/js/views/library/LibraryLocalArtists.js
+++ b/src/js/views/library/LibraryLocalArtists.js
@@ -62,6 +62,7 @@ class LibraryLocalArtists extends React.Component{
 						columns={[{ name: 'name', width: '100'}]} 
 						rows={artists} 
 						link_prefix={global.baseURL+"artist/"}
+						className="library-local-artist-list"
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 					/>
 				</section>
diff --git a/src/js/views/library/LibraryLocalDirectory.js b/src/js/views/library/LibraryLocalDirectory.js
index d3ef23e4..10afa676 100755
--- a/src/js/views/library/LibraryLocalDirectory.js
+++ b/src/js/views/library/LibraryLocalDirectory.js
@@ -88,8 +88,12 @@ class LibraryLocalDirectory extends React.Component{
 					<List
 						columns={[{ name: 'name', width: '100'}]} 
 						rows={items.folders} 
+						className="library-local-directory-list"
 						link_prefix={global.baseURL+"library/local/directory/"} />
-					<TrackList tracks={items.tracks} noheader />
+					<TrackList 
+						tracks={items.tracks} 
+						className="library-local-track-list" 
+						noheader />
 				</section>
 			</div>
 		);
diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js
index 07299631..07b2b785 100755
--- a/src/js/views/library/LibraryPlaylists.js
+++ b/src/js/views/library/LibraryPlaylists.js
@@ -81,11 +81,12 @@ class LibraryPlaylists extends React.Component{
 				}
 			]
 			return (
-				<section className="list-wrapper playlist-list">
+				<section className="list-wrapper">
 					<List
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={playlists}
 						columns={columns}
+						className="playlist-list"
 						link_prefix={global.baseURL+"playlist/"} />
 				</section>
 			)
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index c8359e5f..99cbac3f 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -38,13 +38,25 @@
 				@include blur(5px);
 				background-size: cover;
 				background-position: 50% 20%;
-				opacity: 0.5;
+				opacity: 0.65;
 				position: absolute;
 				top: -10px;
 				left: -10px;
 				bottom: -10px;
 				right: -10px;
 				z-index: 1;
+
+				&.generic {
+					opacity: 0.9;
+					background: rgba(50,181,242,1);
+					background: -moz-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
+					background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(50,181,242,1)), color-stop(18%, rgba(50,181,242,1)), color-stop(100%, rgba(5,118,166,1)));
+					background: -webkit-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
+					background: -o-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
+					background: -ms-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
+					background: linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
+					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
+				}
 			}
 
 			.text {
@@ -108,7 +120,7 @@
 				width: 0;
 				min-height: 180px;
 				overflow-y: scroll;			
-				background: lighten($dark_grey, 10%);
+				background: lighten($dark_grey, 15%);
 				z-index: 3;
 
 				&.expanded {
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 5c4ddb01..77048471 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -158,7 +158,7 @@
 		}
 	}
 
-	&.artist-list {
+	&.related-artist-list {
 		.artist {
 			display: block;
 			border: 0;