tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-11-04 05:18:25 +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
web_src/js/features/imagediff.js
View File

@@ -130,8 +130,7 @@ export function initImageDiff() {
initOverlay(createContext($imageAfter[2], $imageBefore[2]));
}
$container.find('> .gt-hidden').removeClass('gt-hidden');
hideElem($container.find('.ui.loader'));
$container.find('> .image-diff-tabs').removeClass('is-loading');
}
function initSideBySide(sizes) {
@@ -205,7 +204,7 @@ export function initImageDiff() {
});
$container.find('.diff-swipe').css({
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) {
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
sizes.image2.parent().parent().css({
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']");