67561e79f1
* Remove swipe-bar z-index Fixes position of swipe-bar so it does not overlay other UI components when scrolling. Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com> * Unique names for image tabs in pull request Define unique names for image tabs in pull requests, in order to toggle tabs correctly when multiple are displayed on one page. Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com> Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
83 lines
3.5 KiB
Handlebars
83 lines
3.5 KiB
Handlebars
{{ $imagePathOld := printf "%s/%s" .root.BeforeRawPath (EscapePound .file.OldName) }}
|
|
{{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }}
|
|
{{if or .blobBase .blobHead}}
|
|
<tr>
|
|
<td colspan="2">
|
|
<div class="image-diff" data-path-before="{{$imagePathOld}}" data-path-after="{{$imagePathNew}}">
|
|
<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu">
|
|
<div class="new-menu-inner">
|
|
<a class="item active" data-tab="diff-side-by-side-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
|
|
{{if and .blobBase .blobHead}}
|
|
<a class="item" data-tab="diff-swipe-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
|
|
<a class="item" data-tab="diff-overlay-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div class="hide">
|
|
<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{ .file.Index }}">
|
|
<div class="diff-side-by-side">
|
|
{{if .blobBase }}
|
|
<span class="side">
|
|
<p class="side-header">{{.root.i18n.Tr "repo.diff.file_before"}}</p>
|
|
<span class="before-container"><img class="image-before" /></span>
|
|
<p>
|
|
<span class="bounds-info-before">
|
|
{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
|
|
|
|
|
{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text bounds-info-height"></span>
|
|
|
|
|
</span>
|
|
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text">{{FileSize .blobBase.Size}}</span>
|
|
</p>
|
|
</span>
|
|
{{end}}
|
|
{{if .blobHead }}
|
|
<span class="side">
|
|
<p class="side-header">{{.root.i18n.Tr "repo.diff.file_after"}}</p>
|
|
<span class="after-container"><img class="image-after" /></span>
|
|
<p>
|
|
<span class="bounds-info-after">
|
|
{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
|
|
|
|
|
{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text bounds-info-height"></span>
|
|
|
|
|
</span>
|
|
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text">{{FileSize .blobHead.Size}}</span>
|
|
</p>
|
|
</span>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{if and .blobBase .blobHead}}
|
|
<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe-{{ .file.Index }}">
|
|
<div class="diff-swipe">
|
|
<div class="swipe-frame">
|
|
<span class="before-container"><img class="image-before" /></span>
|
|
<span class="swipe-container">
|
|
<span class="after-container"><img class="image-after" /></span>
|
|
</span>
|
|
<span class="swipe-bar">
|
|
<span class="handle top-handle"></span>
|
|
<span class="handle bottom-handle"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{ .file.Index }}">
|
|
<div class="diff-overlay">
|
|
<div class="overlay-frame">
|
|
<div class="ui centered">
|
|
<input type="range" min="0" max="100" value="50" />
|
|
</div>
|
|
<span class="before-container"><img class="image-before"/></span>
|
|
<span class="after-container"><img class="image-after" /></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<div class="ui active centered inline loader mb-4"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|