~ Further design improvements, mostly there now.

lib/js/neompc.js

@@ -3,6 +3,7 @@ template = '{:$template:}';
 volume_min = {:$volume_min:};
 volume_max = {:$volume_max:};
 vol_orientation = '{:$volume_orientation:}'
+page = '{:$page:}';
 vol_offset = 0;
 
 String.prototype.pad = function(l, s){
@@ -128,8 +129,14 @@ $(document).ready(function(){
 			hide_vol = setTimeout('hide_volume(); $(\'#volume_slider\').attr(\'rel\', \'\');', 2000);
 		}
 	});
+	
+	$('#removeall').click(function() {
+		return confirm('Are you sure you want to clear the whole playlist?');
+	});
 
-	ajax_control();
+	if (page = 'control') {
-	ajax_int = setInterval('ajax_control()', 1000);
+		ajax_control();
+		ajax_int = setInterval('ajax_control()', 1000);
+	}
 	
 });

templates/default/browselist_item.html

@@ -1,30 +1,31 @@
-
+
-			{:if $browselist_item.directory:}
+			{:if $browselist_item.directory:}
-
+
 				<li class="dir">
 					<a class="browse" href="index.php?browse={:$browselist_item.directory|escape:'url':}">{:$browselist_item.directory_name|escape:'html':}</a>
-				</li>
+				</li>
-
+
-			{:elseif $browselist_item.metaArtist:}
+			{:elseif $browselist_item.metaArtist:}
-
+
 				<li class="artist">
 					<a class="browse" href="index.php?browse={:$browselist_item.path|escape:'url':}">{:$browselist_item.metaArtist|escape:'html':}</a>
-				</li>
+				</li>
-
+
-			{:elseif $browselist_item.metaAlbum:}
+			{:elseif $browselist_item.metaAlbum:}
-
+
 				<li class="album">
 					<a class="browse" href="index.php?browse={:$browselist_item.path|escape:'url':}">{:$browselist_item.metaAlbum|escape:'html':}</a>
-				</li>
+				</li>
-
+
-			{:elseif $browselist_item.Title:}
+			{:elseif $browselist_item.Title:}
-
+
 				{:if $browselist_item.in_playlist:}
 				<li class="track playing">
+					<a class="add"><img src="templates/{:$template:}/images/add_disabled.png" alt="Add" class="button" /></a>
 				{:else:}
 				<li class="track">
-				{:/if:}
 					<a class="add" href="{:$browselist_add_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/add.png" alt="Add" class="button" /></a>
+				{:/if:}
 					<a class="play" href="{:$browselist_play_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/play.png" alt="Play" class="button" /></a>
 					<a class="browse">
 				{:if $browselist_item.Title|escape:'html':}
@@ -32,14 +33,14 @@
 					{:if $browselist_item.Artist && $show_extra_track_info:}<br /><span class="artist">{:$browselist_item.Artist|escape:'html':}</span> {:if $browselist_item.Album:}<span class="album">({:$browselist_item.Album|escape:'html':})</span>{:/if:}{:/if:}{:else:}{:$browselist_item.file_name|escape:'html':}{:/if:}
 					</a>
 				</li>
-
+
-			{:elseif $browselist_item.file:}
+			{:elseif $browselist_item.file:}
-
+
 				{:if $browselist_item.in_playlist:}
 				<li class="playing">
 				{:else:}
 				<li>
 				{:/if:}
-					<a href="{:$browselist_add_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/add.png" alt="Add" class="button" /></a><a href="{:$browselist_play_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/play.png" alt="Play" class="button" /></a><img src="templates/{:$template:}/images/note.gif" class="icon" /> {:if $browselist_item.Title|escape:'html':}<span class="title">{:$browselist_item.Title|escape:'html':}</span>{:if $browselist_item.Artist && $show_extra_track_info:}<br /><span class="artist">{:$browselist_item.Artist|escape:'html':}</span> {:if $browselist_item.Album:}<span class="album">({:$browselist_item.Album|escape:'html':})</span>{:/if:}{:/if:}{:else:}{:$browselist_item.file_name|escape:'html':}{:/if:}</li>
+					<a href="{:$browselist_add_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/add.png" alt="Add" class="button" /></a><a href="{:$browselist_play_link:}{:$browselist_item.file|escape:'url':}"><img src="templates/{:$template:}/images/play.png" alt="Play" class="button" /></a><img src="templates/{:$template:}/images/note.gif" class="icon" /> {:if $browselist_item.Title|escape:'html':}<span class="title">{:$browselist_item.Title|escape:'html':}</span>{:if $browselist_item.Artist && $show_extra_track_info:}<br /><span class="artist">{:$browselist_item.Artist|escape:'html':}</span> {:if $browselist_item.Album:}<span class="album">({:$browselist_item.Album|escape:'html':})</span>{:/if:}{:/if:}{:else:}{:$browselist_item.file_name|escape:'html':}{:/if:}</li>
-
+
-				{:/if:}
+				{:/if:}

templates/default/playlist.html

@@ -1,5 +1,5 @@
 			<div id="list_header">
-				<div id="buttons"><a href="{:$playlist_clear_link:}"><img src="templates/{:$template:}/images/delall.gif" /></a></div>
+				<div id="buttons"><a id="removeall" href="{:$playlist_clear_link:}"><img src="templates/{:$template:}/images/delall.png" /></a></div>
 			</div>
 
 			{:if $playlist:}

templates/default/styles.css

@@ -88,11 +88,11 @@ p {
 	clear: left;
 }
 #list {
-	background-color: #ddd;
 	color: #333;
 	margin: 0;
 }
 #list ul {
+	background-color: #ddd;
 	list-style-type: none;
 	max-width: 320px;
 	text-align: left;
@@ -129,14 +129,19 @@ p {
 	text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
 	font-weight: bold;
 }
-li .play {
+li .remove,.add,.play {
 	display: block;
-}
-li .remove .add .play {
 	float: right;
-	padding: 5px 0px 3px 5px;
+	padding: 2px 0px 0px 0px;
 	display: block;
-}
+}
+li .add {
+	padding-right: 3px;
+}
+li .remove {
+	padding-right: 3px;
+	padding-top: 8px;
+}
 li.playing a {
 }
 li .title {
@@ -178,7 +183,7 @@ li .title {
 }
 #buttons {
 	float: right;
-	margin: 5px 10px 0px 0px;
+	margin: 5px 5px 0px 0px;
 	text-align: right;
 }