From f2b1c6b6889706dada2b0b520acd3aa07dc7b213 Mon Sep 17 00:00:00 2001
From: Ruud <ruud@crashdummy.nl>
Date: Tue, 6 Mar 2012 07:52:02 +0100
Subject: [PATCH] Better search result popup

---
 .../core/plugins/movie/static/search.css      |  83 +++++++++++++-----
 .../core/plugins/movie/static/search.js       |  50 +++++++----
 couchpotato/static/images/sprite.png          | Bin 1921 -> 1970 bytes
 3 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/couchpotato/core/plugins/movie/static/search.css b/couchpotato/core/plugins/movie/static/search.css
index 957a3cd4..e0ef4b84 100644
--- a/couchpotato/core/plugins/movie/static/search.css
+++ b/couchpotato/core/plugins/movie/static/search.css
@@ -14,59 +14,93 @@
 		margin: 0;
 		font-size: 14px;
 		width: 100%;
+		height: 24px;
 	}
+	
+		.search_form .input .enter {
+			background: #369545 url('../images/sprite.png') right -188px no-repeat;
+			padding: 0 20px 0 4px;
+			border-radius: 2px;
+			text-transform: uppercase;
+			font-size: 10px;
+			margin-left: -78px;
+			display: inline-block;
+			opacity: 0;
+			position: relative;
+			top: -2px;
+			cursor: pointer;
+			vertical-align: middle;
+			visibility: hidden;
+		}
+			.search_form.focused .input .enter {
+				visibility: visible;
+			}
+			.search_form.focused.filled .input .enter {
+				opacity: 1;
+			}
+		
 		.search_form .input a  {
 			width:  17px;
 			height: 20px;
 			display: inline-block;
-			margin: 0 0 -5px -20px;
+			margin: -2px 0 0 2px;
 			top: 4px;
 			right: 5px;
-			background: url('../images/sprite.png') right -36px no-repeat;
+			background: url('../images/sprite.png') left -37px no-repeat;
 			cursor: pointer;
+			opacity: 0;
+			transition: all 0.2s ease-in-out;
+			vertical-align: middle;
+		}
+		
+		.search_form.filled .input a {
+			opacity: 1;
 		}
 
 	.search_form .results_container {
 		position: absolute;
 		background: #5c697b;
-		margin: 6px 0 0 -246px;
+		margin: 6px 0 0 -230px;
 		width: 470px;
 		min-height: 140px;
-
 		border-radius: 3px;
-		-webkit-border-radius: 3px;
-		-moz-border-radius: 3px;
-
-		box-shadow: 0 0 50px rgba(0,0,0,0.55);
+		box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55);
+		display: none;
 	}
+		.search_form.shown.filled .results_container {
+			display: block;
+		}
+		
+		.search_form .results_container:before {
+			content: ' ';
+			height: 0;
+			position: relative;
+			width: 0;
+			border: 10px solid transparent;
+			border-bottom-color: #5c697b;
+			display: block;
+			top: -20px;
+			left: 346px;
+		}
+		
 	.search_form .spinner {
 		background: rgba(0,0,0,0.8) url('../images/spinner.gif') no-repeat center 70px;
 	}
 
-		.search_form .pointer {
-			border-right: 10px solid transparent;
-			border-left: 10px solid transparent;
-			border-bottom: 10px solid #5c697b;
-			display: block;
-			position: absolute;
-			width: 0px;
-			left: 50%;
-			margin: -9px 0 0 110px;
-		}
-
 	.search_form .results {
 		max-height: 570px;
 		overflow-x: hidden;
 		padding: 10px 0;
+		margin-top: -18px;
 	}
 
 	.movie_result {
 		overflow: hidden;
-		min-height: 140px;
+		height: 140px;
 	}
 
 		.movie_result .options {
-			height: 139px;
+			height: 140px;
 			border: 1px solid transparent;
 			border-width: 1px 0;
 			border-radius: 0;
@@ -107,10 +141,9 @@
 			padding: 0 15px;
 			width: 470px;
 			position: relative;
-			min-height: 100px;
+			height: 140px;
 			top: 0;
-			margin: -143px 0 0 0;
-			min-height: 140px;
+			margin: -140px 0 0 0;
 			background: #5c697b;
 			cursor: pointer;
 
@@ -139,6 +172,8 @@
 				display: inline-block;
 				vertical-align: top;
 				padding: 15px 0;
+				height: 120px;
+				overflow: hidden;
 			}
 
 			.movie_result .info .tagline {
diff --git a/couchpotato/core/plugins/movie/static/search.js b/couchpotato/core/plugins/movie/static/search.js
index f2f14c4f..1f7abb04 100644
--- a/couchpotato/core/plugins/movie/static/search.js
+++ b/couchpotato/core/plugins/movie/static/search.js
@@ -10,12 +10,23 @@ Block.Search = new Class({
 		self.el = new Element('div.search_form').adopt(
 			new Element('div.input').adopt(
 				self.input = new Element('input.inlay', {
-					'placeholder': 'Search for new movies',
+					'placeholder': 'Search & add a new movie',
 					'events': {
 						'keyup': self.keyup.bind(self),
-						'focus': self.hideResults.bind(self, false)
+						'focus': function(){
+							self.el.addClass('focused')
+						},
+						'blur': function(){
+							self.el.removeClass('focused')
+						}
 					}
 				}),
+				new Element('span.enter', {
+					'events': {
+						'click': self.keyup.bind(self)
+					},
+					'text':'Enter'
+				}),
 				new Element('a', {
 					'events': {
 						'click': self.clear.bind(self)
@@ -32,9 +43,8 @@ Block.Search = new Class({
 					}
 				}
 			}).adopt(
-				new Element('div.pointer'),
 				self.results = new Element('div.results')
-			).hide()
+			)
 		);
 
 		self.spinner = new Spinner(self.result_container);
@@ -50,6 +60,7 @@ Block.Search = new Class({
 
 		self.movies = []
 		self.results.empty()
+		self.el.removeClass('filled')
 	},
 
 	hideResults: function(bool){
@@ -57,7 +68,7 @@ Block.Search = new Class({
 
 		if(self.hidden == bool) return;
 
-		self.result_container[bool ? 'hide' : 'show']();
+		self.el[bool ? 'removeClass' : 'addClass']('shown');
 
 		if(bool){
 			History.removeEvent('change', self.hideResults.bind(self, !bool));
@@ -74,16 +85,14 @@ Block.Search = new Class({
 	keyup: function(e){
 		var self = this;
 
-		if(['up', 'down'].indexOf(e.key) > -1){
-			p('select item')
-		}
-		else if(self.q() != self.last_q) {
+		self.el[self.q() ? 'addClass' : 'removeClass']('filled')
+
+		if(self.q() != self.last_q && (['enter'].indexOf(e.key) > -1 || e.type == 'click'))
 			self.autocomplete()
-		}
 
 	},
 
-	autocomplete: function(delay){
+	autocomplete: function(){
 		var self = this;
 
 		if(!self.q()){
@@ -91,10 +100,7 @@ Block.Search = new Class({
 			return
 		}
 
-		self.spinner.show()
-
-		if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer)
-		self.autocomplete_timer = self.list.delay((delay || 300), self)
+		self.list()
 	},
 
 	list: function(){
@@ -108,6 +114,7 @@ Block.Search = new Class({
 		self.hideResults(false)
 
 		if(!cache){
+			self.spinner.show()
 			self.api_request = Api.request('movie.search', {
 				'data': {
 					'q': q
@@ -138,9 +145,15 @@ Block.Search = new Class({
 			self.movies[movie.imdb || 'r-'+Math.floor(Math.random()*10000)] = m
 
 		});
-		
+
 		if(q != self.q())
 			self.list()
+			
+		// Calculate result heights
+		var w = window.getSize(),
+			rc = self.result_container.getCoordinates();
+			
+		self.results.setStyle('max-height', (w.y - rc.top - 50) + 'px')
 
 	},
 
@@ -293,10 +306,9 @@ Block.Search.Item = new Class({
 					}) : null,
 					self.info.in_wanted ? new Element('span.in_wanted', {
 						'text': 'Already in wanted list: ' + self.info.in_wanted.label
-					}) : null,
-					self.info.in_library ? new Element('span.in_library', {
+					}) : (self.info.in_library ? new Element('span.in_library', {
 						'text': 'Already in library: ' + self.info.in_library.label
-					}) : null,
+					}) : null),
 					self.title_select = new Element('select', {
 						'name': 'title'
 					}),
diff --git a/couchpotato/static/images/sprite.png b/couchpotato/static/images/sprite.png
index 1d96a56a85c0c57e890cd05e3f33903131a953f7..8a61b25e9c136d0290f9d6d38f88430c1fb70318 100644
GIT binary patch
delta 1840
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

delta 1790
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