Evolution #70: Zone de tag plus claires

app/Resources/translations/userui.fr.yml

@@ -11,7 +11,7 @@ start:
   tags:
     title:     Choisissez vos tags préférés
     remind:    Vous pourrez egallement modifier vos tags préféré dans la partie 'mon compte'.
-
+    
 my_account: 
   title:          Mon compte
   username:         Nom d'utilisateur
@@ -29,6 +29,8 @@ tags:
            Tapez dans le cadre ci-dessous le mot que vous souhaitez utiliser. 
            Une liste de tags disponibles apparaitra et vous pourrez choisir le 
            tag voulu dans la liste. Vous pouvez choisir plueurs tags.
+  inputtext:
+    help:      Tapez votre tag ici
            
 filter:
   network: "Résultats de "

src/Muzich/CoreBundle/Resources/views/Tag/tagsPrompt.html.twig

@@ -25,6 +25,7 @@
     {% endfor %}
   {% endif %}
   
+  tag_text_help = "{{ 'tags.inputtext.help'|trans({}, 'userui') }}";
   var options = new Array();
   options.form_name  = "{{ form_name }}";
   options.tag_init   = taginit;
@@ -56,16 +57,6 @@
         $.getJSON('/app_dev.php/fr/search/tag/'+req.term, function(data) {
           responseFn( data );
         });
-        
-          //var sstr = $.trim(req.term);
-          //var re = $.ui.autocomplete.escapeRegex(sstr);
-          //var matcher = new RegExp(re, "i" );
-          //var a = $.grep( taglist, function(item,index){
-          //    return matcher.test(item);
-          //});
-          //console.debug(a);
-          
-          //responseFn( a );
       },
       minLength: 2,
       select: function(e, ui) {
@@ -76,5 +67,23 @@
           }
       }
   });  
+  
+  $('#tags_prompt_{{ form_name }} input[type="text"]').val(tag_text_help);
+  $('#tags_prompt_{{ form_name }} input[type="text"]').focus(function(){
+    if ($(this).val() == tag_text_help)
+    {
+      $(this).val('');
+      //$(this).addClass('focuson');
+      //$(this).removeClass('focusout');
+    }
+  });
+  $('#tags_prompt_{{ form_name }} input[type="text"]').focusout(function(){
+    if (!$(this).val())
+    {
+      $(this).val(tag_text_help);
+      //$(this).removeClass('focuson');
+      //$(this).addClass('focusout');
+    }
+  });
     
 </script>

web/bundles/muzichcore/css/main.css

@@ -307,8 +307,10 @@ background:#fff;
 list-style:none;
 position: absolute;
 cursor: default;
+list-style-type: none;
+width: 300px;
 }
-.ui-autocomplete li {margin:0;}
+.ui-autocomplete li {margin-right:8px; float: left;}
 .ui-autocomplete li a {display:block; padding:4px;}
 .ui-autocomplete li a.ui-state-hover,
 .ui-autocomplete li a:hover {background:#eee;} 
@@ -446,4 +448,36 @@ input.main
 input.clear, input.mytags
 {
   font-size: 80%;
+}
+
+ul.tagbox, ul.tagbox input[type="text"]
+{
+  background-color: #bdf1fe;
+}
+
+ul.tagbox input[type="text"]
+{
+  height: 14px;
+  margin-top: 3px;
+  width: 150px;
+  color: #676767;
+  font-weight: bold;
+}
+
+ul.tagbox input[type="text"]:FOCUS
+{
+  background-image: linear-gradient(left , rgb(137,232,253) 10%, rgb(168,238,255) 49%, rgb(189,241,254) 100%);
+  background-image: -o-linear-gradient(left , rgb(137,232,253) 10%, rgb(168,238,255) 49%, rgb(189,241,254) 100%);
+  background-image: -moz-linear-gradient(left , rgb(137,232,253) 10%, rgb(168,238,255) 49%, rgb(189,241,254) 100%);
+  background-image: -webkit-linear-gradient(left , rgb(137,232,253) 10%, rgb(168,238,255) 49%, rgb(189,241,254) 100%);
+  background-image: -ms-linear-gradient(left , rgb(137,232,253) 10%, rgb(168,238,255) 49%, rgb(189,241,254) 100%);
+
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    right bottom,
+    color-stop(0.1, rgb(137,232,253)),
+    color-stop(0.49, rgb(168,238,255)),
+    color-stop(1, rgb(189,241,254))
+  );
 }