Download as
Browse Code »

Commit 3ac1f9459a481fa77be2c0c1b68d4f1ccc5fe9f9

Authored by Koen Punt
1 parent b339c747
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Optimized commit diff views, now showing file size and file mode changes 

Replaced commit status images (diff_file_*.png) with fontawesome icons
Showing 5 changed files with 102 additions and 49 deletions   Show diff stats
app/assets/stylesheets/main.scss
  Diff comments   View file @3ac1f94
... ... @@ -11,6 +11,7 @@ $hover_border: #ADF;
11 11  
12 12 /** GitLab Fonts **/
13 13 @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); }
  14 +$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
14 15  
15 16 /** MIXINS **/
16 17 @mixin shade {
... ...
app/assets/stylesheets/sections/commits.scss
  Diff comments   View file @3ac1f94
... ... @@ -74,16 +74,33 @@
74 74 margin-bottom:1em;
75 75  
76 76 .diff_file_header {
77   - padding:7px 5px;
78   - border-bottom:1px solid #CCC;
  77 + @extend .clearfix;
  78 + padding: 5px 5px 5px 10px;
  79 + color: #555;
  80 + border-bottom:1px solid #D8D8D8;
79 81 background: #eee;
80 82 background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
81 83 background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
82 84 background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
83 85 background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
84 86  
85   - span {
86   - font-size:14px;
  87 + > span {
  88 + font-family: $monospace;
  89 + font-size:12px;
  90 + line-height: 30px;
  91 + }
  92 +
  93 + a.view-commit{
  94 + font-weight: bold;
  95 + }
  96 +
  97 + .commit-short-id{
  98 + font-family: $monospace;
  99 + font-size: smaller;
  100 + }
  101 +
  102 + .file-mode{
  103 + font-family: $monospace;
87 104 }
88 105 }
89 106 .diff_file_content {
... ... @@ -92,7 +109,7 @@
92 109 background:#fff;
93 110 color:#333;
94 111 font-size: 12px;
95   - font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
  112 + font-family: $monospace;
96 113 .old{
97 114 span.idiff{
98 115 background-color:#FAA;
... ... @@ -113,22 +130,31 @@
113 130 .diff_file_content_image {
114 131 background:#eee;
115 132 text-align:center;
116   - img {
  133 + .image {
  134 + display: inline-block;
117 135 margin:50px;
118 136 padding:1px;
119 137 max-width:400px;
120 138  
121   - &.diff_image_removed {
122   - border: 1px solid #C00;
  139 + &.diff_removed {
  140 + img{
  141 + border: 1px solid #C00;
  142 + }
123 143 }
124 144  
125   - &.diff_image_added {
126   - border: 1px solid #0C0;;
  145 + &.diff_added {
  146 + img{
  147 + border: 1px solid #0C0;
  148 + }
  149 + }
  150 +
  151 + .image-info{
  152 + margin: 5px 0 0 0;
127 153 }
128 154 }
129 155  
130 156 &.img_compared {
131   - img {
  157 + .image {
132 158 max-width:300px;
133 159 }
134 160 }
... ... @@ -225,7 +251,7 @@
225 251 float:left;
226 252 @extend .lined;
227 253 min-width:65px;
228   - font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
  254 + font-family: $monospace;
229 255 }
230 256  
231 257 .commit-author-name {
... ... @@ -237,17 +263,29 @@
237 263 }
238 264  
239 265 .diff_file_header a,
240   -.file_stats a {
241   - color:$style_color;
  266 +.file-stats a {
  267 + color: $style_color;
242 268 }
243 269  
244   -.file_stats {
245   - span {
246   - img {
247   - width:14px;
248   - float:left;
249   - margin-right:6px;
250   - padding:2px 0;
  270 +.file-stats {
  271 + .new-file{
  272 + i{
  273 + color: #1BCF00;
  274 + }
  275 + }
  276 + .renamed-file{
  277 + i{
  278 + color: #FE9300;
  279 + }
  280 + }
  281 + .deleted-file{
  282 + i{
  283 + color: #FF0000;
  284 + }
  285 + }
  286 + .edit-file{
  287 + i{
  288 + color: #555;
251 289 }
252 290 }
253 291 }
... ... @@ -259,5 +297,5 @@
259 297 font-size:13px;
260 298 background: #474D57;
261 299 color:#fff;
262   - font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
  300 + font-family: $monospace;
263 301 }
... ...
app/helpers/commits_helper.rb
  Diff comments   View file @3ac1f94
... ... @@ -57,9 +57,9 @@ module CommitsHelper
57 57  
58 58 def image_diff_class(diff)
59 59 if diff.deleted_file
60   - "diff_image_removed"
  60 + "diff_removed"
61 61 elsif diff.new_file
62   - "diff_image_added"
  62 + "diff_added"
63 63 else
64 64 nil
65 65 end
... ...
app/views/commits/_diff_head.html.haml
  Diff comments   View file @3ac1f94
1 1 %ul.bordered-list
2   - - diffs.each do |diff|
  2 + - diffs.each_with_index do |diff, i|
3 3 %li
4 4 - if diff.deleted_file
5   - %span.removed_file
6   - %a{href: "##{diff.old_path}"}
  5 + %span.deleted-file
  6 + %a{href: "#diff-#{i}"}
  7 + %i.icon-minus
7 8 = diff.old_path
8   - = image_tag "diff_file_delete.png"
9 9 - elsif diff.renamed_file
10   - %span.moved_file
11   - %a{href: "##{diff.new_path}"}
  10 + %span.renamed-file
  11 + %a{href: "#diff-#{i}"}
  12 + %i.icon-minus
12 13 = diff.old_path
13 14 = "->"
14 15 = diff.new_path
15   - = image_tag "diff_file_notice.png"
16 16 - elsif diff.new_file
17   - %span.new_file
18   - %a{href: "##{diff.new_path}"}
  17 + %span.new-file
  18 + %a{href: "#diff-#{i}"}
  19 + %i.icon-plus
19 20 = diff.new_path
20   - = image_tag "diff_file_add.png"
21 21 - else
22   - %span.edit_file
23   - %a{href: "##{diff.new_path}"}
  22 + %span.edit-file
  23 + %a{href: "#diff-#{i}"}
  24 + %i.icon-adjust
24 25 = diff.new_path
25   - = image_tag "diff_file_info.png"
26 26  
... ...
app/views/commits/_diffs.html.haml
  Diff comments   View file @3ac1f94
... ... @@ -9,7 +9,7 @@
9 9  
10 10 %p.cgray
11 11 Showing #{pluralize(diffs.count, "changed file")}
12   -.file_stats
  12 +.file-stats
13 13 = render "commits/diff_head", diffs: diffs
14 14  
15 15 - unless @suppress_diff
... ... @@ -18,30 +18,44 @@
18 18 - file = (@commit.tree / diff.new_path)
19 19 - file = (@commit.prev_commit.tree / diff.old_path) unless file
20 20 - next unless file
21   - .diff_file
  21 + .diff_file{id: "diff-#{i}"}
22 22 .diff_file_header
23 23 - if diff.deleted_file
24   - %i.icon-file
25   - %span{id: "#{diff.old_path}"}= diff.old_path
  24 + %span= diff.old_path
  25 +
  26 + - if @commit.prev_commit
  27 + = link_to project_tree_path(@project, tree_join(@commit.prev_commit_id, diff.new_path)), {:class => 'btn right view-commit'} do
  28 + View file @
  29 + %span.commit-short-id= @commit.short_id(6)
26 30 - else
27   - = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)) do
28   - %i.icon-file
29   - %span{id: "#{diff.new_path}"}= diff.new_path
  31 + %span= diff.new_path
  32 + - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
  33 + %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
  34 +
  35 + = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn right view-commit'} do
  36 + View file @
  37 + %span.commit-short-id= @commit.short_id(6)
  38 +
30 39 %br/
31 40 .diff_file_content
32 41 -# Skipp all non non-supported blobs
33 42 - next unless file.respond_to?('text?')
34   -
35 43 - if file.text?
36 44 = render "commits/text_file", diff: diff, index: i
37 45 - elsif file.image?
  46 + - old_file = (@commit.prev_commit.tree / diff.old_path)
38 47 - if diff.renamed_file || diff.new_file || diff.deleted_file
39 48 .diff_file_content_image
40   - %img{class: image_diff_class(diff), src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
  49 + .image{class: image_diff_class(diff)}
  50 + %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
  51 + %div.image-info= "#{number_to_human_size file.size}"
41 52 - else
42   - - old_file = (@commit.prev_commit.tree / diff.old_path)
43 53 .diff_file_content_image.img_compared
44   - %img{class: "diff_image_removed", src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
45   - %img{class: "diff_image_added", src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
  54 + .image.diff_removed
  55 + %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
  56 + %div.image-info= "#{number_to_human_size file.size}"
  57 + .image.diff_added
  58 + %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
  59 + %div.image-info= "#{number_to_human_size file.size}"
46 60 - else
47 61 %p.nothing_here_message No preview for this file type
... ...