[media-panel-improvements] Create folder on dialog

Rodrigo Souto
1 parent e643284a
Showing 4 changed files with 60 additions and 34 deletions Show diff stats
app/views/cms/_media_new_folder.html.erb
app/views/cms/_text_editor_sidebar.html.erb
public/javascripts/media-panel.js
public/stylesheets/application.css
@@ -0,0 +1,15 @@
+<%= form_tag({:action => 'new', :profile => profile.identifier}, :id => 'new-folder-dialog', :title => _('Create new folder'), :style => 'display: none;') do %>
+  <%= select_profile_folder(
+    _('Choose parent folder:'),
+    :parent_id, profile, default_folder, {}, {},
+    "type='Folder' or type='Gallery'")
+  %>
+
+  <%= content_tag(:label, radio_button_tag(:folder_type, 'Gallery', true) + _('Gallery')) %>
+  <%= content_tag(:label, radio_button_tag(:folder_type, 'Folder', false) +  _('Folder')) %>
+
+  <%= labelled_form_field _('Name:'), text_field_tag(:new_folder, nil, 'data-url' => url_for({:action => 'new', :profile => profile.identifier})) %>
+  <% button_bar do %>
+    <%= submit_button(:newfolder, _('Create')) %>
+  <% end %>
+<% end %>
+<% default_folder = content_id_to_str default_folder_for_image_upload(profile) %>
+
 <div class='text-editor-sidebar'>
   <span class='button-add' data-value='<%= _('Add to the text') %>'></span>
   <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span>
@@ -10,14 +12,13 @@
     <div id='media-upload-form'>
       <%= form_tag({ :action => 'media_upload' }, :multipart => true) do %>
         <div class='formfield'>
-          <% default_folder = content_id_to_str default_folder_for_image_upload(profile) %>
           <%= select_profile_folder(
                 _('Choose folder to upload files:'),
                 :parent_id, profile, default_folder, {}, {},
                 "type='Folder' or type='Gallery'"
           ) %>
-          <%= 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})) %>
         </div>
+        <%= button(:newfolder, _('New folder'), '#', :id => 'new-folder-button') %>
         <p><%= file_field_tag('file', :multiple => true) %></p>
       <% end %>
     </div>
@@ -46,4 +47,5 @@
   </div>
 </script>
  
+<%= render :partial => 'media_new_folder', :locals => {:default_folder => default_folder} %>
 <%= javascript_include_tag 'jquery.fileupload.js', 'tmpl.js', 'media-panel.js' %>
@@ -85,40 +85,44 @@ jQuery(&quot;#published-media #q&quot;).typeWatch({
  
 jQuery("#published-media #q").bind('notext', function(){ loadPublishedMedia() });
  
-jQuery("#new_folder").keypress(function( event ) {
-  if ( event.which == 13 ) {
-    event.preventDefault();
-    var url = jQuery(this).data('url');
-    var name = jQuery(this).val();
-    var parent_id = jQuery("#media-upload-box #parent_id").val();
-    jQuery('#media-upload-form').addClass('fetching');
-    jQuery.ajax({
-      url: url,
-      type: 'POST',
-      data: {
-        'parent_id': parent_id,
-        'article': {'name': name, 'published': true},
-        'type': 'Folder' },
-      dataType: 'json',
-      success: function(response) {
-        var option_selected = "<option value='"+ response.id +"' selected='selected'>"+ response.full_name +"</options>"
-        var option = "<option value='"+ response.id +"'>"+ response.full_name +"</options>"
-        jQuery('#media-upload-form #parent_id').append(option_selected);
-        jQuery('#published-media #parent_id').append(option);
-        jQuery('#new_folder').val('');
-      },
-      error: function(response, textStatus, xhr) {
-        console.log(response);
-        console.log(textStatus);
-      },
-      complete: function(response){
-        jQuery('#media-upload-form').removeClass('fetching');
-      }
-    });
-  }
+jQuery("#new-folder-dialog").submit(function( event ) {
+  var name = jQuery('#new_folder').val();
+  var parent_id = jQuery("#new-folder-dialog #parent_id").val();
+    jQuery("#media-upload-box #parent_id").val();
+  jQuery.ajax({
+    url: this.action,
+    type: 'POST',
+    data: {
+      'parent_id': parent_id,
+      'article': {'name': name, 'published': true},
+      'type': jQuery('input[name=folder_type]:checked').val() },
+    dataType: 'json',
+    beforeSend: function(){jQuery("#new-folder-dialog").addClass('fetching')},
+    success: function(response) {
+      var option_selected = "<option value='"+ response.id +"' selected='selected'>"+ response.full_name +"</options>"
+      var option = "<option value='"+ response.id +"'>"+ response.full_name +"</options>"
+      jQuery('#media-upload-form #parent_id').append(option_selected);
+      jQuery('#published-media #parent_id').append(option);
+      jQuery('#new_folder').val('');
+    },
+    error: function(response, textStatus, xhr) {
+      console.log(response);
+      console.log(textStatus);
+    },
+    complete: function(response){
+      jQuery("#new-folder-dialog").removeClass('fetching');
+      jQuery("#new-folder-dialog").dialog('close');
+    }
+  });
+  return false;
 });
  
 jQuery('.text-editor-sidebar .header .icon-vertical-toggle').click(function(){
   jQuery('#content').toggleClass('show-media-panel');
   return false;
 });
+
+jQuery('#new-folder-button').click(function(){
+  jQuery('#new-folder-dialog').dialog({modal: true});
+  return false;
+});
@@ -3525,7 +3525,7 @@ table.cms-articles .icon:hover {
 }
  
 .show-media-panel .text-editor-sidebar {
-  max-height: 800px;
+  max-height: 1200px;
   transition: 1s 0.5s;
 }
  
@@ -3627,6 +3627,7 @@ table.cms-articles .icon:hover {
 .text-editor-sidebar select,
 .text-editor-sidebar input {
   width: 100%;
+  margin-bottom: 5px;
 }
  
 .text-editor-sidebar .items :hover,
@@ -6940,3 +6941,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 .fetching {
   opacity: 0.3;
 }
+
+body .ui-widget-overlay {
+  background: #000;
+}
...	...	@@ -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 %>
...	...
	1	+<% default_folder = content_id_to_str default_folder_for_image_upload(profile) %>
	2	+
1	3	<div class='text-editor-sidebar'>
2	4	<span class='button-add' data-value='<%= _('Add to the text') %>'></span>
3	5	<span class='button-zoom' data-value='<%= _('Zoom in') %>'></span>
...	...	@@ -10,14 +12,13 @@
10	12	<div id='media-upload-form'>
11	13	<%= form_tag({ :action => 'media_upload' }, :multipart => true) do %>
12	14	<div class='formfield'>
13		- <% default_folder = content_id_to_str default_folder_for_image_upload(profile) %>
14	15	<%= select_profile_folder(
15	16	_('Choose folder to upload files:'),
16	17	:parent_id, profile, default_folder, {}, {},
17	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	20	</div>
	21	+ <%= button(:newfolder, _('New folder'), '#', :id => 'new-folder-button') %>
21	22	<p><%= file_field_tag('file', :multiple => true) %></p>
22	23	<% end %>
23	24	</div>
...	...	@@ -46,4 +47,5 @@
46	47	</div>
47	48	</script>
48	49
	50	+<%= render :partial => 'media_new_folder', :locals => {:default_folder => default_folder} %>
49	51	<%= javascript_include_tag 'jquery.fileupload.js', 'tmpl.js', 'media-panel.js' %>
...	...
...	...	@@ -85,40 +85,44 @@ jQuery("#published-media #q").typeWatch({
85	85
86	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	120	jQuery('.text-editor-sidebar .header .icon-vertical-toggle').click(function(){
122	121	jQuery('#content').toggleClass('show-media-panel');
123	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	+});
...	...
...	...	@@ -3525,7 +3525,7 @@ table.cms-articles .icon:hover {
3525	3525	}
3526	3526
3527	3527	.show-media-panel .text-editor-sidebar {
3528		- max-height: 800px;
	3528	+ max-height: 1200px;
3529	3529	transition: 1s 0.5s;
3530	3530	}
3531	3531
...	...	@@ -3627,6 +3627,7 @@ table.cms-articles .icon:hover {
3627	3627	.text-editor-sidebar select,
3628	3628	.text-editor-sidebar input {
3629	3629	width: 100%;
	3630	+ margin-bottom: 5px;
3630	3631	}
3631	3632
3632	3633	.text-editor-sidebar .items :hover,
...	...	@@ -6940,3 +6941,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6940	6941	.fetching {
6941	6942	opacity: 0.3;
6942	6943	}
	6944	+
	6945	+body .ui-widget-overlay {
	6946	+ background: #000;
	6947	+}
...	...