Skip to content

Commit 904a26c

Browse files
KN4CK3RKN4CK3R
authored
Add Image Diff options in Pull Request Diff view (#14450)
Implemented GitHub style image diff
1 parent 42118c6 commit 904a26c

File tree

6 files changed

+421
-74
lines changed

6 files changed

+421
-74
lines changed

‎options/locale/locale_en-US.ini

+3
Original file line numberDiff line numberDiff line change
@@ -1854,6 +1854,9 @@ diff.review.approve = Approve
18541854
diff.review.reject = Request changes
18551855
diff.committed_by = committed by
18561856
diff.protected = Protected
1857+
diff.image.side_by_side = Side by Side
1858+
diff.image.swipe = Swipe
1859+
diff.image.overlay = Overlay
18571860

18581861
releases.desc = Track project versions and downloads.
18591862
release.releases = Releases

‎templates/repo/diff/image_diff.tmpl

+104-74
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,109 @@
11
{{ $imagePathOld := printf "%s/%s" .root.BeforeRawPath (EscapePound .file.OldName) }}
22
{{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }}
3-
4-
<tr>
5-
<th class="halfwidth center pl-3 pr-2">
6-
{{.root.i18n.Tr "repo.diff.file_before"}}
7-
</th>
8-
<th class="halfwidth center pl-2 pr-3">
9-
{{.root.i18n.Tr "repo.diff.file_after"}}
10-
</th>
11-
</tr>
12-
<tr>
13-
<td class="halfwidth center pl-3 pr-2">
14-
{{if or .file.IsDeleted (not .file.IsCreated)}}
15-
<a href="{{$imagePathOld}}" target="_blank">
16-
<img src="{{$imagePathOld}}" class="border red" />
17-
</a>
18-
{{end}}
19-
</td>
20-
<td class="halfwidth center pl-2 pr-3">
21-
{{if or .file.IsCreated (not .file.IsDeleted)}}
22-
<a href="{{$imagePathNew}}" target="_blank">
23-
<img src="{{$imagePathNew}}" class="border green" />
24-
</a>
25-
{{end}}
26-
</td>
27-
</tr>
283
{{ $imageInfoBase := (call .root.ImageInfoBase .file.OldName) }}
294
{{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
30-
{{if or $imageInfoBase $imageInfoHead }}
5+
{{if or $imageInfoBase $imageInfoHead}}
316
<tr>
32-
<td class="halfwidth center pl-3 pr-2">
33-
{{if $imageInfoBase }}
34-
{{ $classWidth := "" }}
35-
{{ $classHeight := "" }}
36-
{{ $classByteSize := "" }}
37-
{{if $imageInfoHead}}
38-
{{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}
39-
{{ $classWidth = "red" }}
40-
{{end}}
41-
{{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}
42-
{{ $classHeight = "red" }}
43-
{{end}}
44-
{{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}
45-
{{ $classByteSize = "red" }}
46-
{{end}}
47-
{{end}}
48-
{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{$classWidth}}">{{$imageInfoBase.Width}}</span>
49-
&nbsp;|&nbsp;
50-
{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{$classHeight}}">{{$imageInfoBase.Height}}</span>
51-
&nbsp;|&nbsp;
52-
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
53-
{{end}}
54-
</td>
55-
<td class="halfwidth center pl-2 pr-3">
56-
{{if $imageInfoHead }}
57-
{{ $classWidth := "" }}
58-
{{ $classHeight := "" }}
59-
{{ $classByteSize := "" }}
60-
{{if $imageInfoBase}}
61-
{{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}
62-
{{ $classWidth = "green" }}
63-
{{end}}
64-
{{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}
65-
{{ $classHeight = "green" }}
66-
{{end}}
67-
{{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}
68-
{{ $classByteSize = "green" }}
69-
{{end}}
70-
{{end}}
71-
{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{$classWidth}}">{{$imageInfoHead.Width}}</span>
72-
&nbsp;|&nbsp;
73-
{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{$classHeight}}">{{$imageInfoHead.Height}}</span>
74-
&nbsp;|&nbsp;
75-
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoHead.ByteSize}}</span>
76-
{{end}}
77-
</td>
78-
</tr>
79-
{{end}}
7+
<td colspan="2">
8+
<div class="image-diff" data-path-before="{{$imagePathOld}}" data-path-after="{{$imagePathNew}}">
9+
<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu">
10+
<div class="new-menu-inner">
11+
<a class="item active" data-tab="diff-side-by-side">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
12+
{{if and $imageInfoBase $imageInfoHead}}
13+
<a class="item" data-tab="diff-swipe">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
14+
<a class="item" data-tab="diff-overlay">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
15+
{{end}}
16+
</div>
17+
</div>
18+
<div class="hide">
19+
<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side">
20+
<div class="diff-side-by-side">
21+
{{if $imageInfoBase }}
22+
<span class="side">
23+
<p class="side-header">{{.root.i18n.Tr "repo.diff.file_before"}}</p>
24+
<span class="before-container"><img class="image-before" /></span>
25+
<p>
26+
{{ $classWidth := "" }}
27+
{{ $classHeight := "" }}
28+
{{ $classByteSize := "" }}
29+
{{if $imageInfoHead}}
30+
{{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}
31+
{{ $classWidth = "red" }}
32+
{{end}}
33+
{{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}
34+
{{ $classHeight = "red" }}
35+
{{end}}
36+
{{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}
37+
{{ $classByteSize = "red" }}
38+
{{end}}
39+
{{end}}
40+
{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{$classWidth}}">{{$imageInfoBase.Width}}</span>
41+
&nbsp;|&nbsp;
42+
{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{$classHeight}}">{{$imageInfoBase.Height}}</span>
43+
&nbsp;|&nbsp;
44+
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
45+
</p>
46+
</span>
47+
{{end}}
48+
{{if $imageInfoHead }}
49+
<span class="side">
50+
<p class="side-header">{{.root.i18n.Tr "repo.diff.file_after"}}</p>
51+
<span class="after-container"><img class="image-after" /></span>
52+
<p>
53+
{{ $classWidth := "" }}
54+
{{ $classHeight := "" }}
55+
{{ $classByteSize := "" }}
56+
{{if $imageInfoBase}}
57+
{{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}
58+
{{ $classWidth = "green" }}
59+
{{end}}
60+
{{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}
61+
{{ $classHeight = "green" }}
62+
{{end}}
63+
{{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}
64+
{{ $classByteSize = "green" }}
65+
{{end}}
66+
{{end}}
67+
{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{$classWidth}}">{{$imageInfoHead.Width}}</span>
68+
&nbsp;|&nbsp;
69+
{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{$classHeight}}">{{$imageInfoHead.Height}}</span>
70+
&nbsp;|&nbsp;
71+
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoHead.ByteSize}}</span>
72+
</p>
73+
</span>
74+
{{end}}
75+
</div>
76+
</div>
77+
{{if and $imageInfoBase $imageInfoHead}}
78+
<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe">
79+
<div class="diff-swipe">
80+
<div class="swipe-frame">
81+
<span class="before-container"><img class="image-before" /></span>
82+
<span class="swipe-container">
83+
<span class="after-container"><img class="image-after" /></span>
84+
</span>
85+
<span class="swipe-bar">
86+
<span class="handle top-handle"></span>
87+
<span class="handle bottom-handle"></span>
88+
</span>
89+
</div>
90+
</div>
91+
</div>
92+
<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay">
93+
<div class="diff-overlay">
94+
<div class="overlay-frame">
95+
<div class="ui centered">
96+
<input type="range" min="0" max="100" value="50" />
97+
</div>
98+
<span class="before-container"><img class="image-before"/></span>
99+
<span class="after-container"><img class="image-after" /></span>
100+
</div>
101+
</div>
102+
</div>
103+
{{end}}
104+
</div>
105+
<div class="ui active centered inline loader"></div>
106+
</div>
107+
</td>
108+
</tr>
109+
{{end}}

0 commit comments

Comments
 (0)