tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-03 09:07:19 +00:00
Code Releases Activity

Improve Image Diff UI (#26696)

Browse Source 
1. Use `is-loading` instead of `ui loader`
2. Introduce class name `image-diff-tabs`, instead of searching `gt-hidden`, which is fragile
3. Align the UI elements, see the screenshots.
This commit is contained in:
wxiaoguang
2023-08-24 20:13:23 +08:00
committed by GitHub
parent 4de2244697
commit 09faf43ef8
3 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
templates/repo/diff/image_diff.tmpl
View File

@ -11,7 +11,7 @@
{{end}}
</div>
</div>
<div class="gt-hidden">
<div class="image-diff-tabs is-loading">
<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}}
@ -63,10 +63,8 @@
</div>
<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{.file.Index}}">
<div class="diff-overlay">
<input type="range" min="0" max="100" value="50">
<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>
@ -74,7 +72,6 @@
</div>
{{end}}
</div>
<div class="ui active centered inline loader gt-mb-4"></div>
</div>
</td>
</tr>