Editing preview

8 files changed, 102 insertions, 8 deletions

diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss
index 12559f76051..6418f24d97f 100644
--- a/app/assets/stylesheets/generic/files.scss
+++ b/app/assets/stylesheets/generic/files.scss
@@ -26,6 +26,10 @@
       margin-top: -5px;
     }
 
+    .left-options {
+      margin-top: -3px;
+    }
+
     .file_name {
       color: $style_color;
       font-size: 14px;
diff --git a/app/controllers/projects/edit_tree_controller.rb b/app/controllers/projects/edit_tree_controller.rb
index ff5206b6fa1..be611892bb0 100644
--- a/app/controllers/projects/edit_tree_controller.rb
+++ b/app/controllers/projects/edit_tree_controller.rb
@@ -26,6 +26,18 @@ class Projects::EditTreeController < Projects::BaseTreeController
     end
   end
 
+  def preview
+    @content = params[:content]
+    #FIXME workaround https://github.com/gitlabhq/gitlabhq/issues/5936
+    @content += "\n" if @blob.data.end_with?("\n")
+
+    diffy = Diffy::Diff.new(@blob.data, @content, diff: '-U 3',
+                            include_diff_info: true)
+    @diff = Gitlab::DiffParser.new(diffy.diff.scan(/.*\n/))
+
+    render layout: false
+  end
+
   private
 
   def blob
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index c6e4f574b67..de081acc2ba 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -16,9 +16,10 @@ module CommitsHelper
   end
 
   def each_diff_line(diff, index)
-    Gitlab::DiffParser.new(diff).each do |full_line, type, line_code, line_new, line_old|
-      yield(full_line, type, line_code, line_new, line_old)
-    end
+    Gitlab::DiffParser.new(diff.diff.lines.to_a, diff.new_path)
+      .each do |full_line, type, line_code, line_new, line_old|
+        yield(full_line, type, line_code, line_new, line_old)
+      end
   end
 
   def each_diff_line_near(diff, index, expected_line_code)
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index 50501dffefb..f39d0081dce 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -91,4 +91,12 @@ module TreeHelper
   def leave_edit_message
     "Leave edit mode?\nAll unsaved changes will be lost."
   end
+
+  def editing_preview_title(filename)
+    if gitlab_markdown?(filename) || markup?(filename)
+      'Preview'
+    else
+      'Diff'
+    end
+  end
 end
diff --git a/app/models/note.rb b/app/models/note.rb
index 6f7afcd1f9f..cee10ec90d2 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -184,9 +184,10 @@ class Note < ActiveRecord::Base
     return @diff_line if @diff_line
 
     if diff
-      Gitlab::DiffParser.new(diff).each do |full_line, type, line_code, line_new, line_old|
-        @diff_line = full_line if line_code == self.line_code
-      end
+      Gitlab::DiffParser.new(diff.diff.lines.to_a, diff.new_path)
+        .each do |full_line, type, line_code, line_new, line_old|
+          @diff_line = full_line if line_code == self.line_code
+        end
     end
 
     @diff_line
diff --git a/app/views/projects/edit_tree/_diff.html.haml b/app/views/projects/edit_tree/_diff.html.haml
new file mode 100644
index 00000000000..cf044feb9a4
--- /dev/null
+++ b/app/views/projects/edit_tree/_diff.html.haml
@@ -0,0 +1,13 @@
+%table.text-file
+  - each_diff_line(diff, 1) do |line, type, line_code, line_new, line_old, raw_line|
+    %tr.line_holder{ id: line_code, class: "#{type}" }
+      - if type == "match"
+        %td.old_line= "..."
+        %td.new_line= "..."
+        %td.line_content.matched= line
+      - else
+        %td.old_line
+          = link_to raw(type == "new" ? "&nbsp;" : line_old), "##{line_code}", id: line_code
+        %td.new_line= link_to raw(type == "old" ? "&nbsp;" : 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)
+
diff --git a/app/views/projects/edit_tree/preview.html.haml b/app/views/projects/edit_tree/preview.html.haml
new file mode 100644
index 00000000000..fc6d3bfbc24
--- /dev/null
+++ b/app/views/projects/edit_tree/preview.html.haml
@@ -0,0 +1,26 @@
+.diff-file
+  .diff-content
+    - if gitlab_markdown?(@blob.name)
+      .file-content.wiki
+        = preserve do
+          = markdown(@content)
+    - elsif markup?(@blob.name)
+      .file-content.wiki
+        = raw GitHub::Markup.render(@blob.name, @content)
+    - else
+      .file-content.code
+        - unless @diff.empty?
+          %table.text-file
+            - @diff.each do |line, type, line_code, line_new, line_old, raw_line|
+              %tr.line_holder{ id: line_code, class: "#{type}" }
+                - if type == "match"
+                  %td.old_line= "..."
+                  %td.new_line= "..."
+                  %td.line_content.matched= line
+                - else
+                  %td.old_line
+                    = link_to raw(type == "new" ? "&nbsp;" : line_old), "##{line_code}", id: line_code
+                  %td.new_line= link_to raw(type == "old" ? "&nbsp;" : 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.
diff --git a/app/views/projects/edit_tree/show.html.haml b/app/views/projects/edit_tree/show.html.haml
index 3f2e98f3a7f..48babb43aaf 100644
--- a/app/views/projects/edit_tree/show.html.haml
+++ b/app/views/projects/edit_tree/show.html.haml
@@ -1,8 +1,11 @@
 %h3.page-title Edit mode
 .file-editor
   = form_tag(project_edit_tree_path(@project, @id), method: :put, class: "form-horizontal") do
-    .file-holder
+    .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
           = @path
@@ -13,7 +16,8 @@
           .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#editor= @blob.data
+        %pre.js-edit-mode-pane#editor= @blob.data
+        .js-edit-mode-pane#preview.hide
 
     .form-group.commit_message-group
       = label_tag 'commit_message', class: "control-label" do
@@ -45,3 +49,28 @@
     $("#file-content").val(editor.getValue());
     $(".file-editor form").submit();
   });
+
+  var editModePanes = $('.js-edit-mode-pane'),
+      editModeLinks = $('.js-edit-mode a');
+
+  editModeLinks.click(function(event) {
+    event.preventDefault();
+
+    var currentLink = $(this),
+        paneId = currentLink.attr('href'),
+        currentPane = editModePanes.filter(paneId);
+
+    editModeLinks.removeClass('active hover');
+    currentLink.addClass('active hover');
+    editModePanes.hide();
+
+    if (paneId == '#preview') {
+      $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) {
+        currentPane.empty().append(response);
+        currentPane.fadeIn(200);
+      })
+    } else {
+      currentPane.fadeIn(200);
+      editor.focus()
+    }
+  })