Skip to content

G
gitlab-ce
Commit 21facf53 authored by Douwe Maan's avatar Douwe Maan
Browse files
Options

Use consistent markup and styling for highlighting across blobs, diffs, blame and snippets

parent a4ff270d
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 260 deletions
app/assets/stylesheets/framework/common.scss
View file @ 21facf53
......@@ -120,14 +120,6 @@ span.update-author {
display: inline;
}
.line_holder {
&:hover {
td {
background: #FFFFCF !important;
}
}
}
p.time {
color: #999;
font-size: 90%;
......
app/assets/stylesheets/framework/files.scss
View file @ 21facf53
......@@ -92,15 +92,6 @@
&:last-child {
border-right: none;
}
background: #fff;
}
.lines {
pre {
padding: 0;
margin: 0;
background: none;
border: none;
}
}
img.avatar {
border: 0 none;
......@@ -116,18 +107,18 @@
color: #888;
}
}
td.blame-numbers {
pre {
color: #AAA;
white-space: pre;
}
background: #f1f1f1;
td.line-numbers {
float: none;
border-left: 1px solid #DDD;
}
td.lines {
padding: 0;
code {
font-family: $monospace_font;
}
pre {
margin: 0;
}
}
}
......
app/assets/stylesheets/highlight/dark.scss
View file @ 21facf53
/* https://github.com/MozMorris/tomorrow-pygments */
.code.dark {
// Line numbers
.line-numbers, .diff-line-num {
background-color: #1d1f21;
}
background-color: #1d1f21 !important;
color: #c5c8c6 !important;
pre.highlight,
.line-numbers,
.line-numbers a {
background-color: #1d1f21 !important;
color: #c5c8c6 !important;
.diff-line-num, .diff-line-num a {
color: rgba(255, 255, 255, 0.3);
}
// Code itself
pre.code {
border-left: 1px solid #666;
}
&, pre.code, .line_holder .line_content {
background-color: #1d1f21;
color: #c5c8c6;
}
// Diff line
.line_holder {
.diff-line-num.new, .line_content.new {
@include diff_background(51, 255, 51, #808080);
}
.diff-line-num.old, .line_content.old {
@include diff_background(255, 51, 51, #808080);
}
}
// highlight line via anchor
pre .hll {
background-color: #557 !important;
......@@ -90,22 +105,4 @@
.vg { color: #cc6666 } /* Name.Variable.Global */
.vi { color: #cc6666 } /* Name.Variable.Instance */
.il { color: #de935f } /* Literal.Number.Integer.Long */
.line_holder {
&.parallel .new.new_line,
&.parallel .new.line_content,
&.new .old_line,
&.new .new_line,
&.new .line_content {
@include diff_background(255, 255, 255, #808080);
}
&.parallel .old.old_line,
&.parallel .old.line_content,
&.old .old_line,
&.old .new_line,
&.old .line_content {
@include diff_background(255, 51, 51, #808080);
}
}
}
app/assets/stylesheets/highlight/monokai.scss
View file @ 21facf53
/* https://github.com/richleland/pygments-css/blob/master/monokai.css */
.code.monokai {
// Line numbers
.line-numbers, .diff-line-num {
background-color: #272822;
}
background-color: #272822 !important;
color: #f8f8f2 !important;
pre.highlight,
.line-numbers,
.line-numbers a {
background-color :#272822 !important;
color: #f8f8f2 !important;
.diff-line-num, .diff-line-num a {
color: #f8f8f2;
}
// Code itself
pre.code {
border-left: 1px solid #555;
}
&, pre.code, .line_holder .line_content {
background-color: #272822;
color: #f8f8f2;
}
// Diff line
.line_holder {
.diff-line-num.new, .line_content.new {
@include diff_background(156, 175, 183, #808080);
}
.diff-line-num.old, .line_content.old {
@include diff_background(254, 147, 140, #808080);
}
}
// highlight line via anchor
pre .hll {
background-color: #49483e !important;
......@@ -90,22 +105,4 @@
.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
.gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
.line_holder {
&.parallel .new.new_line,
&.parallel .new.line_content,
&.new .old_line,
&.new .new_line,
&.new .line_content {
@include diff_background(156, 175, 183, #808080);
}
&.parallel .old.old_line,
&.parallel .old.line_content,
&.old .old_line,
&.old .new_line,
&.old .line_content {
@include diff_background(254, 147, 140, #808080);
}
}
}
app/assets/stylesheets/highlight/solarized_dark.scss
View file @ 21facf53
/* https://gist.github.com/qguv/7936275 */
.code.solarized-dark {
// Line numbers
.line-numbers, .diff-line-num {
background-color: #002b36;
}
background-color: #002b36 !important;
color: #93a1a1 !important;
pre.highlight,
.line-numbers,
.line-numbers a {
background-color: #002b36 !important;
color: #93a1a1 !important;
.diff-line-num, .diff-line-num a {
color: #93a1a1;
}
// Code itself
pre.code {
border-left: 1px solid #113b46;
}
&, pre.code, .line_holder .line_content {
background-color: #002b36;
color: #93a1a1;
}
// Diff line
.line_holder {
.diff-line-num.new, .line_content.new {
@include diff_background(255, 255, 255, #808080);
}
.diff-line-num.old, .line_content.old {
@include diff_background(255, 51, 51, #808080);
}
}
// highlight line via anchor
pre .hll {
background-color: #174652 !important;
......@@ -111,22 +126,4 @@
.vg { color: #268bd2 } /* Name.Variable.Global */
.vi { color: #268bd2 } /* Name.Variable.Instance */
.il { color: #2aa198 } /* Literal.Number.Integer.Long */
.line_holder {
&.parallel .new.new_line,
&.parallel .new.line_content,
&.new .old_line,
&.new .new_line,
&.new .line_content {
@include diff_background(255, 255, 255, #808080);
}
&.parallel .old.old_line,
&.parallel .old.line_content,
&.old .old_line,
&.old .new_line,
&.old .line_content {
@include diff_background(255, 51, 51, #808080);
}
}
}
app/assets/stylesheets/highlight/solarized_light.scss
View file @ 21facf53
/* https://gist.github.com/qguv/7936275 */
.code.solarized-light {
// Line numbers
.line-numbers, .diff-line-num {
background-color: #fdf6e3;
}
background-color: #fdf6e3 !important;
color: #586e75 !important;
pre.highlight,
.line-numbers,
.line-numbers a {
background-color: #fdf6e3 !important;
color: #586e75 !important;
.diff-line-num, .diff-line-num a {
color: #586e75;
}
// Code itself
pre.code {
border-left: 1px solid #c5d0d4;
}
&, pre.code, .line_holder .line_content {
background-color: #fdf6e3;
color: #586e75;
}
// Diff line
.line_holder {
.diff-line-num.new, .line_content.new {
@include diff_background(92, 164, 169, #FAF3DD);
}
.diff-line-num.old, .line_content.old {
@include diff_background(237, 106, 90, #FAF3DD);
}
}
// highlight line via anchor
pre .hll {
background-color: #ddd8c5 !important;
......@@ -111,23 +126,4 @@
.vg { color: #268bd2 } /* Name.Variable.Global */
.vi { color: #268bd2 } /* Name.Variable.Instance */
.il { color: #2aa198 } /* Literal.Number.Integer.Long */
.line_holder {
&.parallel .new.new_line,
&.parallel .new.line_content,
&.new .old_line,
&.new .new_line,
&.new .line_content {
@include diff_background(92, 164, 169, #FAF3DD);
}
&.parallel .old.old_line,
&.parallel .old.line_content,
&.old .old_line,
&.old .new_line,
&.old .line_content {
@include diff_background(237, 106, 90, #FAF3DD);
}
}
}
app/assets/stylesheets/highlight/white.scss
View file @ 21facf53
/* https://github.com/aahan/pygments-github-style */
.code.white {
// Line numbers
.line-numbers, .diff-line-num {
background-color: $background-color;
}
background-color: #f8fafc !important;
color: #5b6169 !important;
pre.highlight,
.line-numbers,
.line-numbers a {
background-color: $background-color !important;
color: $gl-gray !important;
.diff-line-num, .diff-line-num a {
color: rgba(0, 0, 0, 0.3);
}
// Code itself
pre.code {
border-left: 1px solid $border-color;
background-color: #fff !important;
color: #333 !important;
}
&, pre.code, .line_holder .line_content {
background-color: #fff;
color: #333;
}
// Diff line
.line_holder {
.diff-line-num {
&.old {
background: #ffdddd;
border-color: #f1c0c0;
}
&.new {
background: #dbffdb;
border-color: #c1e9c1;
}
}
.line_content {
&.old {
background: #ffecec;
span.idiff {
background-color: #f8cbcb;
}
}
&.new {
background: #eaffea;
span.idiff {
background-color: #a6f3a6;
}
}
&.match {
color: rgba(0, 0, 0, 0.3);
background: #fafafa;
}
}
}
// highlight line via anchor
......
app/assets/stylesheets/pages/diff.scss
View file @ 21facf53
......@@ -32,16 +32,6 @@
background: #FFF;
color: #333;
.old {
span.idiff {
background-color: #f8cbcb;
}
}
.new {
span.idiff {
background-color: #a6f3a6;
}
}
.unfold {
cursor: pointer;
}
......@@ -76,7 +66,7 @@
}
tr.line_holder.parallel {
.old_line, .new_line, .diff_line {
.old_line, .new_line {
min-width: 50px;
}
......@@ -85,7 +75,7 @@
}
}
.old_line, .new_line, .diff_line {
.old_line, .new_line {
margin: 0px;
padding: 0px;
border: none;
......@@ -107,43 +97,12 @@
text-decoration: underline;
}
}
&.new {
background: #CFD;
}
&.old {
background: #FDD;
}
}
.diff_line {
padding: 0;
}
.line_holder {
&.old .old_line,
&.old .new_line {
background: #ffdddd;
border-color: #f1c0c0;
}
&.new .old_line,
&.new .new_line {
background: #dbffdb;
border-color: #c1e9c1;
}
}
.line_content {
display: block;
margin: 0px;
padding: 0px 0.5em;
border: none;
&.new {
background: #eaffea;
}
&.old {
background: #ffecec;
}
&.matched {
color: $border-color;
background: #fafafa;
}
&.parallel {
display: table-cell;
}
......@@ -400,7 +359,7 @@
/* RGBa with 0.3 opacity */
background: rgba($r, $g, $b, 0.3);
&.new_line, &.old_line {
&.diff-line-num {
border-right-color: $custom-border !important;
}
......
app/assets/stylesheets/pages/note_form.scss
View file @ 21facf53
......@@ -10,18 +10,6 @@
margin: 10px $gl-padding;
}
.diff-file .diff-content {
tr.line_holder:hover {
&> td.line_content {
background: $hover !important;
border-color: darken($hover, 10%) !important;
}
&> td.new_line,
&> td.old_line {
background: darken($hover, 4%) !important;
border-color: darken($hover, 10%) !important;
}
}
tr.line_holder:hover > td .line_note_link {
opacity: 1.0;
filter: alpha(opacity=100);
......
app/assets/stylesheets/pages/notes.scss
View file @ 21facf53
......@@ -242,11 +242,8 @@ ul.notes {
// "show" the icon also if we just hover somewhere over the line
&:hover > td {
background: $hover !important;
.add-diff-note {
@include show-add-diff-note;
}
}
}
app/views/projects/blame/show.html.haml
View file @ 21facf53
......@@ -12,7 +12,7 @@
%small= number_to_human_size @blob.size
.file-actions
= render "projects/blob/actions"
.file-content.blame.highlight
.file-content.blame.code.js-syntax-highlight
%table
- current_line = 1
- blame_highlighter = highlighter(@blob.name, @blob.data, nowrap: true)
......@@ -31,15 +31,14 @@
= commit_author_link(commit, avatar: false)
authored
#{time_ago_with_tooltip(commit.committed_date, skip_js: true)}
%td.lines.blame-numbers
%pre
%td.line-numbers
- line_count = blame_group[:lines].count
- (current_line...(current_line + line_count)).each do |i|
= i
%a.diff-line-num= i
\
- current_line += line_count
%td.lines
%pre{class: 'code highlight white'}
%pre{class: 'code highlight'}
%code
- blame_group[:lines].each do |line|
:preserve
......
app/views/projects/blob/diff.html.haml
View file @ 21facf53
......@@ -10,7 +10,8 @@
%tr.line_holder
%td.old_line.diff-line-num{data: {linenumber: line_old}}
= link_to raw(line_old), "#"
%td.new_line= link_to raw(line_new) , "#"
%td.new_line.diff-line-num
= link_to raw(line_new) , "#"
%td.line_content.noteable_line==#{' ' * @form.indent}#{line}
- if @form.unfold? && @form.bottom? && @form.to < @blob.loc
......
app/views/projects/blob/preview.html.haml
View file @ 21facf53
......@@ -14,12 +14,12 @@
- @diff_lines.each do |line|
%tr.line_holder{ class: "#{line.type}" }
- if line.type == "match"
%td.old_line= "..."
%td.new_line= "..."
%td.line_content.matched= line.text
%td.old_line.diff-line-num= "..."
%td.new_line.diff-line-num= "..."
%td.line_content.match= line.text
- else
%td.old_line
%td.new_line
%td.old_line.diff-line-num
%td.new_line.diff-line-num
%td.line_content{class: "#{line.type}"}= diff_line_content(line.text)
- else
.nothing-here-block No changes.
app/views/projects/diffs/_match_line.html.haml
View file @ 21facf53
......@@ -4,4 +4,4 @@
%td.new_line.diff-line-num{data: {linenumber: line_new},
class: [unfold_bottom_class(bottom), unfold_class(!new_file)]}
\...
%td.line_content.matched= line
%td.line_content.match= line
app/views/projects/diffs/_match_line_parallel.html.haml
View file @ 21facf53
%td.old_line
%td.line_content.parallel.matched= line
%td.new_line
%td.line_content.parallel.matched= line
%td.old_line.diff-line-num
%td.line_content.parallel.match= line
%td.new_line.diff-line-num
%td.line_content.parallel.match= line
app/views/projects/diffs/_parallel_view.html.haml
View file @ 21facf53
......@@ -9,12 +9,12 @@
= render "projects/diffs/match_line_parallel", { line: left[:text],
line_old: left[:number], line_new: right[:number] }
- elsif left[:type] == 'nonewline'
%td.old_line
%td.line_content.parallel.matched= left[:text]
%td.new_line
%td.line_content.parallel.matched= left[:text]
%td.old_line.diff-line-num
%td.line_content.parallel.match= left[:text]
%td.new_line.diff-line-num
%td.line_content.parallel.match= left[:text]
- else
%td.old_line{id: left[:line_code], class: "#{left[:type]}"}
%td.old_line.diff-line-num{id: left[:line_code], class: "#{left[:type]}"}
= link_to raw(left[:number]), "##{left[:line_code]}", id: left[:line_code]
- if @comments_allowed && can?(current_user, :create_note, @project)
= link_to_new_diff_note(left[:line_code], 'old')
......@@ -27,7 +27,7 @@
- new_line_class = nil
- new_line_code = left[:line_code]
%td.new_line{id: new_line_code, class: "#{new_line_class}", data: { linenumber: right[:number] }}
%td.new_line.diff-line-num{id: new_line_code, class: "#{new_line_class}", data: { linenumber: right[:number] }}
= link_to raw(right[:number]), "##{new_line_code}", id: new_line_code
- if @comments_allowed && can?(current_user, :create_note, @project)
= link_to_new_diff_note(right[:line_code], 'new')
......
app/views/projects/diffs/_text_file.html.haml
View file @ 21facf53
......@@ -18,13 +18,13 @@
- elsif type == 'nonewline'
%td.old_line.diff-line-num
%td.new_line.diff-line-num
%td.line_content.matched= line.text
%td.line_content.match= line.text
- else
%td.old_line
%td.old_line.diff-line-num{class: type}
= link_to raw(type == "new" ? "&nbsp;" : line_old), "##{line_code}", id: line_code
- if @comments_allowed && can?(current_user, :create_note, @project)
= link_to_new_diff_note(line_code)
%td.new_line{data: {linenumber: line.new_pos}}
%td.new_line.diff-line-num{class: type, data: {linenumber: line.new_pos}}
= link_to raw(type == "old" ? "&nbsp;" : line.new_pos), "##{line_code}", id: line_code
%td.line_content{class: "noteable_line #{type} #{line_code}", data: { line_code: line_code }}= diff_line_content(line.text)
......
app/views/projects/notes/discussions/_diff.html.haml
View file @ 21facf53
......@@ -16,13 +16,13 @@
- line_code = generate_line_code(note.file_path, line)
%tr.line_holder{ id: line_code, class: "#{type}" }
- if type == "match"
%td.old_line= "..."
%td.new_line= "..."
%td.line_content.matched= line.text
%td.old_line.diff-line-num= "..."
%td.new_line.diff-line-num= "..."
%td.line_content.match= line.text
- else
%td.old_line
%td.old_line.diff-line-num
= raw(type == "new" ? "&nbsp;" : line.old_pos)
%td.new_line
%td.new_line.diff-line-num
= raw(type == "old" ? "&nbsp;" : line.new_pos)
%td.line_content{class: "noteable_line #{type} #{line_code}", line_code: line_code}= diff_line_content(line.text)
......
app/views/search/results/_snippet_blob.html.haml
View file @ 21facf53
......@@ -22,22 +22,20 @@
.file-content.code
.nothing-here-block Empty file
- else
.file-content.code
%div.highlighted-data{ class: user_color_scheme }
.file-content.code.js-syntax-highlight
.line-numbers
- snippet_blob[:snippet_chunks].each do |snippet|
- unless snippet[:data].empty?
- snippet[:data].lines.to_a.size.times do |index|
- offset = defined?(snippet[:start_line]) ? snippet[:start_line] : 1
- i = index + offset
= link_to snippet_path+"#L#{i}", id: "L#{i}", rel: "#L#{i}" do
= link_to snippet_path+"#L#{i}", id: "L#{i}", rel: "#L#{i}", class: "diff-line-num" do
%i.fa.fa-link
= i
- unless snippet == snippet_blob[:snippet_chunks].last
%a
%a.diff-line-num
= "."
.highlight.term
%pre
%pre.code
%code
- snippet_blob[:snippet_chunks].each do |snippet|
- unless snippet[:data].empty?
......
app/views/shared/_file_highlight.html.haml
View file @ 21facf53
.file-content.code.js-syntax-highlight{ class: user_color_scheme }
.file-content.code.js-syntax-highlight
.line-numbers
- if blob.data.present?
- blob.data.lines.each_index do |index|
- offset = defined?(first_line_number) ? first_line_number : 1
- i = index + offset
-# We're not using `link_to` because it is too slow once we get to thousands of lines.
%a{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
%a.diff-line-num{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
%i.fa.fa-link
= i
.blob-content{data: {blob_id: blob.id}}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7