From 6ffda996a3dede36171c487488cf3c1c7d861525 Mon Sep 17 00:00:00 2001
From: Rodrigo Souto <rodrigo@colivre.coop.br>
Date: Wed, 30 Jul 2014 11:52:30 -0300
Subject: [PATCH] [media-panel-improvements] Create folder on dialog

---
 app/views/cms/_media_new_folder.html.erb    | 15 +++++++++++++++
 app/views/cms/_text_editor_sidebar.html.erb |  6 ++++--
 public/javascripts/media-panel.js           | 66 +++++++++++++++++++++++++++++++++++-------------------------------
 public/stylesheets/application.css          |  7 ++++++-
 4 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 app/views/cms/_media_new_folder.html.erb

diff --git a/app/views/cms/_media_new_folder.html.erb b/app/views/cms/_media_new_folder.html.erb
new file mode 100644
index 0000000..93b02be
--- /dev/null
+++ b/app/views/cms/_media_new_folder.html.erb
@@ -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 %>
diff --git a/app/views/cms/_text_editor_sidebar.html.erb b/app/views/cms/_text_editor_sidebar.html.erb
index 71abc0d..c2e68ec 100644
--- a/app/views/cms/_text_editor_sidebar.html.erb
+++ b/app/views/cms/_text_editor_sidebar.html.erb
@@ -1,3 +1,5 @@
+<% 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' %>
diff --git a/public/javascripts/media-panel.js b/public/javascripts/media-panel.js
index 4de1d3a..1308f7f 100644
--- a/public/javascripts/media-panel.js
+++ b/public/javascripts/media-panel.js
@@ -85,40 +85,44 @@ jQuery("#published-media #q").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;
+});
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 7454ddf..ed689d5 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -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;
+}
--
libgit2 0.21.2