git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix various ImageDiff/SVG bugs (#23312)

Browse source 
Replace #23310, Close #19733

And fix various UI problems, including regressions from #22959 #22950
and more.

## SVG Detection

The old regexp may mismatch non-SVG files. This PR adds new tests for
those cases.

## UI Changes

### Before

![image](https://user-images.githubusercontent.com/2114189/222967716-f6ad8721-f46a-4a3f-9eb0-a89e488d3436.png)

![image](https://user-images.githubusercontent.com/2114189/222967780-8af8981a-e69d-4304-9dc4-0235582fa4f4.png)

### After

![image](https://user-images.githubusercontent.com/2114189/222967575-c21c23d4-0200-4e09-aac3-57895e853000.png)

![image](https://user-images.githubusercontent.com/2114189/222967585-8b8da262-bc96-441a-9851-8d3845f2659d.png)

![image](https://user-images.githubusercontent.com/2114189/222967595-58d9bea5-6df4-41fa-bf8a-86704117959d.png)

![image](https://user-images.githubusercontent.com/2114189/222967608-38757c1a-b8bd-4ebf-b7a8-3b30edb7f303.png)

![image](https://user-images.githubusercontent.com/2114189/222967623-9849a339-6fae-4484-8fa5-939e2fdacbf5.png)

![image](https://user-images.githubusercontent.com/2114189/222967633-4383d7dd-62ba-47a3-8c10-86f7ca7757ae.png)

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
wxiaoguang 2023-03-07 20:11:24 +08:00 • committed by GitHub
parent c84238800b
commit 4c59c8c768
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web_src/js/features/imagediff.js
View file

@ -129,8 +129,8 @@ export function initImageDiff() {
initOverlay(createContext($imageAfter[2], $imageBefore[2]));
}
hideElem($container.find('> .loader'));
$container.find('> .gt-hidden').removeClass('gt-hidden');
hideElem($container.find('.ui.loader'));
}
function initSideBySide(sizes) {
@ -155,7 +155,7 @@ export function initImageDiff() {
height: sizes.size1.height * factor
});
sizes.image1.parent().css({
margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`,
margin: `10px auto`,
width: sizes.size1.width * factor + 2,
height: sizes.size1.height * factor + 2
});
@ -164,7 +164,7 @@ export function initImageDiff() {
height: sizes.size2.height * factor
});
sizes.image2.parent().css({
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
margin: `10px auto`,
width: sizes.size2.width * factor + 2,
height: sizes.size2.height * factor + 2
});
@ -255,13 +255,12 @@ export function initImageDiff() {
width: sizes.size2.width * factor + 2,
height: sizes.size2.height * factor + 2
});
// some inner elements are `position: absolute`, so the container's height must be large enough
// 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
});
$container.find('.onion-skin').css({
width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 4
height: sizes.max.height * factor + 2 + 20 /* extra height for inner "position: absolute" elements */,
});
const $range = $container.find("input[type='range']");