From 5908bb103003912bd0ba3cefa66f2ff815ee8d8e Mon Sep 17 00:00:00 2001 From: zeripath Date: Mon, 24 Jun 2019 21:23:52 +0100 Subject: [PATCH] Make diff line-marker non-selectable (#7279) * Make diff line-marker non-selectable * Move to use data-* as per @mrsdizzie * fix missing line nums * Add a minimum-width to force right-align of the line num * Move line-type-marker into separate column --- models/git_diff.go | 29 +++++++++++++----------- models/git_diff_test.go | 4 ++-- public/css/index.css | 13 +++++++---- public/less/_repository.less | 27 +++++++++++++++++++--- templates/repo/diff/box.tmpl | 17 ++++++++++---- templates/repo/diff/section_unified.tmpl | 12 ++++++---- 6 files changed, 70 insertions(+), 32 deletions(-) diff --git a/models/git_diff.go b/models/git_diff.go index a6ea7306d..29c424c11 100644 --- a/models/git_diff.go +++ b/models/git_diff.go @@ -80,6 +80,14 @@ func (d *DiffLine) GetCommentSide() string { return d.Comments[0].DiffSide() } +// GetLineTypeMarker returns the line type marker +func (d *DiffLine) GetLineTypeMarker() string { + if strings.IndexByte(" +-", d.Content[0]) > -1 { + return d.Content[0:1] + } + return "" +} + // DiffSection represents a section of a DiffFile. type DiffSection struct { Name string @@ -87,22 +95,14 @@ type DiffSection struct { } var ( - addedCodePrefix = []byte("") - removedCodePrefix = []byte("") - codeTagSuffix = []byte("") + addedCodePrefix = []byte(``) + removedCodePrefix = []byte(``) + codeTagSuffix = []byte(``) ) func diffToHTML(diffs []diffmatchpatch.Diff, lineType DiffLineType) template.HTML { buf := bytes.NewBuffer(nil) - // Reproduce signs which are cut for inline diff before. - switch lineType { - case DiffLineAdd: - buf.WriteByte('+') - case DiffLineDel: - buf.WriteByte('-') - } - for i := range diffs { switch { case diffs[i].Type == diffmatchpatch.DiffInsert && lineType == DiffLineAdd: @@ -186,18 +186,21 @@ func (diffSection *DiffSection) GetComputedInlineDiffFor(diffLine *DiffLine) tem case DiffLineAdd: compareDiffLine = diffSection.GetLine(DiffLineDel, diffLine.RightIdx) if compareDiffLine == nil { - return template.HTML(html.EscapeString(diffLine.Content)) + return template.HTML(html.EscapeString(diffLine.Content[1:])) } diff1 = compareDiffLine.Content diff2 = diffLine.Content case DiffLineDel: compareDiffLine = diffSection.GetLine(DiffLineAdd, diffLine.LeftIdx) if compareDiffLine == nil { - return template.HTML(html.EscapeString(diffLine.Content)) + return template.HTML(html.EscapeString(diffLine.Content[1:])) } diff1 = diffLine.Content diff2 = compareDiffLine.Content default: + if strings.IndexByte(" +-", diffLine.Content[0]) > -1 { + return template.HTML(html.EscapeString(diffLine.Content[1:])) + } return template.HTML(html.EscapeString(diffLine.Content)) } diff --git a/models/git_diff_test.go b/models/git_diff_test.go index deca7c8d4..bf52095ac 100644 --- a/models/git_diff_test.go +++ b/models/git_diff_test.go @@ -18,14 +18,14 @@ func assertEqual(t *testing.T, s1 string, s2 template.HTML) { } func TestDiffToHTML(t *testing.T) { - assertEqual(t, "+foo bar biz", diffToHTML([]dmp.Diff{ + assertEqual(t, "foo bar biz", diffToHTML([]dmp.Diff{ {Type: dmp.DiffEqual, Text: "foo "}, {Type: dmp.DiffInsert, Text: "bar"}, {Type: dmp.DiffDelete, Text: " baz"}, {Type: dmp.DiffEqual, Text: " biz"}, }, DiffLineAdd)) - assertEqual(t, "-foo bar biz", diffToHTML([]dmp.Diff{ + assertEqual(t, "foo bar biz", diffToHTML([]dmp.Diff{ {Type: dmp.DiffEqual, Text: "foo "}, {Type: dmp.DiffDelete, Text: "bar"}, {Type: dmp.DiffInsert, Text: " baz"}, diff --git a/public/css/index.css b/public/css/index.css index 24a5d7865..475a54f75 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -633,7 +633,7 @@ footer .ui.left,footer .ui.right{line-height:40px} .repository .diff-box .header .file{flex:1;color:#888;word-break:break-all} .repository .diff-box .header .button{margin:-5px 0 -5px 12px;padding:8px 10px;flex:0 0 auto} .repository .diff-file-box .header{background-color:#f7f7f7} -.repository .diff-file-box .file-body.file-code .lines-num{text-align:right;color:#a6a6a6;background:#fafafa;width:1%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top} +.repository .diff-file-box .file-body.file-code .lines-num{text-align:right;color:#a6a6a6;background:#fafafa;width:1%;min-width:50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top} .repository .diff-file-box .file-body.file-code .lines-num span.fold{display:block;text-align:center} .repository .diff-file-box .file-body.file-code .lines-num-old{border-right:1px solid #ddd} .repository .diff-file-box .code-diff{font-size:12px} @@ -644,13 +644,16 @@ footer .ui.left,footer .ui.right{line-height:40px} .repository .diff-file-box .code-diff tbody tr td.tag-code,.repository .diff-file-box .code-diff tbody tr.tag-code td{background-color:#f0f0f0!important;border-color:#d3cfcf!important;padding-top:8px;padding-bottom:8px} .repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#f99} .repository .diff-file-box .code-diff tbody tr .added-code{background-color:#9f9} +.repository .diff-file-box .code-diff tbody tr .lines-num[data-line-num]::before{content:attr(data-line-num);text-align:right} +.repository .diff-file-box .code-diff tbody tr .lines-type-marker{width:10px;min-width:10px} +.repository .diff-file-box .code-diff tbody tr .line-type-marker[data-type-marker]::before{content:attr(data-type-marker);text-align:right;display:inline-block} .repository .diff-file-box .code-diff-unified tbody tr.del-code td{background-color:#ffe0e0!important;border-color:#f1c0c0!important} .repository .diff-file-box .code-diff-unified tbody tr.add-code td{background-color:#d6fcd6!important;border-color:#c1e9c1!important} .repository .diff-file-box .code-diff-split table,.repository .diff-file-box .code-diff-split tbody{width:100%} -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4){background-color:#fafafa} -.repository .diff-file-box .code-diff-split tbody tr td.del-code,.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2){background-color:#ffe0e0!important;border-color:#f1c0c0!important} -.repository .diff-file-box .code-diff-split tbody tr td.add-code,.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4){background-color:#d6fcd6!important;border-color:#c1e9c1!important} -.repository .diff-file-box .code-diff-split tbody tr td:nth-child(3){border-left-width:1px;border-left-style:solid} +.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(5),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(6){background-color:#fafafa} +.repository .diff-file-box .code-diff-split tbody tr td.del-code,.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3){background-color:#ffe0e0!important;border-color:#f1c0c0!important} +.repository .diff-file-box .code-diff-split tbody tr td.add-code,.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(5),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(6){background-color:#d6fcd6!important;border-color:#c1e9c1!important} +.repository .diff-file-box .code-diff-split tbody tr td:nth-child(4){border-left-width:1px;border-left-style:solid} .repository .diff-file-box.file-content{clear:right} .repository .diff-file-box.file-content img{max-width:100%;padding:5px 5px 0 5px} .repository .code-view{overflow:auto;overflow-x:auto;overflow-y:hidden} diff --git a/public/less/_repository.less b/public/less/_repository.less index acf8d7b87..8d38faf50 100644 --- a/public/less/_repository.less +++ b/public/less/_repository.less @@ -1339,6 +1339,7 @@ color: #a6a6a6; background: #fafafa; width: 1%; + min-width: 50px; user-select: none; vertical-align: top; @@ -1403,6 +1404,22 @@ .added-code { background-color: #99ff99; } + + .lines-num[data-line-num]::before { + content: attr(data-line-num); + text-align: right; + } + + .lines-type-marker { + width: 10px; + min-width: 10px; + } + + .line-type-marker[data-type-marker]::before { + content: attr(data-type-marker); + text-align: right; + display: inline-block; + } } } } @@ -1432,25 +1449,29 @@ &.add-code td:nth-child(1), &.add-code td:nth-child(2), &.del-code td:nth-child(3), - &.del-code td:nth-child(4) { + &.del-code td:nth-child(4), + &.del-code td:nth-child(5), + &.del-code td:nth-child(6) { background-color: #fafafa; } &.del-code td:nth-child(1), &.del-code td:nth-child(2), + &.del-code td:nth-child(3), td.del-code { background-color: #ffe0e0 !important; border-color: #f1c0c0 !important; } - &.add-code td:nth-child(3), &.add-code td:nth-child(4), + &.add-code td:nth-child(5), + &.add-code td:nth-child(6), td.add-code { background-color: #d6fcd6 !important; border-color: #c1e9c1 !important; } - td:nth-child(3) { + td:nth-child(4) { border-left-width: 1px; border-left-style: solid; } diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 2bdf9e588..94ac094fa 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -120,8 +120,11 @@ {{range $j, $section := $file.Sections}} {{range $k, $line := $section.Lines}} - - {{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}} + + + + + 
{{if $line.LeftIdx}}{{end}}
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}} @@ -129,10 +132,12 @@ {{end}} 
{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}
- - {{if $line.RightIdx}}{{$line.RightIdx}}{{end}} + + + + + 
{{if $line.RightIdx}}{{end}}
- {{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}} + @@ -143,6 +148,7 @@ {{if gt (len $line.Comments) 0}} + {{if eq $line.GetCommentSide "previous"}}
@@ -156,6 +162,7 @@ {{end}} + {{if eq $line.GetCommentSide "proposed"}}
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl index 53ccaedbc..5706e4cde 100644 --- a/templates/repo/diff/section_unified.tmpl +++ b/templates/repo/diff/section_unified.tmpl @@ -8,13 +8,16 @@ {{/* {{if gt $j 0}}{{end}} */}} {{else}} - - {{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}} + + - - {{if $line.RightIdx}}{{$line.RightIdx}}{{end}} + + {{end}} + +
+ {{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}} + @@ -25,6 +28,7 @@ {{if gt (len $line.Comments) 0}} +