From 78c759562e3c015463bbf0df0f474aa2aa863280 Mon Sep 17 00:00:00 2001
From: magnolia-fan <magnolia_fan@me.com>
Date: Wed, 13 Apr 2011 02:14:06 +0400
Subject: [PATCH] Adding entire album or artist to playlist, -add- icon. closes
 #35

---
 app/views/artist/view.rhtml      | 14 +++++++--
 public/images/player/add.svg     |  5 ++++
 public/javascripts/player.js     | 10 +++++--
 public/stylesheets/beathaven.css | 51 ++++++++++++++++++++++++--------
 4 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 public/images/player/add.svg

diff --git a/app/views/artist/view.rhtml b/app/views/artist/view.rhtml
index c8a2073..749809f 100644
--- a/app/views/artist/view.rhtml
+++ b/app/views/artist/view.rhtml
@@ -4,16 +4,24 @@
 		<%= link_to "Try again", main_path %>
 	</div>
 <% else %>
-	<h1 class="artist"><%= @artist.name %></h1>
+	<h1 class="artist">
+		<span>
+			<span><%= @artist.name %></span>
+			<span class="play"><img src="/images/player/add.svg" alt="play" /></span>
+		</span>
+	</h1>
 	<% @albums.each do |album| %>
 		<div class="album">
 			<div class="pic"><img src="<%= album[:object].cover(@artist.name) %>" width="250" height="250" alt=""/></div>
-			<h3 class="name"><%= album[:object].name %> <%= (album[:object].year ? album[:object].year : '') %></h3>
+			<h3 class="name">
+				<span><%= album[:object].name %> <%= (album[:object].year ? album[:object].year : '') %></span>
+				<span class="play"><img src="/images/player/add.svg" alt="play" /></span>
+			</h3>
 			<ul class="tracks">
 			<% album[:tracks].each do |track| %>
 				<li id="<%= track[:object].id %>">
 					<span class="play<%= (track[:in_db].nil? ? '' : ' disabled') %>">
-						<img src="/images/player/play.svg" alt="play" />
+						<img src="/images/player/add.svg" alt="play" />
 					</span>
 					<span class="track-name"><%= track[:object].name %></span>
 					<% unless track[:object].length.nil? %>
diff --git a/public/images/player/add.svg b/public/images/player/add.svg
new file mode 100644
index 0000000..82c3092
--- /dev/null
+++ b/public/images/player/add.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<rect x="400" y="0" width="200" height="1000" style="fill:rgb(220,220,220);"/>
+	<rect x="0" y="400" width="1000" height="200" style="fill:rgb(220,220,220);"/>
+</svg>
\ No newline at end of file
diff --git a/public/javascripts/player.js b/public/javascripts/player.js
index fa13106..5957bcd 100644
--- a/public/javascripts/player.js
+++ b/public/javascripts/player.js
@@ -28,12 +28,18 @@ $(function(){
 	}).disableTextSelect();
 	$('.tracks .play').click(function(){
 		addToPlaylist(
-			$('h1.artist').html(),
+			$('h1.artist > span > span:first').html(),
 			$(this).parent().find('.track-name').html(),
 			Math.round($(this).parent().find('.duration').attr('data-length') / 1000),
 			$(this).parent().attr('id')
 		);
 	})
+	$('.album > h3.name > span.play').click(function(){
+		$(this).parent().parent().find('ul > li > span.play').click();
+	})
+	$('h1.artist > span > span.play').click(function(){
+		$('.album > ul > li > span.play').click();
+	})
 	$('#player .prev').click(function(){
 		playPrev();
 	}).disableTextSelect();
@@ -104,7 +110,7 @@ function playNext(auto) {
 }
 function addToPlaylist(artist, track, length, id) {
 	$('#playlist ul.list').append($(
-		'<li data-id="'+ id +'">'+
+		'<li data-id="'+ id +'" title="Double-click To Play">'+
 			'<span class="artist">'+ artist +'</span> &mdash; '+
 			'<span class="track">'+ track +'</span>'+
 			'<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+
diff --git a/public/stylesheets/beathaven.css b/public/stylesheets/beathaven.css
index 9bcaca5..189912a 100644
--- a/public/stylesheets/beathaven.css
+++ b/public/stylesheets/beathaven.css
@@ -24,6 +24,9 @@ h1.artist {
 	margin: 4em 0 0.5em 0;
 	font-size: 3em;
 }
+	h1.artist > span {
+		width: auto;
+	}
 
 .album {
 	width: 100%;
@@ -46,6 +49,10 @@ h1.artist {
 	margin: 0 0 0.5em 0;
 /*	background-color: yellowgreen;*/
 }
+	.album .name span{
+		float: left;
+		width: auto;
+	}
 
 .album .tracks {
 	display: block;
@@ -69,27 +76,47 @@ h1.artist {
 	float: right;
 }
 
-.album .tracks li .play  {
+span.play  {
 	display: block;
 	float: left;
-	width: 30px;
-	height: 30px;
-	border-radius: 30px;
-	background-color: #05A;
-	margin: 0 0.3em 0 0;
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	background-color: #081;
+	margin: 0.4em 0.3em 0 0;
 	cursor: pointer;
+	line-height: 18px;
 }
-	.album .tracks li .play img {
-		width: 12px;
-		height: 12px;
-		margin: 9px 0 0 10px;
+	span.play img {
+		width: 10px;
+		height: 10px;
+		margin: 0 0 0 5px;
 	}
 
-.album .tracks li .play.disabled {
-	background-color: #CDF;
+span.play.disabled {
+	background-color: #810;
 }
 
+.album h3.name span.play {
+	display: block;
+	width: 20px;
+	line-height: 11px;
+	margin: 0.2em 0 0 0.2em;
+	background-color: #04A;
+}
 
+h1.artist > span > span.play {
+	display: inline-block;
+	float: none;
+	width: 28px;
+	height: 28px;
+	line-height: 20px;
+	margin: 0;
+	background-color: #04A;
+}
+	h1.artist > span > span.play img {
+		margin: 10px 0 20px 0;
+	}
 
 .search {
 	width: 100%;