[media-panel-improvements] View all

Rodrigo Souto
1 parent 3db199c7
Showing 10 changed files with 140 additions and 43 deletions Show diff stats
app/controllers/my_profile/cms_controller.rb
app/views/cms/_published_media_items.html.erb
app/views/cms/_text_editor_sidebar.html.erb
app/views/cms/media_panel/_generic.html.erb
app/views/cms/media_panel/_image.html.erb
app/views/cms/media_upload.js.erb
app/views/cms/view_all_media.html.erb
public/javascripts/article.js
public/javascripts/media-panel.js
public/stylesheets/application.css
@@ -334,6 +334,12 @@ class CmsController &lt; MyProfileController
     render :partial => 'published_media_items'
   end
+  def view_all_media
+    paginate_options = {:page => 1}
+    @key = params[:key].to_sym
+    load_recent_files(params[:parent_id], params[:q], paginate_options)
+  end
+
   protected
   include CmsHelper
@@ -430,7 +436,7 @@ class CmsController &lt; MyProfileController
     {:images => _('Images'), :generics => _('Files')}
   end
-  def load_recent_files(parent_id = nil, q = nil)
+  def load_recent_files(parent_id = nil, q = nil, paginate_options = {:page => 1, :per_page => 6})
     #TODO Since we only have special support for images, I'm limiting myself to
     #     consider generic files as non-images. In the future, with more supported
     #     file types we'll need to have a smart way to fetch from the database
@@ -446,15 +452,15 @@ class CmsController &lt; MyProfileController
     end
     files = files.more_recent
-    images = files.images.limit(6)
-    generics = files.no_images.limit(6)
+    images = files.images
+    generics = files.no_images
     if q.present?
-      @recent_files[:images] = find_by_contents(:images, images, q)[:results]
-      @recent_files[:generics] = find_by_contents(:generics, generics, q)[:results]
+      @recent_files[:images] = find_by_contents(:images, images, q, paginate_options)[:results]
+      @recent_files[:generics] = find_by_contents(:generics, generics, q, paginate_options)[:results]
     else
-      @recent_files[:images] = images
-      @recent_files[:generics] = generics
+      @recent_files[:images] = images.paginate(paginate_options)
+      @recent_files[:generics] = generics.paginate(paginate_options)
     end
   end
-<div class='items'>
-  <% file_types.each do |key, header| %>
-    <% display = @recent_files[key].present? ? '' : 'none' %>
-    <div class='<%= key.to_s %>' style='display: <%= display%>;'>
+<% file_types.each do |key, header| %>
+  <% display = @recent_files[key].present? ? '' : 'none' %>
+  <div class='<%= key.to_s %>' style='display: <%= display%>;'>
+    <div class='section-title'>
       <h3><%= header %></h3>
-      <% @recent_files[key].each do |file| %>
-        <% @file = file %>
-        <%= render :partial => "cms/media_panel/#{key.to_s.singularize}" %>
+      <% if @recent_files[key].total_pages > 1 %>
+        <%= link_to(_('View all'), {:controller => 'cms', :action => 'view_all_media', :profile => profile.identifier, :key => key}, :class => 'view-all colorbox', 'data-key' => key) %>
       <% end %>
     </div>
-  <% end %>
-</div>
+    <% @recent_files[key].each do |file| %>
+      <% @file = file %>
+      <%= render :partial => "cms/media_panel/#{key.to_s.singularize}" %>
+    <% end %>
+  </div>
+<% end %>
@@ -23,7 +23,9 @@
         "type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %>
     <%= labelled_form_field _('Search'), text_field_tag('q') %>
     <%= render :partial => 'drag_and_drop_note' %>
-    <%= render :partial => 'published_media_items' %>
+    <div class='items'>
+      <%= render :partial => 'published_media_items' %>
+    </div>
   </div>
 </div>
 <div class="item file <%= icon_for_article(@file) %>" data-item="div">
   <div>
-    <a class="add-to-text" href="<%= url_for(@file.url) %>"><%= @file.title %></a>
+    <a class="add-to-text" href="<%= url_for(@file.url) %>" title="<%= @file.title %>"><%= @file.title %></a>
   </div>
 </div>
-<div class="item image" data-item="span">
+<div class="item image" data-item="span" title="<%= @file.name %>">
   <span>
     <img src="<%= @file.public_filename(:uploaded) %>"/>
   </span>
 <% if @file.valid? %>
   <% klass = @file.class.name.split('::').last.to_css_class %>
-  jQuery("#published-media #recent-media .<%= klass.pluralize %> h3").after("<%= j render :partial => "cms/media_panel/#{klass}" %>");
-  jQuery("#published-media #recent-media .<%= klass.pluralize %>").show();
+  jQuery("#published-media .items .<%= klass.pluralize %> .section-title").after("<%= j render :partial => "cms/media_panel/#{klass}" %>");
+  jQuery("#published-media .items .<%= klass.pluralize %>").show();
 <% else %>
   alert("Failed to upload file: <%= j @file.errors.full_messages.join(', ').html_safe %>");
 <% end %>
@@ -0,0 +1,8 @@
+<h1><%= file_types[@key] %></h1>
+
+<div class='view-all-media view-all-<%= @key %>'>
+  <% @recent_files[@key].each do |file| %>
+    <% @file = file %>
+    <%= render :partial => "cms/media_panel/#{@key.to_s.singularize}" %>
+  <% end %>
+</div>
@@ -79,6 +79,11 @@ jQuery(function($) {
     return '<div class="item" data-item="div"><div><img src="' + img + '" style="max-width: 640px; max-height: 480px"/></div>' + '<div class="button-bar">' + add_to_text_button('with-text') + '&nbsp;&nbsp;&nbsp;' + close_button('with-text') + '</div></div>'
   }
+  $('.view-all-images .item').live('click', function(){
+    insert_item_in_text(jQuery(this).find('span'));
+    $.colorbox.close();
+  });
+
   $('a.add-to-text').live('click', function() {
     var $item = $(this).closest('.item');
     var html_selector = $item.attr('data-item');
@@ -26,6 +26,7 @@ function loadPublishedMedia() {
     success: function(response) {
       jQuery("#published-media .items").html(response);
       jQuery('#published-media').removeClass('fetching');
+      updateViewAllLinks();
     },
     error: function(response, textStatus, xhr) {
       console.log(response);
@@ -34,6 +35,18 @@ function loadPublishedMedia() {
   });
 }
+function updateViewAllLinks() {
+  var parent_id = jQuery('#published-media #parent_id').val();
+  var q = jQuery('#published-media #q').val();
+  jQuery('#published-media .view-all').each(function(){
+    var key = jQuery(this).data('key');
+    var params = {parent_id: parent_id, q: q, key: key}
+    var href = jQuery(this).attr('href');
+    href = href.replace(/\?.*/, '?'+jQuery.param(params));
+    jQuery(this).attr('href', href);
+  });
+}
+
 jQuery('#published-media #parent_id').change(function(){ loadPublishedMedia() });
 jQuery("#published-media #q").typeWatch({
@@ -3415,7 +3415,7 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
 .text-editor-sidebar-box  {
   background: #fcfcf9;
   border: 1px solid #d3d7cf;
-  padding: 10px 10px 0px 10px;
+  padding: 10px;
   margin-bottom: 10px;
 }
@@ -3441,11 +3441,53 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
   margin-bottom: 10px;
 }
-.text-editor-sidebar .items .file {
+.text-editor-sidebar .image,
+.view-all-media .image {
+  display: inline-block;
+  vertical-align: top;
+  text-align: center;
+  position: relative;
+}
+
+.text-editor-sidebar .image {
+  width: 80px;
+  margin: 2px;
+  height: 80px;
+  line-height: 80px;
+}
+
+.view-all-media .image {
+  width: 150px;
+  margin: 3px;
+  height: 125px;
+  line-height: 125px;
+}
+
+.view-all-images .image:hover {
+  cursor: pointer;
+  background-color: #EEE;
+}
+
+.text-editor-sidebar img,
+.view-all-media img {
+  vertical-align: middle;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.view-all-images {
+  text-align: center;
+}
+
+.text-editor-sidebar .file,
+.view-all-media .file {
   background-repeat: no-repeat;
   background-position: 0px 0px;
   border: none;
   margin-bottom: 12px;
+  padding-left: 20px;
+  overflow: hidden;
+  text-align: left;
 }
 .text-editor-sidebar select,
@@ -3453,37 +3495,36 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
   width: 100%;
 }
-.text-editor-sidebar .items .image {
-	display: inline-block;
-	vertical-align: middle;
-	margin: 5px;
-	position: relative;
-}
-
-.text-editor-sidebar .items .file {
-	padding-left: 20px;
-}
-
-.text-editor-sidebar .items :hover {
+.text-editor-sidebar .items :hover,
+.view-all-media :hover {
   background-color: transparent;
 }
-.text-editor-sidebar .items .image-controls {
+.text-editor-sidebar .items .image-controls,
+.view-all-media .image-controls {
   display: none;
 	position: absolute;
 	top: 5px;
 	left: 5px;
+  line-height: 16px;
 }
-.text-editor-sidebar .items .item:hover .image-controls {
+.text-editor-sidebar .items .item:hover .image-controls,
+.view-all-media .item:hover .image-controls {
 	display: block;
 }
-.text-editor-sidebar .items .file-controls {
+.view-all-images .item:hover .image-controls {
+  display: none;
+}
+
+.text-editor-sidebar .items .file-controls,
+.view-all-media .file-controls {
 	margin-top: 5px;
 }
-.text-editor-sidebar .items .image-controls .icon-zoom {
+.text-editor-sidebar .items .image-controls .icon-zoom,
+.view-all-media .image-controls .icon-zoom  {
 	background-image: url(../images/zoom-dark.png);
 	display: block;
 	width: 0px;
@@ -3494,10 +3535,6 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
   background-repeat: no-repeat;
   background-position: 98% 10px;
 }
-.text-editor-sidebar img {
- max-height: 70px;
- max-width: 74px;
-}
 .text-editor-sidebar .media-upload-error {
   color: red;
 }
@@ -3505,6 +3542,29 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
   max-width: 355px;
 }
+.view-all-media {
+  max-width: 830px;
+  max-height: 600px;
+}
+
+.view-all-media a.button {
+  background-color: #EEE;
+}
+
+#published-media .section-title {
+  width: 100%;
+  height: 40px;
+}
+
+#published-media .section-title h3 {
+  float: left;
+}
+
+#published-media .section-title a.view-all {
+  float: right;
+  line-height: 40px
+}
+
 /* ==> public/stylesheets/controller_contact.css <== */
 /*** SELECT CITY ***/
1	<div class="item file <%= icon_for_article(@file) %>" data-item="div">	1	<div class="item file <%= icon_for_article(@file) %>" data-item="div">
2	<div>	2	<div>
3	- <a class="add-to-text" href="<%= url_for(@file.url) %>"><%= @file.title %></a>	3	+ <a class="add-to-text" href="<%= url_for(@file.url) %>" title="<%= @file.title %>"><%= @file.title %></a>
4	</div>	4	</div>
5	</div>	5	</div>
1	-<div class="item image" data-item="span">	1	+<div class="item image" data-item="span" title="<%= @file.name %>">
2	<span>	2	<span>
3	<img src="<%= @file.public_filename(:uploaded) %>"/>	3	<img src="<%= @file.public_filename(:uploaded) %>"/>
4	</span>	4	</span>
@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
	1	+<h1><%= file_types[@key] %></h1>
	2	+
	3	+<div class='view-all-media view-all-<%= @key %>'>
	4	+ <% @recent_files[@key].each do \|file\| %>
	5	+ <% @file = file %>
	6	+ <%= render :partial => "cms/media_panel/#{@key.to_s.singularize}" %>
	7	+ <% end %>
	8	+</div>
	@@ -26,6 +26,7 @@ function loadPublishedMedia() {		@@ -26,6 +26,7 @@ function loadPublishedMedia() {
26	success: function(response) {	26	success: function(response) {
27	jQuery("#published-media .items").html(response);	27	jQuery("#published-media .items").html(response);
28	jQuery('#published-media').removeClass('fetching');	28	jQuery('#published-media').removeClass('fetching');
		29	+ updateViewAllLinks();
29	},	30	},
30	error: function(response, textStatus, xhr) {	31	error: function(response, textStatus, xhr) {
31	console.log(response);	32	console.log(response);
	@@ -34,6 +35,18 @@ function loadPublishedMedia() {		@@ -34,6 +35,18 @@ function loadPublishedMedia() {
34	});	35	});
35	}	36	}
36		37
		38	+function updateViewAllLinks() {
		39	+ var parent_id = jQuery('#published-media #parent_id').val();
		40	+ var q = jQuery('#published-media #q').val();
		41	+ jQuery('#published-media .view-all').each(function(){
		42	+ var key = jQuery(this).data('key');
		43	+ var params = {parent_id: parent_id, q: q, key: key}
		44	+ var href = jQuery(this).attr('href');
		45	+ href = href.replace(/\?.*/, '?'+jQuery.param(params));
		46	+ jQuery(this).attr('href', href);
		47	+ });
		48	+}
		49	+
37	jQuery('#published-media #parent_id').change(function(){ loadPublishedMedia() });	50	jQuery('#published-media #parent_id').change(function(){ loadPublishedMedia() });
38		51
39	jQuery("#published-media #q").typeWatch({	52	jQuery("#published-media #q").typeWatch({
	@@ -3415,7 +3415,7 @@ div.with_media_panel .formfield input[type="checkbox"] {		@@ -3415,7 +3415,7 @@ div.with_media_panel .formfield input[type="checkbox"] {
3415	.text-editor-sidebar-box {	3415	.text-editor-sidebar-box {
3416	background: #fcfcf9;	3416	background: #fcfcf9;
3417	border: 1px solid #d3d7cf;	3417	border: 1px solid #d3d7cf;
3418	- padding: 10px 10px 0px 10px;	3418	+ padding: 10px;
3419	margin-bottom: 10px;	3419	margin-bottom: 10px;
3420	}	3420	}
3421		3421
	@@ -3441,11 +3441,53 @@ div.with_media_panel .formfield input[type="checkbox"] {		@@ -3441,11 +3441,53 @@ div.with_media_panel .formfield input[type="checkbox"] {
3441	margin-bottom: 10px;	3441	margin-bottom: 10px;
3442	}	3442	}
3443		3443
3444	-.text-editor-sidebar .items .file {	3444	+.text-editor-sidebar .image,
		3445	+.view-all-media .image {
		3446	+ display: inline-block;
		3447	+ vertical-align: top;
		3448	+ text-align: center;
		3449	+ position: relative;
		3450	+}
		3451	+
		3452	+.text-editor-sidebar .image {
		3453	+ width: 80px;
		3454	+ margin: 2px;
		3455	+ height: 80px;
		3456	+ line-height: 80px;
		3457	+}
		3458	+
		3459	+.view-all-media .image {
		3460	+ width: 150px;
		3461	+ margin: 3px;
		3462	+ height: 125px;
		3463	+ line-height: 125px;
		3464	+}
		3465	+
		3466	+.view-all-images .image:hover {
		3467	+ cursor: pointer;
		3468	+ background-color: #EEE;
		3469	+}
		3470	+
		3471	+.text-editor-sidebar img,
		3472	+.view-all-media img {
		3473	+ vertical-align: middle;
		3474	+ max-height: 100%;
		3475	+ max-width: 100%;
		3476	+}
		3477	+
		3478	+.view-all-images {
		3479	+ text-align: center;
		3480	+}
		3481	+
		3482	+.text-editor-sidebar .file,
		3483	+.view-all-media .file {
3445	background-repeat: no-repeat;	3484	background-repeat: no-repeat;
3446	background-position: 0px 0px;	3485	background-position: 0px 0px;
3447	border: none;	3486	border: none;
3448	margin-bottom: 12px;	3487	margin-bottom: 12px;
		3488	+ padding-left: 20px;
		3489	+ overflow: hidden;
		3490	+ text-align: left;
3449	}	3491	}
3450		3492
3451	.text-editor-sidebar select,	3493	.text-editor-sidebar select,
	@@ -3453,37 +3495,36 @@ div.with_media_panel .formfield input[type="checkbox"] {		@@ -3453,37 +3495,36 @@ div.with_media_panel .formfield input[type="checkbox"] {
3453	width: 100%;	3495	width: 100%;
3454	}	3496	}
3455		3497
3456	-.text-editor-sidebar .items .image {
3457	- display: inline-block;
3458	- vertical-align: middle;
3459	- margin: 5px;
3460	- position: relative;
3461	-}
3462	-
3463	-.text-editor-sidebar .items .file {
3464	- padding-left: 20px;
3465	-}
3466	-
3467	-.text-editor-sidebar .items :hover {	3498	+.text-editor-sidebar .items :hover,
		3499	+.view-all-media :hover {
3468	background-color: transparent;	3500	background-color: transparent;
3469	}	3501	}
3470		3502
3471	-.text-editor-sidebar .items .image-controls {	3503	+.text-editor-sidebar .items .image-controls,
		3504	+.view-all-media .image-controls {
3472	display: none;	3505	display: none;
3473	position: absolute;	3506	position: absolute;
3474	top: 5px;	3507	top: 5px;
3475	left: 5px;	3508	left: 5px;
		3509	+ line-height: 16px;
3476	}	3510	}
3477		3511
3478	-.text-editor-sidebar .items .item:hover .image-controls {	3512	+.text-editor-sidebar .items .item:hover .image-controls,
		3513	+.view-all-media .item:hover .image-controls {
3479	display: block;	3514	display: block;
3480	}	3515	}
3481		3516
3482	-.text-editor-sidebar .items .file-controls {	3517	+.view-all-images .item:hover .image-controls {
		3518	+ display: none;
		3519	+}
		3520	+
		3521	+.text-editor-sidebar .items .file-controls,
		3522	+.view-all-media .file-controls {
3483	margin-top: 5px;	3523	margin-top: 5px;
3484	}	3524	}
3485		3525
3486	-.text-editor-sidebar .items .image-controls .icon-zoom {	3526	+.text-editor-sidebar .items .image-controls .icon-zoom,
		3527	+.view-all-media .image-controls .icon-zoom {
3487	background-image: url(../images/zoom-dark.png);	3528	background-image: url(../images/zoom-dark.png);
3488	display: block;	3529	display: block;
3489	width: 0px;	3530	width: 0px;
	@@ -3494,10 +3535,6 @@ div.with_media_panel .formfield input[type="checkbox"] {		@@ -3494,10 +3535,6 @@ div.with_media_panel .formfield input[type="checkbox"] {
3494	background-repeat: no-repeat;	3535	background-repeat: no-repeat;
3495	background-position: 98% 10px;	3536	background-position: 98% 10px;
3496	}	3537	}
3497	-.text-editor-sidebar img {
3498	- max-height: 70px;
3499	- max-width: 74px;
3500	-}
3501	.text-editor-sidebar .media-upload-error {	3538	.text-editor-sidebar .media-upload-error {
3502	color: red;	3539	color: red;
3503	}	3540	}
	@@ -3505,6 +3542,29 @@ div.with_media_panel .formfield input[type="checkbox"] {		@@ -3505,6 +3542,29 @@ div.with_media_panel .formfield input[type="checkbox"] {
3505	max-width: 355px;	3542	max-width: 355px;
3506	}	3543	}
3507		3544
		3545	+.view-all-media {
		3546	+ max-width: 830px;
		3547	+ max-height: 600px;
		3548	+}
		3549	+
		3550	+.view-all-media a.button {
		3551	+ background-color: #EEE;
		3552	+}
		3553	+
		3554	+#published-media .section-title {
		3555	+ width: 100%;
		3556	+ height: 40px;
		3557	+}
		3558	+
		3559	+#published-media .section-title h3 {
		3560	+ float: left;
		3561	+}
		3562	+
		3563	+#published-media .section-title a.view-all {
		3564	+ float: right;
		3565	+ line-height: 40px
		3566	+}
		3567	+
3508	/* ==> public/stylesheets/controller_contact.css <== */	3568	/* ==> public/stylesheets/controller_contact.css <== */
3509	/* SELECT CITY */	3569	/* SELECT CITY */
3510		3570