Download as
Browse Code »

Commit 05bff8b6800494dace7456c6acec6cb80c1bc1b2

Authored by Dmitriy Zaporozhets
2 parents de8c43f6 1ad174fb
Exists in spb-stable and in 2 other branches 7-0-stable, 7-0-stable-spb

Merge branch 'improved-edit-file-ui' into 'master' 

Improved edit file ui

* remove ugly borders
* replace small buttons with tabs
* add spinner while diff is loading
Showing 3 changed files with 19 additions and 11 deletions   Show diff stats
app/assets/stylesheets/sections/diff.scss
  Diff comments   View file @05bff8b
@@ -330,3 +330,8 @@ @@ -330,3 +330,8 @@
330 } 330 }
331 } 331 }
332 } 332 }
  333 +
  334 +.file-content .diff-file {
  335 + margin: 0;
  336 + border: none;
  337 +}
app/views/projects/edit_tree/preview.html.haml
  Diff comments   View file @05bff8b
@@ -23,4 +23,4 @@ @@ -23,4 +23,4 @@
23 %td.new_line= link_to raw(type == "old" ? " " : line_new) , "##{line_code}", id: line_code 23 %td.new_line= link_to raw(type == "old" ? " " : line_new) , "##{line_code}", id: line_code
24 %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw diff_line_content(line) 24 %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw diff_line_content(line)
25 - else 25 - else
26 - %p.nothing_here_message No changes. 26 + .nothing-here-block No changes.
app/views/projects/edit_tree/show.html.haml
  Diff comments   View file @05bff8b
1 -%h3.page-title Edit mode  
2 .file-editor 1 .file-editor
  2 + %ul.nav.nav-tabs.js-edit-mode
  3 + %li.active
  4 + = link_to 'Edit', '#editor'
  5 + %li
  6 + = link_to editing_preview_title(@blob.name), '#preview', 'data-preview-url' => preview_project_edit_tree_path(@project, @id)
  7 +
3 = form_tag(project_edit_tree_path(@project, @id), method: :put, class: "form-horizontal") do 8 = form_tag(project_edit_tree_path(@project, @id), method: :put, class: "form-horizontal") do
4 .file-holder.file 9 .file-holder.file
5 .file-title 10 .file-title
6 - .btn-group.js-edit-mode.left-options  
7 - = link_to 'Edit', '#editor', class: 'active hover btn btn-tiny'  
8 - = link_to editing_preview_title(@blob.name), '#preview', class: 'btn btn-tiny', 'data-preview-url' => preview_project_edit_tree_path(@project, @id)  
9 %i.icon-file 11 %i.icon-file
10 %span.file_name 12 %span.file_name
  13 + %span.monospace.light #{@ref}:
11 = @path 14 = @path
12 - %small  
13 - on  
14 - %strong= @ref  
15 %span.options 15 %span.options
16 .btn-group.tree-btn-group 16 .btn-group.tree-btn-group
17 = link_to "Cancel", @after_edit_path, class: "btn btn-tiny btn-cancel", data: { confirm: leave_edit_message } 17 = link_to "Cancel", @after_edit_path, class: "btn btn-tiny btn-cancel", data: { confirm: leave_edit_message }
18 .file-content.code 18 .file-content.code
19 %pre.js-edit-mode-pane#editor= @blob.data 19 %pre.js-edit-mode-pane#editor= @blob.data
20 .js-edit-mode-pane#preview.hide 20 .js-edit-mode-pane#preview.hide
  21 + %center
  22 + %h2
  23 + %i.icon-spinner.icon-spin
21 24
22 .form-group.commit_message-group 25 .form-group.commit_message-group
23 = label_tag 'commit_message', class: "control-label" do 26 = label_tag 'commit_message', class: "control-label" do
@@ -61,14 +64,14 @@ @@ -61,14 +64,14 @@
61 paneId = currentLink.attr('href'), 64 paneId = currentLink.attr('href'),
62 currentPane = editModePanes.filter(paneId); 65 currentPane = editModePanes.filter(paneId);
63 66
64 - editModeLinks.removeClass('active hover');  
65 - currentLink.addClass('active hover'); 67 + editModeLinks.parent().removeClass('active hover');
  68 + currentLink.parent().addClass('active hover');
66 editModePanes.hide(); 69 editModePanes.hide();
67 70
68 if (paneId == '#preview') { 71 if (paneId == '#preview') {
  72 + currentPane.fadeIn(200);
69 $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) { 73 $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) {
70 currentPane.empty().append(response); 74 currentPane.empty().append(response);
71 - currentPane.fadeIn(200);  
72 }) 75 })
73 } else { 76 } else {
74 currentPane.fadeIn(200); 77 currentPane.fadeIn(200);