changed the position of the search textfield. popcorn-port
authorhamidouk
Mon, 02 Jan 2012 16:41:12 +0100
branchpopcorn-port
changeset 564 a560a162f444
parent 563 4816e3425933
child 565 903435828e6c
changed the position of the search textfield.
src/css/LdtPlayer.css
src/js/widgets/playerWidget.js
src/templates/player.html
--- a/src/css/LdtPlayer.css	Mon Jan 02 15:46:42 2012 +0100
+++ b/src/css/LdtPlayer.css	Mon Jan 02 16:41:12 2012 +0100
@@ -192,6 +192,15 @@
   background-position: 0 -50px;
 }
 
+.LdtSearch {
+  display: none;
+  width: 165px;
+  height: 25px;
+  border: 1px;
+  border-color: #CFCFCF;
+  float: left;
+  text-align: center;
+}
 
 .Ldt-Time {
   position: inherit;
--- a/src/js/widgets/playerWidget.js	Mon Jan 02 15:46:42 2012 +0100
+++ b/src/js/widgets/playerWidget.js	Mon Jan 02 16:41:12 2012 +0100
@@ -13,8 +13,8 @@
 	var height = this.height;
 	var heightS = this.height-20;
 	  
-	var Player_templ = Mustache.to_html(IriSP.player_template, {"share_template" : IriSP.share_template});
-  this.selector.append(Player_templ);		
+	var playerTempl = IriSP.templToHTML(IriSP.player_template, {"share_template" : IriSP.share_template});
+  this.selector.append(playerTempl);		
 	
   this.selector.children(".Ldt-controler").show();
     
@@ -41,9 +41,11 @@
 
   this.selector.find(".Ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
   
+  /*
   var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position();
   var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"});
-  this.selector.append(searchBox);
+  this.selector.find(".Ldt-CtrlSearch").after(searchBox);
+  */
   
   // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)
   this.selector.hover(function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOver"); }, 
@@ -150,7 +152,7 @@
 
     /* show the search field if it is not shown */
   	if ( this._searchBlockOpen == false ) {      
-      this.selector.find(".LdtSearch").show(100);
+      this.selector.find(".LdtSearch").show("blind", { direction: "horizontal"}, 100);
       
       this.selector.find(".LdtSearchInput").css('background-color','#fff');
       this.selector.find(".LdtSearchInput").focus();
@@ -172,7 +174,7 @@
 	} else {
       this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
       this.selector.find(".LdtSearchInput").attr('value','');
-      this.selector.find(".LdtSearch").hide(100);
+      this.selector.find(".LdtSearch").hide("blind", { direction: "horizontal"}, 75);
       
       // unbind the watcher event.
       this.selector.find(".LdtSearchInput").unbind('keypress set');
--- a/src/templates/player.html	Mon Jan 02 15:46:42 2012 +0100
+++ b/src/templates/player.html	Mon Jan 02 16:41:12 2012 +0100
@@ -1,16 +1,20 @@
 {{! template for the radio player }}
 <div class='Ldt-controler demo'>
 	<div class='Ldt-LeftPlayerControls'>
-    <div class='Ldt-button Ldt-CtrlPlay'></div>
-		<div class='Ldt-button Ldt-CtrlAnnotate'></div>
-    <div class='Ldt-button Ldt-CtrlSearch'></div>
-	</div>	
+    <div class='Ldt-button Ldt-CtrlPlay' title='Play/Pause'></div>
+		<div class='Ldt-button Ldt-CtrlAnnotate' title='Annotate'></div>
+    <div class='Ldt-button Ldt-CtrlSearch' title='Search'></div>
+    <div class='LdtSearch'>
+      <input class='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;'></input>
+    </div>
+    
+	</div>
 	<div class='Ldt-RightPlayerControls'>
     <div class='Ldt-Time'>
-      <div class='Ldt-ElapsedTime'>00:00</div>
+      <div class='Ldt-ElapsedTime' title='Elapsed time'>00:00</div>
       <div class='Ldt-TimeSeparator'>/</div>
-      <div class='Ldt-TotalTime'>00:00</div>
+      <div class='Ldt-TotalTime' title='Total time'>00:00</div>
     </div>
-		<div class='Ldt-button Ldt-CtrlSound'></div>
+		<div class='Ldt-button Ldt-CtrlSound' title='Mute/Unmute'></div>
 	</div>
 </div>