design pour page playlists user

app/Resources/translations/elements.fr.yml

       count:            %count_owned% partages (dont %count_favorited% mis en favoris par %count_favorited_users% utilisateurs)
 
 tag_favorites:
-  help:                 Filtrer les partages en selectionnant différents tags ci-dessous (vous pouvez en choisir plusieurs).
+  help:                 Filtrer les partages en selectionnant différents tags ci-dessous (vous pouvez en choisir plusieurs).
+
+playlist:
+  start_here:            Commencer la lecture d'ici
+  remove_element:        Retirer ce partage de la liste de lecture
+  open:                  Ouvrir
+  read:                  Lire
+  pick:                  Ajouter a mes listes
+  unpick:                Enlever de mes listes
+  gotoplaylists:         Retourner aux listes de lectures de %user_username%
+  user_title:            Listes de lectures de %user_username%
+  openplaylist:          Consulter les partages de la liste de lecture
+  delete:                Supprimer cette liste de lecture
+  play:                  Jouer la liste de lecture

src/Muzich/CoreBundle/Controller/ElementController.php

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

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

   margin-left: 0px;
 }
 
-ul.playlist_elements li.playlist_element
-{
-  background-color: #F8F8F8;
-}
-
-li.playlist_element div.actions
+li.playlist_element div.actions, li.playlist div.actions
 {
   float: left;
   margin-top: 4px;
   margin-top: 4px;
 }
 
-li.playlist_element div.actions a
+li.playlist_element div.actions a, li.playlist div.actions a
 {
   margin-left: -5px;
 }
   color: black;
 }
 
-li.playlist_element
+ul.playlist_elements li.playlist_element
 {
   border-top: 1px solid #C8C8C8;
   height: 27px;
   list-style: none outside none;
+  background-color: #F8F8F8;
 }
 
 ul.playlist_elements li.playlist_element ul.elements li.element
   border-top: none;
 }
 
+a.button img
+{
+  float: left;
+}
 
+a.button span
+{
+  float: left;
+  margin-top: 4px;
+}
+
+ul.playlists
+{
+  margin-left: 0px;
+  margin-bottom: 10px;
+}
 
+ul.playlists li.playlist
+{
+  border-top: 1px solid #C8C8C8;
+  list-style: none outside none;
+  background-color: #F8F8F8;
+}
+
+ul.playlists li.playlist a.title
+{
+  color: black;
+  font-weight: bold;
+  font-size: 110%;
+}
+
+ul.playlists li.playlist a.title:hover
+{
+  text-decoration: underline;
+}
+
+ul.playlists li.playlist ul.tags_cloud
+{
+  margin-left: 25px;
+}
+
+li.playlist div.title
+{
+  margin-left: 42px;
+  margin-top: 3px;
+}
 
 /*
 *

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

   // 1328283201_emblem-symbolic-link.png
   $('a.element_embed_open_link, a.element_name_embed_open_link').live("click", function(){
     
-     var li = $(this).parents('li.element');
+    var li = $(this).parents('li.element');
      
-     element_last_opened(li);
-     li.find('a.element_embed_close_link').show();
-     li.find('a.element_embed_open_link_text').hide();
-     li.find('div.element_embed').show();
+    element_last_opened(li);
+    li.find('a.element_embed_close_link').show();
+    li.find('a.element_embed_open_link_text').hide();
+    li.find('div.element_embed').show();
      
     if ((player = window.dynamic_player.play(
       li.find('div.element_embed'),
 
         if (response.status === 'success')
         {
-          line.find('div.content_opened').html('<ul class="elements"><li class="element">' + response.data + '</li></ul>');
+          line.find('div.content_opened').html('<ul class="elements">' + response.data + '</ul>');
         }
       });
     }
     else
     {
       line.find('div.content_opened').html('');
+      line.removeClass('open');
       line.css('height', playlist_line_height);
     }
       
     return false;
   });
   
-  $('ul.playlist_elements').sortable({
+  $('ul.playlist_elements.owned').sortable({
     update: function( event, ui ) {
       
       var form = ui.item.parents('form')
     return false;
   });
   
+  $('ul.playlist_elements a.remove_element').jConfirmAction({
+    question : string_element_removefromplaylist_confirm_sentence, 
+    yesAnswer : string_element_delete_confirm_yes, 
+    cancelAnswer : string_element_delete_confirm_no,
+    onYes: function(link){
+      
+      $.getJSON(link.attr('href'), function(response) {
+        window.ResponseController.execute(
+          response,
+          function(){},
+          function(){}
+        );
+      });
+
+      link.parents('li.playlist_element').remove();
+      return false;
+    },
+    onOpen: function(link){},
+    onClose: function(link){}
+  });
   
-  $('ul.playlist_elements a.remove_element').live('click', function () {
-    
-    $.getJSON($(this).attr('href'), function(response) {
-      window.ResponseController.execute(
-        response,
-        function(){},
-        function(){}
-      );
-    });
-    
-    $(this).parents('li.playlist_element').remove();
-    return false;
+  $('ul.playlists a.playlist_delete').jConfirmAction({
+    question : string_element_deleteplaylist_confirm_sentence, 
+    yesAnswer : string_element_delete_confirm_yes, 
+    cancelAnswer : string_element_delete_confirm_no,
+    onYes: function(link){
+      $(location).attr('href', link.attr('href'));
+    },
+    onOpen: function(link){},
+    onClose: function(link){}
   });
    
 });

src/Muzich/CoreBundle/Resources/views/Layout/head_js.html.twig

   string_removefromgroup_sentence = "{{ 'element.group.remove_from.confirm.title'|trans({}, 'elements') }}";
   string_removefromgroup_confirm_yes = "{{ 'element.group.remove_from.confirm.yes'|trans({}, 'elements') }}";
   string_removefromgroup_confirm_no = "{{ 'element.group.remove_from.confirm.no'|trans({}, 'elements') }}";
+  string_element_removefromplaylist_confirm_sentence = "{{ 'playlist.remove_element'|trans({}, 'elements') }}";
+  string_element_deleteplaylist_confirm_sentence = "{{ 'playlist.delete'|trans({}, 'elements') }}";
 
   url_home = "{{ path('home') }}";
   url_search_tag = "{{ path('search_tag') }}";

src/Muzich/PlaylistBundle/Controller/EditController.php

     $this->getPlaylistManager()->deletePlaylist($playlist);
     $this->flush();
     $this->setFlash('success', 'playlist.delete.success');
+    
     return $this->redirect($this->generateUrl('playlists_user', array('user_slug' => $this->getUser()->getSlug())));
   }
   
-  public function unpickAction($playlist_id)
+  public function unpickAction($playlist_id, $redirect_owner = false)
   {
     if (($uncondition = $this->userHaveNonConditionToMakeAction(SecurityContext::ACTION_PLAYLIST_UNPICK)) !== false)
       throw $this->createNotFoundException();
     $playlist_manager->removePickedPlaylistToUser($this->getUser(), $playlist);
     $this->flush();
     $this->setFlash('success', 'playlist.delete.success');
+    
+    if ($redirect_owner)
+      return $this->redirect($this->generateUrl('playlists_user', array('user_slug' => $playlist->getOwner()->getSlug())));
+    
     return $this->redirect($this->generateUrl('playlists_user', array('user_slug' => $this->getUser()->getSlug())));
   }
   
-  public function pickAction($playlist_id)
+  public function pickAction($playlist_id, $redirect_owner = false)
   {
     if (($uncondition = $this->userHaveNonConditionToMakeAction(SecurityContext::ACTION_PLAYLIST_PICK)) !== false)
-      return $this->jsonResponseError($uncondition);
-    
+    {
+      if ($this->getRequest()->isXmlHttpRequest())
+        return $this->jsonResponseError($uncondition);
+      throw $this->createNotFoundException();
+    }
     if (!$this->tokenIsCorrect() || !($playlist = $this->getPlaylistManager()->findOneAccessiblePlaylistWithId($playlist_id)))
-      return $this->jsonNotFoundResponse();
-    
+    {
+      if ($this->getRequest()->isXmlHttpRequest())
+        return $this->jsonNotFoundResponse();
+      throw $this->createNotFoundException();
+    }
     $this->getPlaylistManager()->addPickedPlaylistToUser($this->getUser(), $playlist);
     $this->flush();
     
-    return $this->jsonSuccessResponse();
+    if ($this->getRequest()->isXmlHttpRequest())
+      return $this->jsonSuccessResponse();
+    
+    if ($redirect_owner)
+      return $this->redirect($this->generateUrl('playlists_user', array('user_slug' => $playlist->getOwner()->getSlug())));
+    
+    return $this->redirect($this->generateUrl('playlists_user', array('user_slug' => $this->getUser()->getSlug())));
   }
   
 }

src/Muzich/PlaylistBundle/Resources/config/routing.yml

   defaults: { _controller: MuzichPlaylistBundle:Edit:delete }
 
 playlist_unpick:
-  pattern: /playlist/unpick/{playlist_id}/{token}
-  defaults: { _controller: MuzichPlaylistBundle:Edit:unpick }
+  pattern: /playlist/unpick/{playlist_id}/{token}/{redirect_owner}
+  defaults: { _controller: MuzichPlaylistBundle:Edit:unpick, redirect_owner: false }
 
 playlist_pick:
-  pattern: /playlist/pick/{playlist_id}/{token}
-  defaults: { _controller: MuzichPlaylistBundle:Edit:pick }
+  pattern: /playlist/pick/{playlist_id}/{token}/{redirect_owner}
+  defaults: { _controller: MuzichPlaylistBundle:Edit:pick, redirect_owner: false }
 
 playlist_datas_for_autoplay:
   pattern: /ajax/autoplay/playlist/datas/{playlist_id}/{offset}

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

 {% extends "MuzichFavoriteBundle::layout.html.twig" %}
 
-{% block title %}{% endblock %}
+{% block title %}{{ playlist.name }}{% endblock %}
 {% block mainbox_classes %}{% endblock %}
 
 {% block content %}
   
   <div class="top_tools">
-    
-    <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id }) }}" >
-      Lire
-    </a>
-    
-    {% if app.user %}
-      {% if not playlist.owned(app.user) and viewed_user.id != app.user.id %}
-        {% if not app.user.havePlaylistPicked(playlist) %}
-          <a class="playlist_pick" href="{{ path_token('playlist_pick', { 'playlist_id' : playlist.id }) }}" >
-            P
-          </a>
-        {% else %}
-          <a class="playlist_unpick" href="{{ path_token('playlist_unpick', { 'playlist_id' : playlist.id }) }}" >
-            uP
-          </a>
+    <div class="show_options">
+      
+      <a class="autoplay_playlist button darkbutton" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id }) }}" >
+        <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
+        <span>{{ 'playlist.read'|trans({}, 'elements') }}</span>
+      </a>
+
+      {% if app.user %}
+        {% if not playlist.owned(app.user) and viewed_user.id != app.user.id %}
+          {% if not app.user.havePlaylistPicked(playlist) %}
+            <a class="playlist_pick button darkbutton" href="{{ path_token('playlist_pick', { 'playlist_id' : playlist.id }) }}" >
+              {{ 'playlist.pick'|trans({}, 'elements') }}
+            </a>
+          {% else %}
+            <a class="playlist_unpick button darkbutton" href="{{ path_token('playlist_unpick', { 'playlist_id' : playlist.id }) }}" >
+              {{ 'playlist.unpick'|trans({}, 'elements') }}
+            </a>
+          {% endif %}
         {% endif %}
       {% endif %}
-    {% endif %}
+      
+    </div>
+    
+    <h1>{{ playlist.name }}</h1>
     
-    <h2>{{ playlist.name }}</h2>
+    <a href="{{ path('playlists_user', { 'user_slug' : playlist.owner.slug }) }}">
+      {{ 'playlist.gotoplaylists'|trans({ '%user_username%' : playlist.owner.username }, 'elements') }}
+    </a>
     
     {% include "MuzichCoreBundle:Tag:tag_cloud.html.twig" with {
       'tags' : playlist.tags
     
     {% if playlist.elements|length %}
       <form action="{{ path_token('playlist_update_order', { 'playlist_id' : playlist.id }) }}" method="post">
-        <ul class="playlist_elements">
+        <ul class="playlist_elements {% if app.user%}{% if playlist.owned(app.user) %}owned{% endif %}{% endif %}">
           {% for element in playlist.elements %}
             <li class="playlist_element">
               
               
               <div class="actions">
                 
-                <a class="drag" href="#">
-                  <img src="{{ asset('/img/drag3.png') }}" alt="drag" />
-                </a>
+                {% if app.user%}
+                  {% if playlist.owned(app.user) %}
+                    <a class="drag" href="#">
+                      <img src="{{ asset('/img/drag3.png') }}" alt="drag" />
+                    </a>
+                  {% endif %}
+                {% endif %}
                 
                 {% if element.type|can_autoplay_type %}
-                  <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}">
+                  <a class="autoplay_playlist" 
+                    href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}"
+                    title="{{ 'playlist.start_here'|trans({}, 'elements') }}"
+                  >
                     <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>
+                
+                {% if app.user%}
+                  {% if playlist.owned(app.user) %}
+                    <a 
+                      class="remove_element" 
+                      href="{{ path_token('playlist_remove_element', { 'playlist_id' : playlist.id, 'element_id' : element.id }) }}"
+                      title="{{ 'playlist.remove_element'|trans({}, 'elements') }}"
+                    >
+                      <img src="{{ asset('/img/icon_close_2.png') }}" alt="delete" />
+                    </a>
+                  {% endif %}
+                {% endif %}
               </div>
               
               <div class="actions_right">
-                <a class="open_element" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
+                <a 
+                  class="open_element" 
+                  href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}"
+                  title="{{ 'playlist.open'|trans({}, 'elements') }}"
+                  >
                   <img src="{{ asset('/img/icon_more_2.png') }}" alt="open" />
                 </a>
               </div>

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

 {% extends "MuzichHomeBundle::layout.html.twig" %}
 
-{% block title %}{% endblock %}
+{% block title %}{{ 'playlist.user_title'|trans({'%user_username%' : viewed_user.username }, 'elements') }}{% endblock %}
 {% block mainbox_classes %}{% endblock %}
 
 {% block content %}
   
-  {% if playlists|length %}
-  <ul class="playlists">
-    {% for playlist in playlists %}
-      <li class="playlist">
-        
-        <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id }) }}" >
-          Lire
-        </a>
-        
-        <a href="{{ path('playlist', { 'user_slug' : playlist.owner.slug, 'playlist_id' : playlist.id }) }}">
-          {{ playlist.name }}
-        </a>
-        
-        {% if app.user %}
-          {% if viewed_user.id == app.user.id %}
-            {% if playlist.owned(app.user) %}
-              <a class="playlist_delete" href="{{ path_token('playlist_delete', { 'playlist_id' : playlist.id }) }}" >
-                X
-              </a>
-            {% else %}
-              <a class="playlist_unpick" href="{{ path_token('playlist_unpick', { 'playlist_id' : playlist.id }) }}" >
-                X
-              </a>
+  <div class="top_tools">
+    
+    <div class="show_options">
+      
+      <a class="button darkbutton" href="{{ path('show_user', {'slug' : viewed_user.slug}) }}" >
+        {{ 'user.view_profile'|trans({}, 'users') }}
+      </a>
+      
+    </div>
+    
+    <h1>{{ 'playlist.user_title'|trans({'%user_username%' : viewed_user.username }, 'elements') }}</h1>
+
+    {% if playlists|length %}
+    <ul class="playlists">
+      {% for playlist in playlists %}
+        <li class="playlist">
+
+          <div class="actions">
+            
+            <a 
+              class="autoplay_playlist" 
+              href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id }) }}"
+              title="{{ 'playlist.play'|trans({}, 'elements') }}"
+            >
+              <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
+            </a>
+
+            {% if app.user %}
+              {% if not playlist.owned(app.user) and viewed_user.id != app.user.id %}
+                {% if not app.user.havePlaylistPicked(playlist) %}
+                  <a 
+                    class="playlist_pick_noajax" 
+                    href="{{ path_token('playlist_pick', { 
+                      'playlist_id'    : playlist.id,
+                      'redirect_owner' : true
+                    }) }}" 
+                    title="{{ 'playlist.pick'|trans({}, 'elements') }}"
+                  >
+                    <img src="{{ asset('/img/tick_untick.png') }}" alt="playlist" />
+                  </a>
+                {% else %}
+                  <a 
+                    class="playlist_unpick_noajax" 
+                    href="{{ path_token('playlist_unpick', { 
+                      'playlist_id'    : playlist.id,
+                      'redirect_owner' : true
+                    }) }}"
+                    title="{{ 'playlist.unpick'|trans({}, 'elements') }}"
+                  >
+                    <img src="{{ asset('/img/tick_ticked.png') }}" alt="playlist" />
+                  </a>
+                {% endif %}
+              {% endif %}
             {% endif %}
-          {% endif %}
-        {% endif %}
-        
-        {% if app.user %}
-          {% if not playlist.owned(app.user) and viewed_user.id != app.user.id %}
-            {% if not app.user.havePlaylistPicked(playlist) %}
-              <a class="playlist_pick" href="{{ path_token('playlist_pick', { 'playlist_id' : playlist.id }) }}" >
-                P
-              </a>
-            {% else %}
-              <a class="playlist_unpick" href="{{ path_token('playlist_unpick', { 'playlist_id' : playlist.id }) }}" >
-                uP
-              </a>
+            
+            {% if app.user %}
+            {% if viewed_user.id == app.user.id %}
+              {% if playlist.owned(app.user) %}
+                <a 
+                  class="playlist_delete" 
+                  href="{{ path_token('playlist_delete', { 'playlist_id' : playlist.id }) }}" 
+                  title="{{ 'playlist.delete'|trans({}, 'elements') }}"
+                >
+                  <img src="{{ asset('/img/icon_close_2.png') }}" alt="delete" />
+                </a>
+              {% else %}
+                <a 
+                  class="playlist_unpick" 
+                  href="{{ path_token('playlist_unpick', { 'playlist_id' : playlist.id }) }}"
+                  title="{{ 'playlist.unpick'|trans({}, 'elements') }}"
+                >
+                  <img src="{{ asset('/img/icon_close_2.png') }}" alt="delete" />
+                </a>
+              {% endif %}
             {% endif %}
           {% endif %}
-        {% endif %}
-      
-        
-        {% include "MuzichCoreBundle:Tag:tag_cloud.html.twig" with {
-          'tags' : playlist.tags
-        } %}
-        
-      </li>
-    {% endfor %}
-  </ul>
-  {% endif %}
+          
+          </div>
+
+          <div class="title">
+            <a 
+              class="title" 
+              href="{{ path('playlist', { 'user_slug' : playlist.owner.slug, 'playlist_id' : playlist.id }) }}"
+              title="{{ 'playlist.openplaylist'|trans({}, 'elements') }}"
+            >
+              {{ playlist.name }}
+            </a>
+          </div>
+          
+
+          {% include "MuzichCoreBundle:Tag:tag_cloud.html.twig" with {
+            'tags' : playlist.tags
+          } %}
+
+        </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  
+  </div>
   
 {% endblock %}