Download as
Browse Code »

Commit 580afdd731e1b392e145e7878fec549406c4cde4

Authored by Rodrigo Souto
1 parent 3db199c7
Exists in master and in 21 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, news_page, script_to_update, template_mirror_block, tests, tests_fixies

[media-panel-improvements] View all

Showing 10 changed files with 140 additions and 43 deletions   Show diff stats
app/controllers/my_profile/cms_controller.rb
  Diff comments   View file @580afdd
... ... @@ -334,6 +334,12 @@ class CmsController < MyProfileController
334 334 render :partial => 'published_media_items'
335 335 end
336 336  
  337 + def view_all_media
  338 + paginate_options = {:page => 1}
  339 + @key = params[:key].to_sym
  340 + load_recent_files(params[:parent_id], params[:q], paginate_options)
  341 + end
  342 +
337 343 protected
338 344  
339 345 include CmsHelper
... ... @@ -430,7 +436,7 @@ class CmsController < MyProfileController
430 436 {:images => _('Images'), :generics => _('Files')}
431 437 end
432 438  
433   - def load_recent_files(parent_id = nil, q = nil)
  439 + def load_recent_files(parent_id = nil, q = nil, paginate_options = {:page => 1, :per_page => 6})
434 440 #TODO Since we only have special support for images, I'm limiting myself to
435 441 # consider generic files as non-images. In the future, with more supported
436 442 # file types we'll need to have a smart way to fetch from the database
... ... @@ -446,15 +452,15 @@ class CmsController < MyProfileController
446 452 end
447 453  
448 454 files = files.more_recent
449   - images = files.images.limit(6)
450   - generics = files.no_images.limit(6)
  455 + images = files.images
  456 + generics = files.no_images
451 457  
452 458 if q.present?
453   - @recent_files[:images] = find_by_contents(:images, images, q)[:results]
454   - @recent_files[:generics] = find_by_contents(:generics, generics, q)[:results]
  459 + @recent_files[:images] = find_by_contents(:images, images, q, paginate_options)[:results]
  460 + @recent_files[:generics] = find_by_contents(:generics, generics, q, paginate_options)[:results]
455 461 else
456   - @recent_files[:images] = images
457   - @recent_files[:generics] = generics
  462 + @recent_files[:images] = images.paginate(paginate_options)
  463 + @recent_files[:generics] = generics.paginate(paginate_options)
458 464 end
459 465 end
460 466  
... ...
app/views/cms/_published_media_items.html.erb
  Diff comments   View file @580afdd
1   -<div class='items'>
2   - <% file_types.each do |key, header| %>
3   - <% display = @recent_files[key].present? ? '' : 'none' %>
4   - <div class='<%= key.to_s %>' style='display: <%= display%>;'>
  1 +<% file_types.each do |key, header| %>
  2 + <% display = @recent_files[key].present? ? '' : 'none' %>
  3 + <div class='<%= key.to_s %>' style='display: <%= display%>;'>
  4 + <div class='section-title'>
5 5 <h3><%= header %></h3>
6   - <% @recent_files[key].each do |file| %>
7   - <% @file = file %>
8   - <%= render :partial => "cms/media_panel/#{key.to_s.singularize}" %>
  6 + <% if @recent_files[key].total_pages > 1 %>
  7 + <%= link_to(_('View all'), {:controller => 'cms', :action => 'view_all_media', :profile => profile.identifier, :key => key}, :class => 'view-all colorbox', 'data-key' => key) %>
9 8 <% end %>
10 9 </div>
11   - <% end %>
12   -</div>
  10 + <% @recent_files[key].each do |file| %>
  11 + <% @file = file %>
  12 + <%= render :partial => "cms/media_panel/#{key.to_s.singularize}" %>
  13 + <% end %>
  14 + </div>
  15 +<% end %>
... ...
app/views/cms/_text_editor_sidebar.html.erb
  Diff comments   View file @580afdd
... ... @@ -23,7 +23,9 @@
23 23 "type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %>
24 24 <%= labelled_form_field _('Search'), text_field_tag('q') %>
25 25 <%= render :partial => 'drag_and_drop_note' %>
26   - <%= render :partial => 'published_media_items' %>
  26 + <div class='items'>
  27 + <%= render :partial => 'published_media_items' %>
  28 + </div>
27 29 </div>
28 30 </div>
29 31  
... ...
app/views/cms/media_panel/_generic.html.erb
  Diff comments   View file @580afdd
1 1 <div class="item file <%= icon_for_article(@file) %>" data-item="div">
2 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 4 </div>
5 5 </div>
... ...
app/views/cms/media_panel/_image.html.erb
  Diff comments   View file @580afdd
1   -<div class="item image" data-item="span">
  1 +<div class="item image" data-item="span" title="<%= @file.name %>">
2 2 <span>
3 3 <img src="<%= @file.public_filename(:uploaded) %>"/>
4 4 </span>
... ...
app/views/cms/media_upload.js.erb
  Diff comments   View file @580afdd
1 1 <% if @file.valid? %>
2 2 <% klass = @file.class.name.split('::').last.to_css_class %>
3   - jQuery("#published-media #recent-media .<%= klass.pluralize %> h3").after("<%= j render :partial => "cms/media_panel/#{klass}" %>");
4   - jQuery("#published-media #recent-media .<%= klass.pluralize %>").show();
  3 + jQuery("#published-media .items .<%= klass.pluralize %> .section-title").after("<%= j render :partial => "cms/media_panel/#{klass}" %>");
  4 + jQuery("#published-media .items .<%= klass.pluralize %>").show();
5 5 <% else %>
6 6 alert("Failed to upload file: <%= j @file.errors.full_messages.join(', ').html_safe %>");
7 7 <% end %>
... ...
app/views/cms/view_all_media.html.erb 0 → 100644
  Diff comments   View file @580afdd
... ... @@ -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>
... ...
public/javascripts/article.js
  Diff comments   View file @580afdd
... ... @@ -79,6 +79,11 @@ jQuery(function($) {
79 79 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>'
80 80 }
81 81  
  82 + $('.view-all-images .item').live('click', function(){
  83 + insert_item_in_text(jQuery(this).find('span'));
  84 + $.colorbox.close();
  85 + });
  86 +
82 87 $('a.add-to-text').live('click', function() {
83 88 var $item = $(this).closest('.item');
84 89 var html_selector = $item.attr('data-item');
... ...
public/javascripts/media-panel.js
  Diff comments   View file @580afdd
... ... @@ -26,6 +26,7 @@ function loadPublishedMedia() {
26 26 success: function(response) {
27 27 jQuery("#published-media .items").html(response);
28 28 jQuery('#published-media').removeClass('fetching');
  29 + updateViewAllLinks();
29 30 },
30 31 error: function(response, textStatus, xhr) {
31 32 console.log(response);
... ... @@ -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 50 jQuery('#published-media #parent_id').change(function(){ loadPublishedMedia() });
38 51  
39 52 jQuery("#published-media #q").typeWatch({
... ...
public/stylesheets/application.css
  Diff comments   View file @580afdd
... ... @@ -3415,7 +3415,7 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3415 3415 .text-editor-sidebar-box {
3416 3416 background: #fcfcf9;
3417 3417 border: 1px solid #d3d7cf;
3418   - padding: 10px 10px 0px 10px;
  3418 + padding: 10px;
3419 3419 margin-bottom: 10px;
3420 3420 }
3421 3421  
... ... @@ -3441,11 +3441,53 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3441 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 3484 background-repeat: no-repeat;
3446 3485 background-position: 0px 0px;
3447 3486 border: none;
3448 3487 margin-bottom: 12px;
  3488 + padding-left: 20px;
  3489 + overflow: hidden;
  3490 + text-align: left;
3449 3491 }
3450 3492  
3451 3493 .text-editor-sidebar select,
... ... @@ -3453,37 +3495,36 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3453 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 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 3505 display: none;
3473 3506 position: absolute;
3474 3507 top: 5px;
3475 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 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 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 3528 background-image: url(../images/zoom-dark.png);
3488 3529 display: block;
3489 3530 width: 0px;
... ... @@ -3494,10 +3535,6 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3494 3535 background-repeat: no-repeat;
3495 3536 background-position: 98% 10px;
3496 3537 }
3497   -.text-editor-sidebar img {
3498   - max-height: 70px;
3499   - max-width: 74px;
3500   -}
3501 3538 .text-editor-sidebar .media-upload-error {
3502 3539 color: red;
3503 3540 }
... ... @@ -3505,6 +3542,29 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
3505 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 3568 /* ==> public/stylesheets/controller_contact.css <== */
3509 3569 /*** SELECT CITY ***/
3510 3570  
... ...