Optimized commit diff views, now showing file size and file mode changes
Replaced commit status images (diff_file_*.png) with fontawesome icons
This commit is contained in:
Koen Punt
parent
b339c747a9
commit
3ac1f9459a
|
|
@ -11,6 +11,7 @@ $hover_border: #ADF;
|
|||
|
||||
/** GitLab Fonts **/
|
||||
@font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); }
|
||||
$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
|
||||
|
||||
/** MIXINS **/
|
||||
@mixin shade {
|
||||
|
|
|
|||
|
|
@ -74,16 +74,33 @@
|
|||
margin-bottom:1em;
|
||||
|
||||
.diff_file_header {
|
||||
padding:7px 5px;
|
||||
border-bottom:1px solid #CCC;
|
||||
@extend .clearfix;
|
||||
padding: 5px 5px 5px 10px;
|
||||
color: #555;
|
||||
border-bottom:1px solid #D8D8D8;
|
||||
background: #eee;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
|
||||
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
|
||||
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
|
||||
background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
|
||||
|
||||
span {
|
||||
font-size:14px;
|
||||
> span {
|
||||
font-family: $monospace;
|
||||
font-size:12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
a.view-commit{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.commit-short-id{
|
||||
font-family: $monospace;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.file-mode{
|
||||
font-family: $monospace;
|
||||
}
|
||||
}
|
||||
.diff_file_content {
|
||||
|
|
@ -92,7 +109,7 @@
|
|||
background:#fff;
|
||||
color:#333;
|
||||
font-size: 12px;
|
||||
font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
|
||||
font-family: $monospace;
|
||||
.old{
|
||||
span.idiff{
|
||||
background-color:#FAA;
|
||||
|
|
@ -113,22 +130,31 @@
|
|||
.diff_file_content_image {
|
||||
background:#eee;
|
||||
text-align:center;
|
||||
img {
|
||||
.image {
|
||||
display: inline-block;
|
||||
margin:50px;
|
||||
padding:1px;
|
||||
max-width:400px;
|
||||
|
||||
&.diff_image_removed {
|
||||
border: 1px solid #C00;
|
||||
&.diff_removed {
|
||||
img{
|
||||
border: 1px solid #C00;
|
||||
}
|
||||
}
|
||||
|
||||
&.diff_image_added {
|
||||
border: 1px solid #0C0;;
|
||||
&.diff_added {
|
||||
img{
|
||||
border: 1px solid #0C0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-info{
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.img_compared {
|
||||
img {
|
||||
.image {
|
||||
max-width:300px;
|
||||
}
|
||||
}
|
||||
|
|
@ -225,7 +251,7 @@
|
|||
float:left;
|
||||
@extend .lined;
|
||||
min-width:65px;
|
||||
font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
|
||||
font-family: $monospace;
|
||||
}
|
||||
|
||||
.commit-author-name {
|
||||
|
|
@ -237,17 +263,29 @@
|
|||
}
|
||||
|
||||
.diff_file_header a,
|
||||
.file_stats a {
|
||||
color:$style_color;
|
||||
.file-stats a {
|
||||
color: $style_color;
|
||||
}
|
||||
|
||||
.file_stats {
|
||||
span {
|
||||
img {
|
||||
width:14px;
|
||||
float:left;
|
||||
margin-right:6px;
|
||||
padding:2px 0;
|
||||
.file-stats {
|
||||
.new-file{
|
||||
i{
|
||||
color: #1BCF00;
|
||||
}
|
||||
}
|
||||
.renamed-file{
|
||||
i{
|
||||
color: #FE9300;
|
||||
}
|
||||
}
|
||||
.deleted-file{
|
||||
i{
|
||||
color: #FF0000;
|
||||
}
|
||||
}
|
||||
.edit-file{
|
||||
i{
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -259,5 +297,5 @@
|
|||
font-size:13px;
|
||||
background: #474D57;
|
||||
color:#fff;
|
||||
font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
|
||||
font-family: $monospace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@ module CommitsHelper
|
|||
|
||||
def image_diff_class(diff)
|
||||
if diff.deleted_file
|
||||
"diff_image_removed"
|
||||
"diff_removed"
|
||||
elsif diff.new_file
|
||||
"diff_image_added"
|
||||
"diff_added"
|
||||
else
|
||||
nil
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
%ul.bordered-list
|
||||
- diffs.each do |diff|
|
||||
- diffs.each_with_index do |diff, i|
|
||||
%li
|
||||
- if diff.deleted_file
|
||||
%span.removed_file
|
||||
%a{href: "##{diff.old_path}"}
|
||||
%span.deleted-file
|
||||
%a{href: "#diff-#{i}"}
|
||||
%i.icon-minus
|
||||
= diff.old_path
|
||||
= image_tag "diff_file_delete.png"
|
||||
- elsif diff.renamed_file
|
||||
%span.moved_file
|
||||
%a{href: "##{diff.new_path}"}
|
||||
%span.renamed-file
|
||||
%a{href: "#diff-#{i}"}
|
||||
%i.icon-minus
|
||||
= diff.old_path
|
||||
= "->"
|
||||
= diff.new_path
|
||||
= image_tag "diff_file_notice.png"
|
||||
- elsif diff.new_file
|
||||
%span.new_file
|
||||
%a{href: "##{diff.new_path}"}
|
||||
%span.new-file
|
||||
%a{href: "#diff-#{i}"}
|
||||
%i.icon-plus
|
||||
= diff.new_path
|
||||
= image_tag "diff_file_add.png"
|
||||
- else
|
||||
%span.edit_file
|
||||
%a{href: "##{diff.new_path}"}
|
||||
%span.edit-file
|
||||
%a{href: "#diff-#{i}"}
|
||||
%i.icon-adjust
|
||||
= diff.new_path
|
||||
= image_tag "diff_file_info.png"
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
%p.cgray
|
||||
Showing #{pluralize(diffs.count, "changed file")}
|
||||
.file_stats
|
||||
.file-stats
|
||||
= render "commits/diff_head", diffs: diffs
|
||||
|
||||
- unless @suppress_diff
|
||||
|
|
@ -18,30 +18,44 @@
|
|||
- file = (@commit.tree / diff.new_path)
|
||||
- file = (@commit.prev_commit.tree / diff.old_path) unless file
|
||||
- next unless file
|
||||
.diff_file
|
||||
.diff_file{id: "diff-#{i}"}
|
||||
.diff_file_header
|
||||
- if diff.deleted_file
|
||||
%i.icon-file
|
||||
%span{id: "#{diff.old_path}"}= diff.old_path
|
||||
%span= diff.old_path
|
||||
|
||||
- if @commit.prev_commit
|
||||
= link_to project_tree_path(@project, tree_join(@commit.prev_commit_id, diff.new_path)), {:class => 'btn right view-commit'} do
|
||||
View file @
|
||||
%span.commit-short-id= @commit.short_id(6)
|
||||
- else
|
||||
= link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)) do
|
||||
%i.icon-file
|
||||
%span{id: "#{diff.new_path}"}= diff.new_path
|
||||
%span= diff.new_path
|
||||
- if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
|
||||
%span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
|
||||
|
||||
= link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn right view-commit'} do
|
||||
View file @
|
||||
%span.commit-short-id= @commit.short_id(6)
|
||||
|
||||
%br/
|
||||
.diff_file_content
|
||||
-# Skipp all non non-supported blobs
|
||||
- next unless file.respond_to?('text?')
|
||||
|
||||
- if file.text?
|
||||
= render "commits/text_file", diff: diff, index: i
|
||||
- elsif file.image?
|
||||
- old_file = (@commit.prev_commit.tree / diff.old_path)
|
||||
- if diff.renamed_file || diff.new_file || diff.deleted_file
|
||||
.diff_file_content_image
|
||||
%img{class: image_diff_class(diff), src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
|
||||
.image{class: image_diff_class(diff)}
|
||||
%img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
|
||||
%div.image-info= "#{number_to_human_size file.size}"
|
||||
- else
|
||||
- old_file = (@commit.prev_commit.tree / diff.old_path)
|
||||
.diff_file_content_image.img_compared
|
||||
%img{class: "diff_image_removed", src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
|
||||
%img{class: "diff_image_added", src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
|
||||
.image.diff_removed
|
||||
%img{src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
|
||||
%div.image-info= "#{number_to_human_size file.size}"
|
||||
.image.diff_added
|
||||
%img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
|
||||
%div.image-info= "#{number_to_human_size file.size}"
|
||||
- else
|
||||
%p.nothing_here_message No preview for this file type
|
||||
|
|
|
|||
Loading…
Reference in a new issue