yel/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-12-14 21:15:18 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix SVG size calulation, only use style attribute (#36133) (#36134)
Some checks are pending
release-nightly / nightly-binary (push) Waiting to run
Details
release-nightly / nightly-docker-rootful (push) Waiting to run
Details
release-nightly / nightly-docker-rootless (push) Waiting to run
Details

Browse Source 
Backport of https://github.com/go-gitea/gitea/pull/36133, only the
bugfix part.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2025-12-12 08:40:27 +01:00 committed by GitHub
parent 3d66e75a47
commit 8d6442a43e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/css/base.css
View File

@ -39,6 +39,8 @@
--gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */ --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
--gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */ --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
--background-view-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
} }
@media (min-width: 768px) and (max-width: 1200px) { @media (min-width: 768px) and (max-width: 1200px) {

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

@ -13,7 +13,7 @@
.image-diff-container img { .image-diff-container img {
border: 1px solid var(--color-primary-light-7); border: 1px solid var(--color-primary-light-7);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7); background: var(--background-view-image);
} }
.image-diff-container .before-container { .image-diff-container .before-container {

1
web_src/css/repo/file-view.css
View File

@ -81,6 +81,7 @@
.view-raw img[src$=".svg" i] { .view-raw img[src$=".svg" i] {
max-height: 600px !important; max-height: 600px !important;
max-width: 600px !important; max-width: 600px !important;
background: var(--background-view-image);
} }
.file-view-render-container { .file-view-render-container {

24
web_src/js/features/imagediff.ts
View File

@ -38,14 +38,14 @@ function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
return null; return null;
} }
function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement) { function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement, svgBoundsInfo: any) {
const sizeAfter = { const sizeAfter = {
width: imageAfter?.width || 0, width: svgBoundsInfo.after?.width || imageAfter?.width || 0,
height: imageAfter?.height || 0, height: svgBoundsInfo.after?.height || imageAfter?.height || 0,
}; };
const sizeBefore = { const sizeBefore = {
width: imageBefore?.width || 0, width: svgBoundsInfo.before?.width || imageBefore?.width || 0,
height: imageBefore?.height || 0, height: svgBoundsInfo.before?.height || imageBefore?.height || 0,
}; };
const maxSize = { const maxSize = {
width: Math.max(sizeBefore.width, sizeAfter.width), width: Math.max(sizeBefore.width, sizeAfter.width),
@ -92,7 +92,8 @@ class ImageDiff {
boundsInfo: containerEl.querySelector('.bounds-info-before'), boundsInfo: containerEl.querySelector('.bounds-info-before'),
}]; }];
await Promise.all(imageInfos.map(async (info) => { const svgBoundsInfo: any = {before: null, after: null};
await Promise.all(imageInfos.map(async (info, index) => {
const [success] = await Promise.all(Array.from(info.images, (img) => { const [success] = await Promise.all(Array.from(info.images, (img) => {
return loadElem(img, info.path); return loadElem(img, info.path);
})); }));
@ -102,11 +103,8 @@ class ImageDiff {
const resp = await GET(info.path); const resp = await GET(info.path);
const text = await resp.text(); const text = await resp.text();
const bounds = getDefaultSvgBoundsIfUndefined(text, info.path); const bounds = getDefaultSvgBoundsIfUndefined(text, info.path);
svgBoundsInfo[index === 0 ? 'after' : 'before'] = bounds;
if (bounds) { if (bounds) {
for (const el of info.images) {
el.setAttribute('width', String(bounds.width));
el.setAttribute('height', String(bounds.height));
}
hideElem(info.boundsInfo); hideElem(info.boundsInfo);
} }
} }
@ -115,10 +113,10 @@ class ImageDiff {
const imagesAfter = imageInfos[0].images; const imagesAfter = imageInfos[0].images;
const imagesBefore = imageInfos[1].images; const imagesBefore = imageInfos[1].images;
this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0])); this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0], svgBoundsInfo));
if (imagesAfter.length > 0 && imagesBefore.length > 0) { if (imagesAfter.length > 0 && imagesBefore.length > 0) {
this.initSwipe(createContext(imagesAfter[1], imagesBefore[1])); this.initSwipe(createContext(imagesAfter[1], imagesBefore[1], svgBoundsInfo));
this.initOverlay(createContext(imagesAfter[2], imagesBefore[2])); this.initOverlay(createContext(imagesAfter[2], imagesBefore[2], svgBoundsInfo));
} }
queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading')); queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading'));
} }