Improve edit page UI/UX

app/assets/stylesheets/sections/diff.scss

@@ -330,3 +330,8 @@
     }
   }
 }
+
+.file-content .diff-file {
+  margin: 0;
+  border: none;
+}

app/views/projects/edit_tree/preview.html.haml

@@ -23,4 +23,4 @@
                   %td.new_line= link_to raw(type == "old" ? " " : line_new) , "##{line_code}", id: line_code
                   %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw diff_line_content(line)
         - else
-          %p.nothing_here_message No changes.
+          .nothing-here-block No changes.

app/views/projects/edit_tree/show.html.haml

-%h3.page-title Edit mode
 .file-editor
+  %ul.nav.nav-tabs.js-edit-mode
+    %li.active
+      = link_to 'Edit', '#editor'
+    %li
+      = link_to editing_preview_title(@blob.name), '#preview', 'data-preview-url' => preview_project_edit_tree_path(@project, @id)
+
   = form_tag(project_edit_tree_path(@project, @id), method: :put, class: "form-horizontal") do
     .file-holder.file
       .file-title
-        .btn-group.js-edit-mode.left-options
-          = link_to 'Edit', '#editor', class: 'active hover btn btn-tiny'
-          = link_to editing_preview_title(@blob.name), '#preview', class: 'btn btn-tiny', 'data-preview-url' => preview_project_edit_tree_path(@project, @id)
         %i.icon-file
         %span.file_name
+          %span.monospace.light #{@ref}:
           = @path
-          %small
-            on
-            %strong= @ref
         %span.options
           .btn-group.tree-btn-group
             = link_to "Cancel", @after_edit_path, class: "btn btn-tiny btn-cancel", data: { confirm: leave_edit_message }
       .file-content.code
         %pre.js-edit-mode-pane#editor= @blob.data
         .js-edit-mode-pane#preview.hide
+          %center
+            %h2
+              %i.icon-spinner.icon-spin
 
     .form-group.commit_message-group
       = label_tag 'commit_message', class: "control-label" do
@@ -61,14 +64,14 @@
         paneId = currentLink.attr('href'),
         currentPane = editModePanes.filter(paneId);
 
-    editModeLinks.removeClass('active hover');
-    currentLink.addClass('active hover');
+    editModeLinks.parent().removeClass('active hover');
+    currentLink.parent().addClass('active hover');
     editModePanes.hide();
 
     if (paneId == '#preview') {
+      currentPane.fadeIn(200);
       $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) {
         currentPane.empty().append(response);
-        currentPane.fadeIn(200);
       })
     } else {
       currentPane.fadeIn(200);