Add ace editor to snippets

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";

app/assets/stylesheets/sections/snippets.scss

+.snippet.file_holder {
+  .file_title {
+    .snippet-file-name {
+      position: relative;
+      top: -4px;
+      left: -4px;
+    }
+  }
+}

app/views/snippets/_form.html.haml

 %h3.page_title
   = @snippet.new_record? ? "New Snippet" : "Edit Snippet ##{@snippet.id}"
 %hr
-= form_for [@project, @snippet] do |f|
+.snippet-form-holder
+  = form_for [@project, @snippet] do |f|
     -if @snippet.errors.any?
       .alert-message.block-message.error
         %ul
@@ -10,19 +11,31 @@
 
     .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"
+      .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
-    = f.label :content, "Code"
-    .input= f.text_area :content, class: "span8"
+      .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: "primary btn"
+      = 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());
+  });
+

app/views/snippets/show.html.haml

 = 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

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} }