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

@@ -0,0 +1,9 @@
+.snippet.file_holder {
+  .file_title {
+    .snippet-file-name {
+      position: relative;
+      top: -4px;
+      left: -4px;
+    }
+  }
+}

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

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