From 580afdd731e1b392e145e7878fec549406c4cde4 Mon Sep 17 00:00:00 2001 From: Rodrigo Souto Date: Thu, 17 Jul 2014 20:24:55 -0300 Subject: [PATCH] [media-panel-improvements] View all --- app/controllers/my_profile/cms_controller.rb | 20 +++++++++++++------- app/views/cms/_published_media_items.html.erb | 21 ++++++++++++--------- app/views/cms/_text_editor_sidebar.html.erb | 4 +++- app/views/cms/media_panel/_generic.html.erb | 2 +- app/views/cms/media_panel/_image.html.erb | 2 +- app/views/cms/media_upload.js.erb | 4 ++-- app/views/cms/view_all_media.html.erb | 8 ++++++++ public/javascripts/article.js | 5 +++++ public/javascripts/media-panel.js | 13 +++++++++++++ public/stylesheets/application.css | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------- 10 files changed, 140 insertions(+), 43 deletions(-) create mode 100644 app/views/cms/view_all_media.html.erb diff --git a/app/controllers/my_profile/cms_controller.rb b/app/controllers/my_profile/cms_controller.rb index 403dc52..dc96283 100644 --- a/app/controllers/my_profile/cms_controller.rb +++ b/app/controllers/my_profile/cms_controller.rb @@ -334,6 +334,12 @@ class CmsController < 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 < 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 < 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 diff --git a/app/views/cms/_published_media_items.html.erb b/app/views/cms/_published_media_items.html.erb index 7a32ac3..1d012b4 100644 --- a/app/views/cms/_published_media_items.html.erb +++ b/app/views/cms/_published_media_items.html.erb @@ -1,12 +1,15 @@ -
- <% file_types.each do |key, header| %> - <% display = @recent_files[key].present? ? '' : 'none' %> -
+<% file_types.each do |key, header| %> + <% display = @recent_files[key].present? ? '' : 'none' %> +
+

<%= header %>

- <% @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 %>
- <% end %> -
+ <% @recent_files[key].each do |file| %> + <% @file = file %> + <%= render :partial => "cms/media_panel/#{key.to_s.singularize}" %> + <% end %> +
+<% end %> diff --git a/app/views/cms/_text_editor_sidebar.html.erb b/app/views/cms/_text_editor_sidebar.html.erb index 02f1864..4cfe970 100644 --- a/app/views/cms/_text_editor_sidebar.html.erb +++ b/app/views/cms/_text_editor_sidebar.html.erb @@ -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' %> +
+ <%= render :partial => 'published_media_items' %> +
diff --git a/app/views/cms/media_panel/_generic.html.erb b/app/views/cms/media_panel/_generic.html.erb index 74721cf..bf8372d 100644 --- a/app/views/cms/media_panel/_generic.html.erb +++ b/app/views/cms/media_panel/_generic.html.erb @@ -1,5 +1,5 @@
- <%= @file.title %> + <%= @file.title %>
diff --git a/app/views/cms/media_panel/_image.html.erb b/app/views/cms/media_panel/_image.html.erb index abc79cd..1125742 100644 --- a/app/views/cms/media_panel/_image.html.erb +++ b/app/views/cms/media_panel/_image.html.erb @@ -1,4 +1,4 @@ -
+
diff --git a/app/views/cms/media_upload.js.erb b/app/views/cms/media_upload.js.erb index a383e63..64d9098 100644 --- a/app/views/cms/media_upload.js.erb +++ b/app/views/cms/media_upload.js.erb @@ -1,7 +1,7 @@ <% 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 %> diff --git a/app/views/cms/view_all_media.html.erb b/app/views/cms/view_all_media.html.erb new file mode 100644 index 0000000..7c0cc50 --- /dev/null +++ b/app/views/cms/view_all_media.html.erb @@ -0,0 +1,8 @@ +

<%= file_types[@key] %>

+ +
+ <% @recent_files[@key].each do |file| %> + <% @file = file %> + <%= render :partial => "cms/media_panel/#{@key.to_s.singularize}" %> + <% end %> +
diff --git a/public/javascripts/article.js b/public/javascripts/article.js index 06901ae..0e5eb2d 100644 --- a/public/javascripts/article.js +++ b/public/javascripts/article.js @@ -79,6 +79,11 @@ jQuery(function($) { return '
' + '
' + add_to_text_button('with-text') + '   ' + close_button('with-text') + '
' } + $('.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'); diff --git a/public/javascripts/media-panel.js b/public/javascripts/media-panel.js index 100e40f..48acf09 100644 --- a/public/javascripts/media-panel.js +++ b/public/javascripts/media-panel.js @@ -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({ diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 850efb5..c13eefe 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -3415,7 +3415,7 @@ div.with_media_panel .formfield input[type="checkbox"] { .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="checkbox"] { 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="checkbox"] { 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="checkbox"] { 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="checkbox"] { 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 ***/ -- libgit2 0.21.2