From 44bf3b70048d79f7100f4fa9da93099744b9a65e Mon Sep 17 00:00:00 2001
From: Brinken <rasmuseegmoeller@gmail.com>
Date: Fri, 31 Aug 2012 22:23:58 +0200
Subject: [PATCH] Albums Grid

*Added CTRL + LMOUSE click on albums to select.
---
 data/interfaces/brink/artist.html   | 29 ++++++++++++++++++++++-------
 data/interfaces/brink/css/style.css | 26 ++++++++++++--------------
 data/interfaces/brink/js/script.js  |  6 +++---
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/data/interfaces/brink/artist.html b/data/interfaces/brink/artist.html
index 7201357b..5ae49fa8 100644
--- a/data/interfaces/brink/artist.html
+++ b/data/interfaces/brink/artist.html
@@ -8,11 +8,11 @@
 <%def name="body()">
 	<script>
 		$(document).ready(function(){
-			$('#menu_link_getextra').click(function() {
+			$('#getExtras').click(function() {
 				$('#dialog').dialog();
 				return false;
 			});
-			$('#menu_link_modifyextra').click(function() {
+			$('#modifyExtras').click(function() {
 				$('#dialog').dialog();
 			});
 		});
@@ -23,7 +23,8 @@
 			<input type="hidden" name="ArtistID" value="${artist['ArtistID']}">
 			<input type="hidden" name="newstyle" value="true">
 			%for extra in extras:
-				<input type="checkbox" id="${extra}" name="${extra}" value="1" ${extras[extra]} />${string.capwords(extra)}<br>
+				<input type="checkbox" id="${extra}" name="${extra}" value="1" ${extras[extra]} />
+					<label for="${extra}">${string.capwords(extra)}</label><br />
 			%endfor
 			<br>
 			<input id="submit" type="submit" value="Fetch Extras">
@@ -41,9 +42,9 @@
 			%endif
 			%if artist['IncludeExtras']:
 				<li><a href="removeExtras?ArtistID=${artist['ArtistID']}">Remove Extras</a></li>
-				<li><a class="menu_link_edit" href="#">Modify Extras</a></li>
+				<li><a id="modifyExtras" href="#">Modify Extras</a></li>
 			%else:	
-				<li><a id="menu_link_getextra" href="#">Get Extras</a></li>
+				<li><a id="getExtras" href="#">Get Extras</a></li>
 			%endif
 		</ul>
 		<ul id="nav-view">
@@ -73,13 +74,14 @@
   			<option value="Downloaded">Downloaded</option>
 		</select>
 		<input type="submit" value="GO">
+		<small><span class="wsr Tag"></span> Click CTRL + LMOUSE on albums to select.</small>
 	</p>
 	<div id="gridView">
 	%for album in albums:
 		<%
 		%>
 		<div class="image-container">
-			<div class="image-box ${album['Status']}">
+			<div class="image-box">
 				<div class="image-tag ${album['Status']}"></div>
 				<img />
 				<div class="image-actions">
@@ -98,7 +100,7 @@
 			
 			<div class="image-info">
 				<b style="display: none;">${artist['ArtistName']}</b>
-				<span><a href="albumPage?AlbumID=${album['AlbumID']}" title="${album['AlbumID']}">${album['AlbumTitle']}</a></span>
+				<span><a class="image-url" href="albumPage?AlbumID=${album['AlbumID']}" title="${album['AlbumID']}">${album['AlbumTitle']}</a></span>
 			</div>
 		</div>
 	%endfor
@@ -194,6 +196,19 @@
 <%def name="javascriptIncludes()">
 	<script>
 	$(document).ready(function(){
+		$(".image-box").click(function(evt) {
+			if (evt.ctrlKey)
+			{
+				var input = $(this).find('.image-select');
+				if( $(input).is(':checked') ){
+					$(input).attr('checked', false);
+				}
+				else{
+					$(input).attr('checked', true);
+				}
+			}
+		});
+		
 		//Load Art
 		getAlbumArt();
 		getArtistArt();
diff --git a/data/interfaces/brink/css/style.css b/data/interfaces/brink/css/style.css
index 27010486..04061876 100644
--- a/data/interfaces/brink/css/style.css
+++ b/data/interfaces/brink/css/style.css
@@ -430,12 +430,8 @@ table#album_table td#albumart { vertical-align: middle; text-align: left; }
 	height: 126px;
 	width: 126px;
 	position: relative;
-	box-shadow: 0 0 6px #000;
-	-moz-box-shadow: 0 0 6px #000;
-	-webkit-box-shadow: 0 0 6px #000;
-	overflow: hidden;
 }
-.image-container  .image-box img { 
+.image-container .image-box img { 
 	width: 100%;
 	min-height: 100%;
 	position: absolute;
@@ -445,20 +441,22 @@ table#album_table td#albumart { vertical-align: middle; text-align: left; }
 	border: 0;
 }
 
-.image-container  input {
+.image-container .image-box input {
 	position: absolute;
 	top: 0px;
-	z-index: 2;
 	width: 100%;
 	height: 100%;
-	text-align: right; 
+	text-align: center;
+	box-shadow: 0px 0px 10px rgb(0,0,0);
+	-moz-box-shadow: 0px 0px 10px rgb(0,0,0);
+	-webkit-box-shadow: 0px 0px 10px rgb(0,0,0);
+	-o-box-shadow: 0px 0px 10px rgb(0,0,0);
 }
-.image-container  input:checked {
-	content: "";
-	background: rgba(0,0,0,0.1);
-	box-shadow: 0 0 10px rgb(0,145,255);
-	-moz-box-shadow: 0 0 10px rgb(0,145,255);
-	-webkit-box-shadow: 0 0 10px rgb(0,145,255);
+.image-container .image-box input:checked {
+	box-shadow: 0px 0px 10px rgb(0,145,255);
+	-moz-box-shadow: 0px 0px 10px rgb(0,145,255);
+	-webkit-box-shadow: 0px 0px 10px rgb(0,145,255);
+	-0-box-shadow: 0px 0px 10px rgb(0,145,255);
 }
 .image-container .image-actions {
 	display: none;
diff --git a/data/interfaces/brink/js/script.js b/data/interfaces/brink/js/script.js
index 4af71552..820c4806 100644
--- a/data/interfaces/brink/js/script.js
+++ b/data/interfaces/brink/js/script.js
@@ -15,7 +15,7 @@ function getArtistInfo(name,imgElem,size,artistID) {
 			} else {
 				if ( data.artist === undefined || imageUrl == "" || imageUrl == undefined ) {
 					var imageLarge = "#";
-					var imageUrl = "interfaces/brink/images/no-cover-artist.png";
+					var imageUrl = "interfaces/brink/images/no-artist-art.png";
 				} else {
 					var artist = data.artist.mbid;
 					var artistBio = data.artist.bio.summary;
@@ -42,7 +42,7 @@ function getArtistInfo(name,imgElem,size,artistID) {
 				}
 				if ( data.artist === undefined || imageUrl == "" ) {
 					var imageLarge = "#";
-					var imageUrl = "interfaces/brink/images/no-cover-artist.png";
+					var imageUrl = "interfaces/brink/images/no-artist-art.png";
 				} else {
 					var artist = data.artist.name;
 					var artistBio = data.artist.bio.summary;
@@ -101,7 +101,7 @@ function getAlbumInfo(name, album, elem,size) {
 					$(elem).css("background", "url("+ imageUrl+")");
 				} 
 				$(elem).css("background", "url("+ imageUrl+") center top no-repeat");
-				$(elem).wrap('<a href="'+ imageLarge +'" rel="dialog" title="' + name + '"></a>');
+				//$(elem).wrap('<a href="'+ imageLarge +'" rel="dialog" title="' + name + '"></a>');
 			}
 		});
 	}