design plus agreable pour la liste de partage d'une playlist

src/Muzich/CoreBundle/Controller/ElementController.php

     
     $html = $this->render('MuzichCoreBundle:SearchElement:element.html.twig', array(
       'element'               => $element,
-      'display_edit_actions'  => true,
+      'display_edit_actions'  => false,
       'display_player'        => true,
       'display_comments'      => true
     ))->getContent();

src/Muzich/CoreBundle/Extension/MyTwigExtension.php

       'date_epurate'           => new \Twig_Filter_Method($this, 'date_epurate'),
       'form_has_errors'        => new \Twig_Filter_Method($this, 'form_has_errors'),
       'format_score'           => new \Twig_Filter_Method($this, 'format_score'),
-      'can_autoplay'           => new \Twig_Filter_Method($this, 'can_autoplay')
+      'can_autoplay'           => new \Twig_Filter_Method($this, 'can_autoplay'),
+      'can_autoplay_type'      => new \Twig_Filter_Method($this, 'can_autoplay_type')
     );
   }
   
     return false;
   }
   
+  public function can_autoplay_type($element_type)
+  {
+    if (in_array($element_type, $this->params['autoplay_sites_enabled']))
+    {
+      return true;
+    }
+    return false;
+  }
+  
   protected function datetime2timestamp($string)
   {
     list($date, $time) = explode(' ', $string);

src/Muzich/CoreBundle/Resources/public/css/main.css

   text-decoration: underline;
 }
 
-@-webkit-keyframes clignote
-{
-  0%{box-shadow:0px 0px 10px #909090;}
-  50%{box-shadow:0px 0px 2px #909090;}
-  100%{box-shadow:0px 0px 10px #909090;}
-}
-
-@-moz-keyframes clignote
-{
-  0%{box-shadow:0px 0px 10px #909090;}
-  50%{box-shadow:0px 0px 2px #909090;}
-  100%{box-shadow:0px 0px 10px #909090;}
-}
-
-@-ms-keyframes clignote
-{
-  0%{box-shadow:0px 0px 10px #909090;}
-  50%{box-shadow:0px 0px 2px #909090;}
-  100%{box-shadow:0px 0px 10px #909090;}
-}
-
-@-o-keyframes clignote
-{
-  0%{box-shadow:0px 0px 10px #909090;}
-  50%{box-shadow:0px 0px 2px #909090;}
-  100%{box-shadow:0px 0px 10px #909090;}
-}
-
-@keyframes clignote
-{
-  0%{box-shadow:0px 0px 10px #909090;}
-  50%{box-shadow:0px 0px 2px #909090;}
-  100%{box-shadow:0px 0px 10px #909090;}
-}
-
-
-.flashing
-{
-  font-weight: bold;
-  text-shadow: 0 1px 0 white;
-  border-radius: 3px;
-  padding: 5px 10px;
-  box-shadow:0px 0px 10px #909090;
-  
-  -webkit-animation-name: clignote;
-  -webkit-animation-duration: 1s;
-  -webkit-animation-iteration-count:infinite;
-  
-  -moz-animation-name: clignote;
-  -moz-animation-duration: 1s;
-  -moz-animation-iteration-count:infinite;
-  
-  -ms-animation-name: clignote;
-  -ms-animation-duration: 1s;
-  -ms-animation-iteration-count:infinite;
-  
-  -o-animation-name: clignote;
-  -o-animation-duration: 1s;
-  -o-animation-iteration-count:infinite;
-  
-  animation-name: clignote;
-  animation-duration: 1s;
-  animation-iteration-count:infinite;
-}
-
 div.myaccount_part.flashing
 {
   padding: 2px;
   border: 1px solid red;
   width: 320px;
   background-color: white;
+}
+
+ul.playlist_elements
+{
+  margin-left: 0px;
+}
+
+ul.playlist_elements li.playlist_element
+{
+  background-color: #F8F8F8;
+}
+
+li.playlist_element div.actions
+{
+  float: left;
+  margin-top: 4px;
+}
+
+li.playlist_element div.actions img.autoplay_off
+{
+  margin-left: -5px;
+}
+
+li.playlist_element div.actions_right
+{
+  float: right;
+  margin-top: 4px;
+}
+
+li.playlist_element div.actions a
+{
+  margin-left: -5px;
+}
+
+li.playlist_element div.actions a.drag
+{
+  cursor: move;
+}
+
+li.playlist_element div.title
+{
+  margin-left: 53px;
+  margin-top: 4px;
+}
+
+ul.playlist_elements li.playlist_element a
+{
+  color: black;
+}
+
+li.playlist_element
+{
+  border-top: 1px solid #C8C8C8;
+  height: 27px;
+  list-style: none outside none;
+}
+
+ul.playlist_elements li.playlist_element ul.elements li.element
+{
+  border-top: none;
+}
+
+
+
+
+/*
+*
+*
+*
+*/
+
+@-webkit-keyframes clignote
+{
+  0%{box-shadow:0px 0px 10px #909090;}
+  50%{box-shadow:0px 0px 2px #909090;}
+  100%{box-shadow:0px 0px 10px #909090;}
+}
+
+@-moz-keyframes clignote
+{
+  0%{box-shadow:0px 0px 10px #909090;}
+  50%{box-shadow:0px 0px 2px #909090;}
+  100%{box-shadow:0px 0px 10px #909090;}
+}
+
+@-ms-keyframes clignote
+{
+  0%{box-shadow:0px 0px 10px #909090;}
+  50%{box-shadow:0px 0px 2px #909090;}
+  100%{box-shadow:0px 0px 10px #909090;}
+}
+
+@-o-keyframes clignote
+{
+  0%{box-shadow:0px 0px 10px #909090;}
+  50%{box-shadow:0px 0px 2px #909090;}
+  100%{box-shadow:0px 0px 10px #909090;}
+}
+
+@keyframes clignote
+{
+  0%{box-shadow:0px 0px 10px #909090;}
+  50%{box-shadow:0px 0px 2px #909090;}
+  100%{box-shadow:0px 0px 10px #909090;}
+}
+
+
+.flashing
+{
+  font-weight: bold;
+  text-shadow: 0 1px 0 white;
+  border-radius: 3px;
+  padding: 5px 10px;
+  box-shadow:0px 0px 10px #909090;
+  
+  -webkit-animation-name: clignote;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count:infinite;
+  
+  -moz-animation-name: clignote;
+  -moz-animation-duration: 1s;
+  -moz-animation-iteration-count:infinite;
+  
+  -ms-animation-name: clignote;
+  -ms-animation-duration: 1s;
+  -ms-animation-iteration-count:infinite;
+  
+  -o-animation-name: clignote;
+  -o-animation-duration: 1s;
+  -o-animation-iteration-count:infinite;
+  
+  animation-name: clignote;
+  animation-duration: 1s;
+  animation-iteration-count:infinite;
 }

src/Muzich/CoreBundle/Resources/public/js/muzich.js

     *PLAYLISTS
     */
    
+  var playlist_line_height = 0;
   $('ul.playlist_elements li a.open_element').live('click', function(){
     
-    // Pour le moment
-    return false;
-    
     var line = $(this).parents('li.playlist_element');
     
-    $.getJSON($(this).attr('href'), function(response) {
-      
-      window.ResponseController.execute(
-        response,
-        function(){},
-        function(){}
-      );
-      
-      if (response.status == 'success')
-      {
-        line.append('<ul class="elements"><li class="element">' + response.data + '</li></ul>');
-      }
+    if (!line.hasClass('open'))
+    {
+      playlist_line_height = line.height();
+      line.css('height', 'auto');
+      line.find('div.content_opened').html('<img class="loader" src="/bundles/muzichcore/img/ajax-loader.gif" alt="loading..." />');
+      line.addClass('open');
+
+      $.getJSON($(this).attr('href'), function(response) {
+
+        window.ResponseController.execute(
+          response,
+          function(){},
+          function(){}
+        );
+
+        if (response.status === 'success')
+        {
+          line.find('div.content_opened').html('<ul class="elements"><li class="element">' + response.data + '</li></ul>');
+        }
+      });
+    }
+    else
+    {
+      line.find('div.content_opened').html('');
+      line.css('height', playlist_line_height);
+    }
       
-    });
     
     return false;
   });

src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig

               {% endif %}
                target="_blank"
             >
-              <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="open in playlist" />
+              <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
             </a>
           </li>
         {% endif %}

src/Muzich/CoreBundle/lib/Collection/ElementCollectionManager.php

   
   const ATTRIBUTE_ID   = 'Id';
   const ATTRIBUTE_NAME = 'Name';
+  const ATTRIBUTE_TYPE = 'Type';
   
   protected $allow_duplicates = true;
   protected $schema = array(
     self::ATTRIBUTE_ID,
-    self::ATTRIBUTE_NAME
+    self::ATTRIBUTE_NAME,
+    self::ATTRIBUTE_TYPE
   );
   
   protected $object_reference_attribute = self::ATTRIBUTE_ID;

src/Muzich/PlaylistBundle/Resources/views/Show/show.html.twig

         <ul class="playlist_elements">
           {% for element in playlist.elements %}
             <li class="playlist_element">
+              
               <input type="hidden" name="elements[]"  value="{{ element.id }}" />
-              <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}">
-                play
-              </a>
-              <a class="open_element" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
-                {{ element.name }}
-              </a>
-              <a class="remove_element" href="{{ path_token('playlist_remove_element', { 'playlist_id' : playlist.id, 'element_id' : element.id }) }}">
-                X
-              </a>
+              
+              
+              <div class="actions">
+                
+                <a class="drag" href="#">
+                  <img src="{{ asset('/img/drag3.png') }}" alt="drag" />
+                </a>
+                
+                {% if element.type|can_autoplay_type %}
+                  <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}">
+                    <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
+                  </a>
+                {% else %}
+                  <img class="autoplay_off" src="{{ asset('/img/1361037350_control_play_off.png') }}" alt="playlist" />
+                {% endif %}
+
+                <a class="remove_element" href="{{ path_token('playlist_remove_element', { 'playlist_id' : playlist.id, 'element_id' : element.id }) }}">
+                  <img src="{{ asset('/img/icon_close_2.png') }}" alt="delete" />
+                </a>
+              </div>
+              
+              <div class="actions_right">
+                <a class="open_element" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
+                  <img src="{{ asset('/img/icon_more_2.png') }}" alt="open" />
+                </a>
+              </div>
+              
+              <div class="title">
+                <a class="title" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
+                  {{ element.name }}
+                </a>
+              </div>
+              
+              <div class="content_opened"></div>
+              
             </li>
           {% endfor %}
         </ul>