Add ace editor to snippets

5 files changed, 49 insertions, 27 deletions

diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index bc7a74406ef..dee7ce5a2ac 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -89,6 +89,7 @@ $baseLineHeight: 18px !default;
 @import "sections/commits.scss";
 @import "sections/issues.scss";
 @import "sections/projects.scss";
+@import "sections/snippets.scss";
 @import "sections/merge_requests.scss";
 @import "sections/graph.scss";
 @import "sections/events.scss";
diff --git a/app/assets/stylesheets/sections/snippets.scss b/app/assets/stylesheets/sections/snippets.scss
new file mode 100644
index 00000000000..3944814fc3e
--- /dev/null
+++ b/app/assets/stylesheets/sections/snippets.scss
@@ -0,0 +1,9 @@
+.snippet.file_holder {
+  .file_title {
+    .snippet-file-name {
+      position: relative;
+      top: -4px;
+      left: -4px;
+    }
+  }
+}
diff --git a/app/views/snippets/_form.html.haml b/app/views/snippets/_form.html.haml
index 981c7cf0c12..baef737b565 100644
--- a/app/views/snippets/_form.html.haml
+++ b/app/views/snippets/_form.html.haml
@@ -1,28 +1,41 @@
 %h3.page_title
   = @snippet.new_record? ? "New Snippet" : "Edit Snippet ##{@snippet.id}"
 %hr
-= form_for [@project, @snippet] do |f|
-  -if @snippet.errors.any?
-    .alert-message.block-message.error
-      %ul
-        - @snippet.errors.full_messages.each do |msg|
-          %li= msg
+.snippet-form-holder
+  = form_for [@project, @snippet] do |f|
+    -if @snippet.errors.any?
+      .alert-message.block-message.error
+        %ul
+          - @snippet.errors.full_messages.each do |msg|
+            %li= msg
 
-  .clearfix
-    = f.label :title
-    .input= f.text_field :title, placeholder: "Example Snippet"
-  .clearfix
-    = f.label :file_name
-    .input= f.text_field :file_name, placeholder: "example.rb"
-  .clearfix
-    = f.label "Lifetime"
-    .input= f.select :expires_at, lifetime_select_options, {}, {class: 'chosen span2'}
-  .clearfix
-    = f.label :content, "Code"
-    .input= f.text_area :content, class: "span8"
+    .clearfix
+      = f.label :title
+      .input= f.text_field :title, placeholder: "Example Snippet", class: 'input-xlarge', required: true
+    .clearfix
+      = f.label "Lifetime"
+      .input= f.select :expires_at, lifetime_select_options, {}, {class: 'chosen span2'}
+    .clearfix
+      .file-editor
+        = f.label :file_name, "File"
+        .input
+          .file_holder.snippet
+            .file_title
+              = f.text_field :file_name, placeholder: "example.rb", class: 'snippet-file-name', required: true
+            .file_content.code
+              %pre#editor= @snippet.content
+              = f.hidden_field :content, class: 'snippet-file-content'
+
+    .form-actions
+      = f.submit 'Save', class: "save-btn btn"
+      = link_to "Cancel", project_snippets_path(@project), class: " btn"
+      - unless @snippet.new_record?
+        .right= link_to 'Destroy', [@project, @snippet], confirm: 'Are you sure?', method: :delete, class: "btn right danger delete-snippet", id: "destroy_snippet_#{@snippet.id}"
+
+
+:javascript
+  var editor = ace.edit("editor");
+  $(".snippet-form-holder form").submit(function(){
+    $(".snippet-file-content").val(editor.getValue());
+  });
 
-  .form-actions
-    = f.submit 'Save', class: "primary btn"
-    = link_to "Cancel", project_snippets_path(@project), class: " btn"
-    - unless @snippet.new_record?
-      .right= link_to 'Destroy', [@project, @snippet], confirm: 'Are you sure?', method: :delete, class: "btn right danger delete-snippet", id: "destroy_snippet_#{@snippet.id}"
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index f3e01928077..ad399533a3d 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,6 +1,6 @@
 = render "projects/project_head"
 
-%h3
+%h3.page_title
   = @snippet.title
   %small= @snippet.file_name
   - if can?(current_user, :admin_snippet, @project) || @snippet.author == current_user
diff --git a/spec/requests/snippets_spec.rb b/spec/requests/snippets_spec.rb
index 9ef217ba62c..b231b940a84 100644
--- a/spec/requests/snippets_spec.rb
+++ b/spec/requests/snippets_spec.rb
@@ -48,11 +48,11 @@ describe "Snippets" do
       page.current_path.should == new_project_snippet_path(project)
     end
 
-    describe "fill in" do
+    describe "fill in", js: true do
       before do
         fill_in "snippet_title", with: "login function"
         fill_in "snippet_file_name", with: "test.rb"
-        fill_in "snippet_content", with: "def login; end"
+        page.execute_script("editor.insert('def login; end');")
       end
 
       it { expect { click_button "Save" }.to change {Snippet.count}.by(1) }
@@ -83,7 +83,6 @@ describe "Snippets" do
       before do
         fill_in "snippet_title", with: "login function"
         fill_in "snippet_file_name", with: "test.rb"
-        fill_in "snippet_content", with: "def login; end"
       end
 
       it { expect { click_button "Save" }.to_not change {Snippet.count} }