Improve Image Diff UI (#26696)
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:
parent
4de2244697
commit
09faf43ef8
3 changed files with 16 additions and 11 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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']");
|
||||||
|
|
Loading…
Reference in a new issue