Commit 6ffda996a3dede36171c487488cf3c1c7d861525

Authored by Rodrigo Souto
1 parent e643284a

[media-panel-improvements] Create folder on dialog

app/views/cms/_media_new_folder.html.erb 0 → 100644
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +<%= form_tag({:action => 'new', :profile => profile.identifier}, :id => 'new-folder-dialog', :title => _('Create new folder'), :style => 'display: none;') do %>
  2 + <%= select_profile_folder(
  3 + _('Choose parent folder:'),
  4 + :parent_id, profile, default_folder, {}, {},
  5 + "type='Folder' or type='Gallery'")
  6 + %>
  7 +
  8 + <%= content_tag(:label, radio_button_tag(:folder_type, 'Gallery', true) + _('Gallery')) %>
  9 + <%= content_tag(:label, radio_button_tag(:folder_type, 'Folder', false) + _('Folder')) %>
  10 +
  11 + <%= labelled_form_field _('Name:'), text_field_tag(:new_folder, nil, 'data-url' => url_for({:action => 'new', :profile => profile.identifier})) %>
  12 + <% button_bar do %>
  13 + <%= submit_button(:newfolder, _('Create')) %>
  14 + <% end %>
  15 +<% end %>
app/views/cms/_text_editor_sidebar.html.erb
  1 +<% default_folder = content_id_to_str default_folder_for_image_upload(profile) %>
  2 +
1 <div class='text-editor-sidebar'> 3 <div class='text-editor-sidebar'>
2 <span class='button-add' data-value='<%= _('Add to the text') %>'></span> 4 <span class='button-add' data-value='<%= _('Add to the text') %>'></span>
3 <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span> 5 <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span>
@@ -10,14 +12,13 @@ @@ -10,14 +12,13 @@
10 <div id='media-upload-form'> 12 <div id='media-upload-form'>
11 <%= form_tag({ :action => 'media_upload' }, :multipart => true) do %> 13 <%= form_tag({ :action => 'media_upload' }, :multipart => true) do %>
12 <div class='formfield'> 14 <div class='formfield'>
13 - <% default_folder = content_id_to_str default_folder_for_image_upload(profile) %>  
14 <%= select_profile_folder( 15 <%= select_profile_folder(
15 _('Choose folder to upload files:'), 16 _('Choose folder to upload files:'),
16 :parent_id, profile, default_folder, {}, {}, 17 :parent_id, profile, default_folder, {}, {},
17 "type='Folder' or type='Gallery'" 18 "type='Folder' or type='Gallery'"
18 ) %> 19 ) %>
19 - <%= labelled_form_field _('Or create a folder under the selected above:'), text_field_tag(:new_folder, nil, 'data-url' => url_for({:action => 'new', :profile => profile.identifier})) %>  
20 </div> 20 </div>
  21 + <%= button(:newfolder, _('New folder'), '#', :id => 'new-folder-button') %>
21 <p><%= file_field_tag('file', :multiple => true) %></p> 22 <p><%= file_field_tag('file', :multiple => true) %></p>
22 <% end %> 23 <% end %>
23 </div> 24 </div>
@@ -46,4 +47,5 @@ @@ -46,4 +47,5 @@
46 </div> 47 </div>
47 </script> 48 </script>
48 49
  50 +<%= render :partial => 'media_new_folder', :locals => {:default_folder => default_folder} %>
49 <%= javascript_include_tag 'jquery.fileupload.js', 'tmpl.js', 'media-panel.js' %> 51 <%= javascript_include_tag 'jquery.fileupload.js', 'tmpl.js', 'media-panel.js' %>
public/javascripts/media-panel.js
@@ -85,40 +85,44 @@ jQuery(&quot;#published-media #q&quot;).typeWatch({ @@ -85,40 +85,44 @@ jQuery(&quot;#published-media #q&quot;).typeWatch({
85 85
86 jQuery("#published-media #q").bind('notext', function(){ loadPublishedMedia() }); 86 jQuery("#published-media #q").bind('notext', function(){ loadPublishedMedia() });
87 87
88 -jQuery("#new_folder").keypress(function( event ) {  
89 - if ( event.which == 13 ) {  
90 - event.preventDefault();  
91 - var url = jQuery(this).data('url');  
92 - var name = jQuery(this).val();  
93 - var parent_id = jQuery("#media-upload-box #parent_id").val();  
94 - jQuery('#media-upload-form').addClass('fetching');  
95 - jQuery.ajax({  
96 - url: url,  
97 - type: 'POST',  
98 - data: {  
99 - 'parent_id': parent_id,  
100 - 'article': {'name': name, 'published': true},  
101 - 'type': 'Folder' },  
102 - dataType: 'json',  
103 - success: function(response) {  
104 - var option_selected = "<option value='"+ response.id +"' selected='selected'>"+ response.full_name +"</options>"  
105 - var option = "<option value='"+ response.id +"'>"+ response.full_name +"</options>"  
106 - jQuery('#media-upload-form #parent_id').append(option_selected);  
107 - jQuery('#published-media #parent_id').append(option);  
108 - jQuery('#new_folder').val('');  
109 - },  
110 - error: function(response, textStatus, xhr) {  
111 - console.log(response);  
112 - console.log(textStatus);  
113 - },  
114 - complete: function(response){  
115 - jQuery('#media-upload-form').removeClass('fetching');  
116 - }  
117 - });  
118 - } 88 +jQuery("#new-folder-dialog").submit(function( event ) {
  89 + var name = jQuery('#new_folder').val();
  90 + var parent_id = jQuery("#new-folder-dialog #parent_id").val();
  91 + jQuery("#media-upload-box #parent_id").val();
  92 + jQuery.ajax({
  93 + url: this.action,
  94 + type: 'POST',
  95 + data: {
  96 + 'parent_id': parent_id,
  97 + 'article': {'name': name, 'published': true},
  98 + 'type': jQuery('input[name=folder_type]:checked').val() },
  99 + dataType: 'json',
  100 + beforeSend: function(){jQuery("#new-folder-dialog").addClass('fetching')},
  101 + success: function(response) {
  102 + var option_selected = "<option value='"+ response.id +"' selected='selected'>"+ response.full_name +"</options>"
  103 + var option = "<option value='"+ response.id +"'>"+ response.full_name +"</options>"
  104 + jQuery('#media-upload-form #parent_id').append(option_selected);
  105 + jQuery('#published-media #parent_id').append(option);
  106 + jQuery('#new_folder').val('');
  107 + },
  108 + error: function(response, textStatus, xhr) {
  109 + console.log(response);
  110 + console.log(textStatus);
  111 + },
  112 + complete: function(response){
  113 + jQuery("#new-folder-dialog").removeClass('fetching');
  114 + jQuery("#new-folder-dialog").dialog('close');
  115 + }
  116 + });
  117 + return false;
119 }); 118 });
120 119
121 jQuery('.text-editor-sidebar .header .icon-vertical-toggle').click(function(){ 120 jQuery('.text-editor-sidebar .header .icon-vertical-toggle').click(function(){
122 jQuery('#content').toggleClass('show-media-panel'); 121 jQuery('#content').toggleClass('show-media-panel');
123 return false; 122 return false;
124 }); 123 });
  124 +
  125 +jQuery('#new-folder-button').click(function(){
  126 + jQuery('#new-folder-dialog').dialog({modal: true});
  127 + return false;
  128 +});
public/stylesheets/application.css
@@ -3525,7 +3525,7 @@ table.cms-articles .icon:hover { @@ -3525,7 +3525,7 @@ table.cms-articles .icon:hover {
3525 } 3525 }
3526 3526
3527 .show-media-panel .text-editor-sidebar { 3527 .show-media-panel .text-editor-sidebar {
3528 - max-height: 800px; 3528 + max-height: 1200px;
3529 transition: 1s 0.5s; 3529 transition: 1s 0.5s;
3530 } 3530 }
3531 3531
@@ -3627,6 +3627,7 @@ table.cms-articles .icon:hover { @@ -3627,6 +3627,7 @@ table.cms-articles .icon:hover {
3627 .text-editor-sidebar select, 3627 .text-editor-sidebar select,
3628 .text-editor-sidebar input { 3628 .text-editor-sidebar input {
3629 width: 100%; 3629 width: 100%;
  3630 + margin-bottom: 5px;
3630 } 3631 }
3631 3632
3632 .text-editor-sidebar .items :hover, 3633 .text-editor-sidebar .items :hover,
@@ -6940,3 +6941,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { @@ -6940,3 +6941,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6940 .fetching { 6941 .fetching {
6941 opacity: 0.3; 6942 opacity: 0.3;
6942 } 6943 }
  6944 +
  6945 +body .ui-widget-overlay {
  6946 + background: #000;
  6947 +}