Unified lists and columns

src/js/components/ContextMenu.js

@@ -103,6 +103,7 @@ class ContextMenu extends React.Component{
 			if (this.props.menu.items && this.props.menu.items.length > 0){
 				var item = this.props.menu.items[0]
 				context.item = item
+				context.items_count = this.props.menu.items.length
 				context.source = helpers.uriSource(item.uri)
 				context.type = helpers.uriType(item.uri)
 				context.in_library = this.inLibrary(item)
@@ -264,6 +265,11 @@ class ContextMenu extends React.Component{
 	renderTitle(){
 		var context = this.getContext()
 
+		if (context.name == 'custom'){
+			return null
+			// TODO: make this the page title
+		}
+
 		switch (context.type){
 
 			case 'artist':
@@ -298,7 +304,7 @@ class ContextMenu extends React.Component{
 							{context.nice_name}s
 						</div>
 						<div className="text">							
-							{this.props.menu.items.length} items
+							{context.items_count} items
 						</div>
 					</span>
 				)

src/js/components/List.js

@@ -72,8 +72,13 @@ class List extends React.Component{
 	render(){
 		if (!this.props.rows) return null
 
+		var className = 'list'
+		if (this.props.className){
+			className += ' '+this.props.className
+		}
+
 		return (
-			<div className="list">
+			<div className={className}>
 				{ this.renderHeader() }
 				{
 					this.props.rows.map( (row, row_index) => {

src/js/components/TrackList.js

@@ -290,8 +290,13 @@ class TrackList extends React.Component{
 		if( !this.state.tracks || Object.prototype.toString.call(this.state.tracks) !== '[object Array]' ) return null
 
 		let self = this;
+		var className = 'list track-list '+this.props.context
+		if (this.props.className){
+			className += ' '+this.props.className
+		}
+
 		return (
-			<div className={this.props.context+" track-list"}>
+			<div className={className}>
 				{ this.renderHeader() }
 				{
 					this.state.tracks.map(

src/js/services/ui/reducer.js

@@ -539,7 +539,6 @@ export default function reducer(ui = {}, action){
             return Object.assign({}, ui, { 
                 library_playlists: library_playlists,
                 library_playlists_started: true
-                library_playlists_loaded: true
             });
 
         case 'PLAYLIST_LIBRARY_CHECK':

src/js/views/Album.js

@@ -137,7 +137,7 @@ class Album extends React.Component{
 					</div>
 
 					<section className="list-wrapper">
-						{ this.props.album.tracks ? <TrackList tracks={ this.props.album.tracks } uri={this.props.params.uri} /> : null }
+						{ this.props.album.tracks ? <TrackList className="album-track-list" tracks={ this.props.album.tracks } uri={this.props.params.uri} /> : null }
 						<LazyLoadListener enabled={this.props.album.tracks_more} loadMore={ () => this.loadMore() }/>
 					</section>
 
@@ -151,7 +151,7 @@ class Album extends React.Component{
 					<Thumbnail size="large" />
 					<div className="title">
 						<div className="source grey-text">
-							<span className="placeholder"></span>
+							Album
 						</div>
 						<h1>
 							<span className="placeholder"></span>
@@ -165,12 +165,6 @@ class Album extends React.Component{
 					<div className="actions">
 						<button className="placeholder">&nbsp;</button>
 					</div>
-
-					<section className="list-wrapper">
-						<span className="placeholder"></span>
-						<span className="placeholder"></span>
-						<span className="placeholder"></span>
-					</section>
 				</div>
 			);
 

src/js/views/Artist.js

@@ -172,7 +172,7 @@ class Artist extends React.Component{
 				<div className={related_artists.length > 0 ? "col w70" : "col w100"}>
 					<h4 className="left-padding">Top tracks</h4>
 					<div className="list-wrapper">
-						{ this.props.artist.tracks ? <TrackList uri={this.props.params.uri} tracks={this.props.artist.tracks} /> : null }
+						{ this.props.artist.tracks ? <TrackList className="artist-track-list" uri={this.props.params.uri} tracks={this.props.artist.tracks} /> : null }
 					</div>
 				</div>
 
@@ -248,45 +248,6 @@ class Artist extends React.Component{
 							{ this.renderSubViewMenu() }
 						</div>
 					</div>
-
-					<div className="body overview">
-						<div className="col w70">
-							<h4 className="left-padding">
-								<span className="placeholder"></span>
-							</h4>
-							<div className="list-wrapper">
-								<span className="placeholder"></span>
-								<span className="placeholder"></span>
-								<span className="placeholder"></span>
-							</div>
-						</div>
-
-						<div className="col w5"></div>
-
-						<div className="col w25 related-artists">
-							<h4>
-								<span className="placeholder"></span>
-							</h4>
-							<div className="list-wrapper">
-								<span className="placeholder"></span>
-								<span className="placeholder"></span>
-								<span className="placeholder"></span>
-							</div>
-						</div>
-
-						<div className="cf"></div>
-
-						<h4 className="left-padding">
-							<span className="placeholder"></span>
-						</h4>
-						<section className="grid-wrapper no-top-padding">
-							<div className="grid">
-								<span className="grid-item placeholder"></span>
-								<span className="grid-item placeholder"></span>
-								<span className="grid-item placeholder"></span>
-							</div>
-						</section>
-					</div>
 				</div>
 			);
 		}

src/js/views/Playlist.js

@@ -182,7 +182,7 @@ class Playlist extends React.Component{
 					{ this.renderActions() }
 
 					<section className="list-wrapper">
-						{ this.props.playlist.tracks ? <TrackList uri={this.props.params.uri} context={context} tracks={this.props.playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
+						{ this.props.playlist.tracks ? <TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={this.props.playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
 						<LazyLoadListener enabled={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
 					</section>
 				</div>
@@ -195,7 +195,7 @@ class Playlist extends React.Component{
 					<Thumbnail size="large" />
 					<div className="title">
 						<div className="source grey-text">
-							<span className="placeholder"></span>
+							Playlist
 						</div>
 						<h1><span className="placeholder"></span></h1>
 						<ul className="details">
@@ -207,11 +207,6 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="placeholder">&nbsp;</button>
 					</div>
-					<section className="list-wrapper">
-						<span className="placeholder"></span>
-						<span className="placeholder"></span>
-						<span className="placeholder"></span>
-					</section>
 				</div>
 			)
 		}

src/js/views/Queue.js

@@ -91,6 +91,7 @@ class Queue extends React.Component{
 					<TrackList
 						show_source_icon={true}
 						context="queue"
+						className="queue-track-list"
 						tracks={this.props.current_tracklist}
 						removeTracks={ tracks => this.removeTracks( tracks ) }
 						playTracks={ tracks => this.playTracks( tracks ) }

src/js/views/QueueHistory.js

@@ -47,11 +47,12 @@ class QueueHistory extends React.Component{
 		)
 
 		return (
-			<div className="view playback-history-view">			
+			<div className="view queue-history-view">			
 				<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
 
 				<section className="list-wrapper">
 					<TrackList
+						className="queue-history-list"
 						show_source_icon={true}
 						context="history"
 						tracks={this.props.queue_history} />

src/js/views/User.js

@@ -91,25 +91,11 @@ class User extends React.Component{
 					<Header icon="play" title="User" />
 					<div className="intro">
 						<Thumbnail circle size="medium" images={[]} />
-						<h1><span className="playlist"></span></h1>
-						<ul className="details">
-							<li>
-								<span className="placeholder"></span>
-							</li>
-						</ul>
+						<h1><span className="placeholder"></span></h1>
 						<div className="actions">
 							<button className="placeholder"></button>
 						</div>
 					</div>
-					<div className="main">
-						<section className="grid-wrapper">
-							<div className="grid">
-								<span className="grid-item placeholder"></span>
-								<span className="grid-item placeholder"></span>
-								<span className="grid-item placeholder"></span>
-							</div>
-						</section>						
-					</div>
 				</div>
 			);
 		}

src/scss/components/_lists.scss

@@ -1,5 +1,5 @@
 
-.list-wrapper {
+.list {
 
 	.list-item {
 
@@ -35,106 +35,58 @@
 			border-top: 0;
 			padding-bottom: 2px;
 		}
+	}
 
-		&.track {
-			padding-left: 40px;
+	&.track-list .list-item {
+		padding-left: 40px;
 
-			.col {
-				&.name { width: 40%; }
-				&.artists,
-				&.album { width: 26%; }
+		.col {
+			&.name { 
+				width: 40%;
 			}
-
-			.select-state {
-				position: absolute;
-				top: 12px;
-				left: 15px;
-				font-size: 10px;
+			&.artists,
+			&.album { 
+				width: 25%;
 			}
-
-			.play-state {
-				display: none;
-				position: absolute;
-				top: 13px;
-				left: 15px;
-				font-size: 10px;
-			}
-
-			&.playing {
-				font-weight: 600;
-				.play-state {
-					display: block;
-					opacity: 1;
-				}
-			}
-
-			&.playing.selected {
-				.play-state {
-					display: none;
-				}
-			}
-
-			:root .dragging &:hover {
-				border-top: 3px solid $blue;
-				margin-top: -3px;
-				background: transparent;
+			&.duration {
+				width: 5%;
 			}
 		}
 
-		@include responsive( $bp_medium ){
-			padding: 7px 10px 7px 20px;
+		.select-state {
+			position: absolute;
+			top: 12px;
+			left: 15px;
+			font-size: 10px;
+		}
 
-			.col {
-				&.name {
-					width: 90% !important;
-					padding-right: 10%;
-				}
+		.play-state {
+			display: none;
+			position: absolute;
+			top: 13px;
+			left: 15px;
+			font-size: 10px;
+		}
 
-				&.duration {
-					width: auto;
-					position: absolute;
-					right: 10px;
-					text-align: right;
-				}
-
-				&:not(.name){
-					color: $mid_grey;
-					display: inline-block;
-					width: auto !important;
-				}
-
-				&:not(.name):not(:nth-child(2)){
-					@include bullet();
-				}
-
-				&.followers_total:after {
-					content: ' followers';
-				}
-
-				&.tracks_total:after {
-					content: ' tracks';
-				}
-
-				&.popularity:after {
-					content: '% popularity';
-				}
-
-				&.can_edit,
-				&.release_date {
-					display: none;
-				}
-			}
-
-			&.header { 
-				display: none; 
-			}
-
-			.select-state,
+		&.playing {
+			font-weight: 600;
 			.play-state {
-				top: 11px;
-				left: 5px;
+				display: block;
+				opacity: 1;
 			}
 		}
+
+		&.playing.selected {
+			.play-state {
+				display: none;
+			}
+		}
+
+		:root .dragging &:hover {
+			border-top: 3px solid $blue;
+			margin-top: -3px;
+			background: transparent;
+		}
 	}
 
 	&.playlist-list .list-item {
@@ -182,6 +134,30 @@
 		}
 	}
 
+	&.queue-track-list {
+		.col {
+			&.name,
+			&.artists,
+			&.album { 
+				width: 25% !important;
+			}
+			&.added { 
+				width: 20%;
+			}
+		}
+	}
+
+	&.queue-history-track-list {
+		.col {
+			&.name { 
+				width: 60%;
+			}
+			&.played_at {
+				width: 20%;
+			}
+		}
+	}
+
 	.artist-list {
 		.artist {
 			display: block;
@@ -211,43 +187,61 @@
 		}
 	}
 
-	.history.track-list {
+	@include responsive( $bp_medium ){
 		.list-item {
-			.col{
-				&.name { width: 60%; }
-				&.played_at { width: 20%; }
-			}
-		}
-	}
+			padding: 7px 10px 7px 16px !important;
 
-	.queue.track-list {
-		.list-item {
-			.col{
-				&.name,
-				&.artists,
-				&.album { width: 25%; }
-				&.added { width: 20%; }
-			}
-
-			@include responsive( $bp_medium ){
-				.col {
-					&.name {
-						width: 90%;
-						padding-right: 10%;
-					}
-
-					&.artists,
-					&.album { 
-						width: auto;
-						color: $mid_grey;
-						display: inline-block;
-					}
-
-					&.added {
-						display: none;
-					}
+			&.track {
+				.select-state,
+				.play-state {
+					display: none !important;
 				}
 			}
+
+			.col {
+				&.name {
+					width: 90% !important;
+					padding-right: 10%;
+				}
+
+				&.duration {
+					width: auto;
+					position: absolute;
+					right: 10px;
+					text-align: right;
+				}
+
+				&:not(.name):not(.duration){
+					color: $mid_grey;
+					display: inline-block;
+					width: auto !important;
+				}
+
+				&:not(.name):not(.duration):not(:nth-child(2)){
+					@include bullet();
+				}
+
+				&.followers_total:after {
+					content: ' followers';
+				}
+
+				&.tracks_total:after {
+					content: ' tracks';
+				}
+
+				&.popularity:after {
+					content: '% popularity';
+				}
+
+				&.can_edit,
+				&.release_date {
+					display: none;
+				}
+			}
+
+			&.header { 
+				display: none; 
+			}
 		}
 	}
 }