Browse Source

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

Bastien Sevajol 11 years ago
parent
commit
781e039e8e

+ 1 - 1
src/Muzich/CoreBundle/Controller/ElementController.php View File

@@ -1089,7 +1089,7 @@ class ElementController extends Controller
1089 1089
     
1090 1090
     $html = $this->render('MuzichCoreBundle:SearchElement:element.html.twig', array(
1091 1091
       'element'               => $element,
1092
-      'display_edit_actions'  => true,
1092
+      'display_edit_actions'  => false,
1093 1093
       'display_player'        => true,
1094 1094
       'display_comments'      => true
1095 1095
     ))->getContent();

+ 11 - 1
src/Muzich/CoreBundle/Extension/MyTwigExtension.php View File

@@ -28,7 +28,8 @@ class MyTwigExtension extends \Twig_Extension {
28 28
       'date_epurate'           => new \Twig_Filter_Method($this, 'date_epurate'),
29 29
       'form_has_errors'        => new \Twig_Filter_Method($this, 'form_has_errors'),
30 30
       'format_score'           => new \Twig_Filter_Method($this, 'format_score'),
31
-      'can_autoplay'           => new \Twig_Filter_Method($this, 'can_autoplay')
31
+      'can_autoplay'           => new \Twig_Filter_Method($this, 'can_autoplay'),
32
+      'can_autoplay_type'      => new \Twig_Filter_Method($this, 'can_autoplay_type')
32 33
     );
33 34
   }
34 35
   
@@ -56,6 +57,15 @@ class MyTwigExtension extends \Twig_Extension {
56 57
     return false;
57 58
   }
58 59
   
60
+  public function can_autoplay_type($element_type)
61
+  {
62
+    if (in_array($element_type, $this->params['autoplay_sites_enabled']))
63
+    {
64
+      return true;
65
+    }
66
+    return false;
67
+  }
68
+  
59 69
   protected function datetime2timestamp($string)
60 70
   {
61 71
     list($date, $time) = explode(' ', $string);

+ 134 - 65
src/Muzich/CoreBundle/Resources/public/css/main.css View File

@@ -2089,71 +2089,6 @@ li.user_name a:hover
2089 2089
   text-decoration: underline;
2090 2090
 }
2091 2091
 
2092
-@-webkit-keyframes clignote
2093
-{
2094
-  0%{box-shadow:0px 0px 10px #909090;}
2095
-  50%{box-shadow:0px 0px 2px #909090;}
2096
-  100%{box-shadow:0px 0px 10px #909090;}
2097
-}
2098
-
2099
-@-moz-keyframes clignote
2100
-{
2101
-  0%{box-shadow:0px 0px 10px #909090;}
2102
-  50%{box-shadow:0px 0px 2px #909090;}
2103
-  100%{box-shadow:0px 0px 10px #909090;}
2104
-}
2105
-
2106
-@-ms-keyframes clignote
2107
-{
2108
-  0%{box-shadow:0px 0px 10px #909090;}
2109
-  50%{box-shadow:0px 0px 2px #909090;}
2110
-  100%{box-shadow:0px 0px 10px #909090;}
2111
-}
2112
-
2113
-@-o-keyframes clignote
2114
-{
2115
-  0%{box-shadow:0px 0px 10px #909090;}
2116
-  50%{box-shadow:0px 0px 2px #909090;}
2117
-  100%{box-shadow:0px 0px 10px #909090;}
2118
-}
2119
-
2120
-@keyframes clignote
2121
-{
2122
-  0%{box-shadow:0px 0px 10px #909090;}
2123
-  50%{box-shadow:0px 0px 2px #909090;}
2124
-  100%{box-shadow:0px 0px 10px #909090;}
2125
-}
2126
-
2127
-
2128
-.flashing
2129
-{
2130
-  font-weight: bold;
2131
-  text-shadow: 0 1px 0 white;
2132
-  border-radius: 3px;
2133
-  padding: 5px 10px;
2134
-  box-shadow:0px 0px 10px #909090;
2135
-  
2136
-  -webkit-animation-name: clignote;
2137
-  -webkit-animation-duration: 1s;
2138
-  -webkit-animation-iteration-count:infinite;
2139
-  
2140
-  -moz-animation-name: clignote;
2141
-  -moz-animation-duration: 1s;
2142
-  -moz-animation-iteration-count:infinite;
2143
-  
2144
-  -ms-animation-name: clignote;
2145
-  -ms-animation-duration: 1s;
2146
-  -ms-animation-iteration-count:infinite;
2147
-  
2148
-  -o-animation-name: clignote;
2149
-  -o-animation-duration: 1s;
2150
-  -o-animation-iteration-count:infinite;
2151
-  
2152
-  animation-name: clignote;
2153
-  animation-duration: 1s;
2154
-  animation-iteration-count:infinite;
2155
-}
2156
-
2157 2092
 div.myaccount_part.flashing
2158 2093
 {
2159 2094
   padding: 2px;
@@ -2240,4 +2175,138 @@ div.playlists_prompt
2240 2175
   border: 1px solid red;
2241 2176
   width: 320px;
2242 2177
   background-color: white;
2178
+}
2179
+
2180
+ul.playlist_elements
2181
+{
2182
+  margin-left: 0px;
2183
+}
2184
+
2185
+ul.playlist_elements li.playlist_element
2186
+{
2187
+  background-color: #F8F8F8;
2188
+}
2189
+
2190
+li.playlist_element div.actions
2191
+{
2192
+  float: left;
2193
+  margin-top: 4px;
2194
+}
2195
+
2196
+li.playlist_element div.actions img.autoplay_off
2197
+{
2198
+  margin-left: -5px;
2199
+}
2200
+
2201
+li.playlist_element div.actions_right
2202
+{
2203
+  float: right;
2204
+  margin-top: 4px;
2205
+}
2206
+
2207
+li.playlist_element div.actions a
2208
+{
2209
+  margin-left: -5px;
2210
+}
2211
+
2212
+li.playlist_element div.actions a.drag
2213
+{
2214
+  cursor: move;
2215
+}
2216
+
2217
+li.playlist_element div.title
2218
+{
2219
+  margin-left: 53px;
2220
+  margin-top: 4px;
2221
+}
2222
+
2223
+ul.playlist_elements li.playlist_element a
2224
+{
2225
+  color: black;
2226
+}
2227
+
2228
+li.playlist_element
2229
+{
2230
+  border-top: 1px solid #C8C8C8;
2231
+  height: 27px;
2232
+  list-style: none outside none;
2233
+}
2234
+
2235
+ul.playlist_elements li.playlist_element ul.elements li.element
2236
+{
2237
+  border-top: none;
2238
+}
2239
+
2240
+
2241
+
2242
+
2243
+/*
2244
+*
2245
+*
2246
+*
2247
+*/
2248
+
2249
+@-webkit-keyframes clignote
2250
+{
2251
+  0%{box-shadow:0px 0px 10px #909090;}
2252
+  50%{box-shadow:0px 0px 2px #909090;}
2253
+  100%{box-shadow:0px 0px 10px #909090;}
2254
+}
2255
+
2256
+@-moz-keyframes clignote
2257
+{
2258
+  0%{box-shadow:0px 0px 10px #909090;}
2259
+  50%{box-shadow:0px 0px 2px #909090;}
2260
+  100%{box-shadow:0px 0px 10px #909090;}
2261
+}
2262
+
2263
+@-ms-keyframes clignote
2264
+{
2265
+  0%{box-shadow:0px 0px 10px #909090;}
2266
+  50%{box-shadow:0px 0px 2px #909090;}
2267
+  100%{box-shadow:0px 0px 10px #909090;}
2268
+}
2269
+
2270
+@-o-keyframes clignote
2271
+{
2272
+  0%{box-shadow:0px 0px 10px #909090;}
2273
+  50%{box-shadow:0px 0px 2px #909090;}
2274
+  100%{box-shadow:0px 0px 10px #909090;}
2275
+}
2276
+
2277
+@keyframes clignote
2278
+{
2279
+  0%{box-shadow:0px 0px 10px #909090;}
2280
+  50%{box-shadow:0px 0px 2px #909090;}
2281
+  100%{box-shadow:0px 0px 10px #909090;}
2282
+}
2283
+
2284
+
2285
+.flashing
2286
+{
2287
+  font-weight: bold;
2288
+  text-shadow: 0 1px 0 white;
2289
+  border-radius: 3px;
2290
+  padding: 5px 10px;
2291
+  box-shadow:0px 0px 10px #909090;
2292
+  
2293
+  -webkit-animation-name: clignote;
2294
+  -webkit-animation-duration: 1s;
2295
+  -webkit-animation-iteration-count:infinite;
2296
+  
2297
+  -moz-animation-name: clignote;
2298
+  -moz-animation-duration: 1s;
2299
+  -moz-animation-iteration-count:infinite;
2300
+  
2301
+  -ms-animation-name: clignote;
2302
+  -ms-animation-duration: 1s;
2303
+  -ms-animation-iteration-count:infinite;
2304
+  
2305
+  -o-animation-name: clignote;
2306
+  -o-animation-duration: 1s;
2307
+  -o-animation-iteration-count:infinite;
2308
+  
2309
+  animation-name: clignote;
2310
+  animation-duration: 1s;
2311
+  animation-iteration-count:infinite;
2243 2312
 }

+ 27 - 16
src/Muzich/CoreBundle/Resources/public/js/muzich.js View File

@@ -3091,27 +3091,38 @@ $(document).ready(function(){
3091 3091
     *PLAYLISTS
3092 3092
     */
3093 3093
    
3094
+  var playlist_line_height = 0;
3094 3095
   $('ul.playlist_elements li a.open_element').live('click', function(){
3095 3096
     
3096
-    // Pour le moment
3097
-    return false;
3098
-    
3099 3097
     var line = $(this).parents('li.playlist_element');
3100 3098
     
3101
-    $.getJSON($(this).attr('href'), function(response) {
3102
-      
3103
-      window.ResponseController.execute(
3104
-        response,
3105
-        function(){},
3106
-        function(){}
3107
-      );
3108
-      
3109
-      if (response.status == 'success')
3110
-      {
3111
-        line.append('<ul class="elements"><li class="element">' + response.data + '</li></ul>');
3112
-      }
3099
+    if (!line.hasClass('open'))
3100
+    {
3101
+      playlist_line_height = line.height();
3102
+      line.css('height', 'auto');
3103
+      line.find('div.content_opened').html('<img class="loader" src="/bundles/muzichcore/img/ajax-loader.gif" alt="loading..." />');
3104
+      line.addClass('open');
3105
+
3106
+      $.getJSON($(this).attr('href'), function(response) {
3107
+
3108
+        window.ResponseController.execute(
3109
+          response,
3110
+          function(){},
3111
+          function(){}
3112
+        );
3113
+
3114
+        if (response.status === 'success')
3115
+        {
3116
+          line.find('div.content_opened').html('<ul class="elements"><li class="element">' + response.data + '</li></ul>');
3117
+        }
3118
+      });
3119
+    }
3120
+    else
3121
+    {
3122
+      line.find('div.content_opened').html('');
3123
+      line.css('height', playlist_line_height);
3124
+    }
3113 3125
       
3114
-    });
3115 3126
     
3116 3127
     return false;
3117 3128
   });

+ 1 - 1
src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig View File

@@ -156,7 +156,7 @@
156 156
               {% endif %}
157 157
                target="_blank"
158 158
             >
159
-              <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="open in playlist" />
159
+              <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
160 160
             </a>
161 161
           </li>
162 162
         {% endif %}

+ 3 - 1
src/Muzich/CoreBundle/lib/Collection/ElementCollectionManager.php View File

@@ -7,11 +7,13 @@ class ElementCollectionManager extends CollectionManager
7 7
   
8 8
   const ATTRIBUTE_ID   = 'Id';
9 9
   const ATTRIBUTE_NAME = 'Name';
10
+  const ATTRIBUTE_TYPE = 'Type';
10 11
   
11 12
   protected $allow_duplicates = true;
12 13
   protected $schema = array(
13 14
     self::ATTRIBUTE_ID,
14
-    self::ATTRIBUTE_NAME
15
+    self::ATTRIBUTE_NAME,
16
+    self::ATTRIBUTE_TYPE
15 17
   );
16 18
   
17 19
   protected $object_reference_attribute = self::ATTRIBUTE_ID;

+ 36 - 9
src/Muzich/PlaylistBundle/Resources/views/Show/show.html.twig View File

@@ -36,16 +36,43 @@
36 36
         <ul class="playlist_elements">
37 37
           {% for element in playlist.elements %}
38 38
             <li class="playlist_element">
39
+              
39 40
               <input type="hidden" name="elements[]"  value="{{ element.id }}" />
40
-              <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}">
41
-                play
42
-              </a>
43
-              <a class="open_element" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
44
-                {{ element.name }}
45
-              </a>
46
-              <a class="remove_element" href="{{ path_token('playlist_remove_element', { 'playlist_id' : playlist.id, 'element_id' : element.id }) }}">
47
-                X
48
-              </a>
41
+              
42
+              
43
+              <div class="actions">
44
+                
45
+                <a class="drag" href="#">
46
+                  <img src="{{ asset('/img/drag3.png') }}" alt="drag" />
47
+                </a>
48
+                
49
+                {% if element.type|can_autoplay_type %}
50
+                  <a class="autoplay_playlist" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}">
51
+                    <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
52
+                  </a>
53
+                {% else %}
54
+                  <img class="autoplay_off" src="{{ asset('/img/1361037350_control_play_off.png') }}" alt="playlist" />
55
+                {% endif %}
56
+
57
+                <a class="remove_element" href="{{ path_token('playlist_remove_element', { 'playlist_id' : playlist.id, 'element_id' : element.id }) }}">
58
+                  <img src="{{ asset('/img/icon_close_2.png') }}" alt="delete" />
59
+                </a>
60
+              </div>
61
+              
62
+              <div class="actions_right">
63
+                <a class="open_element" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
64
+                  <img src="{{ asset('/img/icon_more_2.png') }}" alt="open" />
65
+                </a>
66
+              </div>
67
+              
68
+              <div class="title">
69
+                <a class="title" href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}">
70
+                  {{ element.name }}
71
+                </a>
72
+              </div>
73
+              
74
+              <div class="content_opened"></div>
75
+              
49 76
             </li>
50 77
           {% endfor %}
51 78
         </ul>

BIN
web/img/1361037350_control_play_off.png View File


BIN
web/img/drag1.png View File


BIN
web/img/drag2.png View File


BIN
web/img/drag3.png View File


BIN
web/img/icon_more.png View File


BIN
web/img/icon_more_2.png View File