Fix editor form, styles and JS

2 files changed, 58 insertions, 14 deletions

diff --git a/app/assets/stylesheets/sections/editor.scss b/app/assets/stylesheets/sections/editor.scss
index e8ecab62f87..711dc0d8e43 100644
--- a/app/assets/stylesheets/sections/editor.scss
+++ b/app/assets/stylesheets/sections/editor.scss
@@ -1,17 +1,48 @@
 .file-editor {
   #editor{
     border: none;
+    border-radius: 0;
     height: 500px;
     margin: 0;
     padding: 0;
     position: relative;
     width: 100%;
   }
-  .editor-commit-comment {
-    padding-top:20px;
+
+  .cancel-btn {
+    color: #B94A48;
+    &:hover {
+      color: #B94A48;
+    }
+  }
+  .commit-button-annotation {
+    @extend .alert;
+    @extend .alert-info;
+    display: inline-block;
+    margin: 0;
+    padding: 2px;
+
+    > * {
+      float: left;
+    }
+
+    .commit-btn {
+      @extend .save-btn;
+    }
+    .message {
+      display: inline-block;
+      margin: 5px 8px 0 8px;
+    }
+  }
+  .commit_message-group {
+    margin-top: 20px;
+
+    label {
+      font-size: 16px;
+      line-height: 20px;
+    }
     textarea {
-      width: 50%;
-      margin-left: 20px;
+      @extend .span8;
     }
   }
 }
diff --git a/app/views/tree/edit.html.haml b/app/views/tree/edit.html.haml
index d1d7bf8fb2a..adee68a00f8 100644
--- a/app/views/tree/edit.html.haml
+++ b/app/views/tree/edit.html.haml
@@ -1,21 +1,32 @@
 .file-editor
-  = form_tag(project_tree_path(@project, @id), :method => :put) do
+  = form_tag(project_tree_path(@project, @id), method: :put, class: "form-horizontal") do
     .file_holder
       .file_title
         %i.icon-file
         %span.file_name
-          = "#{@tree.path} (#{@ref})"
+          = @tree.path
+          %small
+            on
+            %strong= @ref
+        %span.options
+          .btn-group.tree-btn-group
+            = link_to "Cancel", project_tree_path(@project, @id), class: "btn very_small cancel-btn", confirm: "Are you sure?"
       .file_content.code
         %pre#editor= @tree.data
 
-    .editor-commit-comment
-      = label_tag 'commit_message' do
-        %p.slead Commit message
-      = text_area_tag 'commit_message', '', :required => true
+    .control-group.commit_message-group
+      = label_tag 'commit_message', class: "control-label" do
+        Commit message
+      .controls
+        = text_area_tag 'commit_message', '', placeholder: "Update #{@tree.name}", required: true, rows: 3
     .form-actions
       = hidden_field_tag 'last_commit', @last_commit
-      = hidden_field_tag 'content', '', :id => :file_content
-      = button_tag "Commit", class: 'btn save-btn'
+      = hidden_field_tag 'content', '', id: :file_content
+      .commit-button-annotation
+        = button_tag "Commit", class: 'btn commit-btn js-commit-button'
+        .message
+          to branch
+          %strong= @ref
       = link_to "Cancel", project_tree_path(@project, @id), class: "btn cancel-btn", confirm: "Are you sure?"
 
 :javascript
@@ -25,7 +36,9 @@
     editor.getSession().setMode('ace/mode/' + ace_mode);
   }
 
-  $(".save-btn").click(function(){
+  disableButtonIfEmptyField("#commit_message", ".js-commit-button");
+
+  $(".js-commit-button").click(function(){
     $("#file_content").val(editor.getValue());
-    $(".form_editor form").submit();
+    $(".file-editor form").submit();
   });