Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 11 deletions
Show Stats 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}} {{end}}
</div> </div>
</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="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}">
<div class="diff-side-by-side"> <div class="diff-side-by-side">
{{if .blobBase}} {{if .blobBase}}
@ -63,10 +63,8 @@
</div> </div>
<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{.file.Index}}"> <div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{.file.Index}}">
<div class="diff-overlay"> <div class="diff-overlay">
<div class="overlay-frame">
<div class="ui centered">
<input type="range" min="0" max="100" value="50"> <input type="range" min="0" max="100" value="50">
</div> <div class="overlay-frame">
<span class="before-container"><img class="image-before"></span> <span class="before-container"><img class="image-before"></span>
<span class="after-container"><img class="image-after"></span> <span class="after-container"><img class="image-after"></span>
</div> </div>
@ -74,7 +72,6 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="ui active centered inline loader gt-mb-4"></div>
</div> </div>
</td> </td>
</tr> </tr>

13
web_src/css/features/imagediff.css
View File

@ -1,6 +1,14 @@
.image-diff-tabs {
min-height: 60px;
}
.image-diff-tabs.is-loading .tab {
display: none;
}
.image-diff-container { .image-diff-container {
text-align: center; text-align: center;
padding: 1em 0; padding: 0.5em 0 1em;
} }
.image-diff-container img { .image-diff-container img {
@ -31,6 +39,7 @@
.image-diff-container .diff-swipe { .image-diff-container .diff-swipe {
margin: auto; margin: auto;
padding: 1em 0;
} }
.image-diff-container .diff-swipe .swipe-frame { .image-diff-container .diff-swipe .swipe-frame {
@ -89,7 +98,7 @@
} }
.image-diff-container .diff-overlay .overlay-frame { .image-diff-container .diff-overlay .overlay-frame {
margin: 0 auto; margin: 1em auto 0;
position: relative; position: relative;
} }

7
web_src/js/features/imagediff.js
View File

@ -130,8 +130,7 @@ export function initImageDiff() {
initOverlay(createContext($imageAfter[2], $imageBefore[2])); initOverlay(createContext($imageAfter[2], $imageBefore[2]));
} }
$container.find('> .gt-hidden').removeClass('gt-hidden'); $container.find('> .image-diff-tabs').removeClass('is-loading');
hideElem($container.find('.ui.loader'));
} }
function initSideBySide(sizes) { function initSideBySide(sizes) {
@ -205,7 +204,7 @@ export function initImageDiff() {
}); });
$container.find('.diff-swipe').css({ $container.find('.diff-swipe').css({
width: sizes.max.width * factor + 2, width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 4 height: sizes.max.height * factor + 30 /* extra height for inner "position: absolute" elements */,
}); });
$container.find('.swipe-bar').on('mousedown', function(e) { $container.find('.swipe-bar').on('mousedown', function(e) {
e.preventDefault(); e.preventDefault();
@ -261,7 +260,7 @@ export function initImageDiff() {
// the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future // the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
sizes.image2.parent().parent().css({ sizes.image2.parent().parent().css({
width: sizes.max.width * factor + 2, width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 2 + 20 /* extra height for inner "position: absolute" elements */, height: sizes.max.height * factor + 2,
}); });
const $range = $container.find("input[type='range']"); const $range = $container.find("input[type='range']");