From a5e07da8bedf5da47a4fec3dda6eaf2e54d69921 Mon Sep 17 00:00:00 2001
From: Manuel Kuhlmann <mkuhlmann@users.noreply.github.com>
Date: Thu, 5 Jan 2017 02:07:43 +0100
Subject: [PATCH] Fix diff split view coloring (#553) (#584)
Signed-off-by: Manuel Kuhlmann <manuel@mkuhlmann.org>
---
public/css/index.css | 38 ++++++++++++++-------------
public/less/_repository.less | 50 +++++++++++++++++-------------------
templates/repo/diff/box.tmpl | 9 ++++---
3 files changed, 50 insertions(+), 47 deletions(-)
diff --git a/public/css/index.css b/public/css/index.css
index d64c71ca2a..cbf0280fce 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1982,32 +1982,34 @@ footer .ui.language .menu {
border-right: 1px solid #d4d4d5;
padding: 0 5px;
}
-.repository .diff-file-box .code-diff tbody tr.tag-code td,
-.repository .diff-file-box .code-diff tbody tr.tag-code pre {
- background-color: #F0F0F0 !important;
- border-color: #D2CECE!important;
- padding-top: 4px;
- padding-bottom: 4px;
-}
-.repository .diff-file-box .code-diff tbody tr.tag-code td.halfwidth {
+.repository .diff-file-box .code-diff tbody tr td.halfwidth {
width: 50%;
}
-.repository .diff-file-box .code-diff tbody tr.del-code td,
-.repository .diff-file-box .code-diff tbody tr.del-code pre {
+.repository .diff-file-box .code-diff tbody tr.tag-code td,
+.repository .diff-file-box .code-diff tbody tr td.tag-code {
+ background-color: #F0F0F0 !important;
+ border-color: #D2CECE !important;
+ padding-top: 8px;
+ padding-bottom: 8px;
+}
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(1),
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(2),
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(3),
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(4) {
+ background-color: #fafafa;
+}
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(1),
+.repository .diff-file-box .code-diff tbody tr.del-code td:nth-child(2),
+.repository .diff-file-box .code-diff tbody tr td.del-code {
background-color: #ffe0e0 !important;
border-color: #f1c0c0 !important;
}
-.repository .diff-file-box .code-diff tbody tr.del-code td.halfwidth {
- width: 50%;
-}
-.repository .diff-file-box .code-diff tbody tr.add-code td,
-.repository .diff-file-box .code-diff tbody tr.add-code pre {
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(3),
+.repository .diff-file-box .code-diff tbody tr.add-code td:nth-child(4),
+.repository .diff-file-box .code-diff tbody tr td.add-code {
background-color: #d6fcd6 !important;
border-color: #c1e9c1 !important;
}
-.repository .diff-file-box .code-diff tbody tr.add-code td.halfwidth {
- width: 50%;
-}
.repository .diff-file-box .code-diff tbody tr .removed-code {
background-color: #ff9999;
}
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 259aa26399..6a779a0867 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -902,44 +902,42 @@
}
tbody {
tr {
+ td.halfwidth {
+ width: 50%;
+ }
- &.tag-code {
- td, pre {
- background-color: #F0F0F0 !important;
- border-color: #D2CECE!important;
- padding-top: 4px;
- padding-bottom: 4px;
- }
- td.halfwidth {
- width: 50%;
- }
+ &.tag-code td, td.tag-code {
+ background-color: #F0F0F0 !important;
+ border-color: #D2CECE !important;
+ padding-top: 8px;
+ padding-bottom: 8px;
// td.selected-line, td.selected-line pre {
// background-color: #ffffdd !important;
// }
}
+
// &.same-code {
// td.selected-line, td.selected-line pre {
// background-color: #ffffdd !important;
// }
// }
- &.del-code {
- td, pre {
- background-color: #ffe0e0 !important;
- border-color: #f1c0c0 !important;
- }
- td.halfwidth {
- width: 50%;
- }
+ // light gray for empty lines before / after commit
+ &.add-code td:nth-child(1), &.add-code td:nth-child(2),
+ &.del-code td:nth-child(3), &.del-code td:nth-child(4) {
+ background-color: #fafafa;
}
- &.add-code {
- td, pre {
- background-color: #d6fcd6 !important;
- border-color: #c1e9c1 !important;
- }
- td.halfwidth {
- width: 50%;
- }
+
+ &.del-code td:nth-child(1), &.del-code td:nth-child(2),
+ td.del-code {
+ background-color: #ffe0e0 !important;
+ border-color: #f1c0c0 !important;
+ }
+
+ &.add-code td:nth-child(3), &.add-code td:nth-child(4),
+ td.add-code{
+ background-color: #d6fcd6 !important;
+ border-color: #c1e9c1 !important;
}
.removed-code {
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 8ee4a001ce..9445e7846c 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -133,16 +133,19 @@
{{if .IsSplitStyle}}
<script>
(function() {
- $('.add-code').each(function() {
+ $('tr.add-code').each(function() {
var prev = $(this).prev();
if(prev.is('.del-code') && prev.children().eq(3).text().trim() === '') {
while(prev.prev().is('.del-code') && prev.prev().children().eq(3).text().trim() === '') {
prev = prev.prev();
}
- prev.children().eq(3).html($(this).children().eq(3).html());
prev.children().eq(2).html($(this).children().eq(2).html());
- prev.children().eq(3).addClass('add-code');
+ prev.children().eq(3).html($(this).children().eq(3).html());
+
+ prev.children().eq(0).addClass('del-code');
+ prev.children().eq(1).addClass('del-code');
prev.children().eq(2).addClass('add-code');
+ prev.children().eq(3).addClass('add-code');
$(this).remove();
}
});