From caf3f10cf74e3d07e1e1ba996d8771f01390c540 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sun, 24 Jan 2021 20:08:17 +0100 Subject: [PATCH 1/9] Added image diff variations. --- templates/repo/diff/image_diff.tmpl | 171 +++++++++++++----------- web_src/js/index.js | 198 ++++++++++++++++++++++++++++ web_src/less/_repository.less | 116 ++++++++++++++++ 3 files changed, 411 insertions(+), 74 deletions(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index eda208d7446a3..5670e57e08a28 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -1,79 +1,102 @@ {{ $imagePathOld := printf "%s/%s" .root.BeforeRawPath (EscapePound .file.OldName) }} {{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }} - - - - {{.root.i18n.Tr "repo.diff.file_before"}} - - - {{.root.i18n.Tr "repo.diff.file_after"}} - - - - - {{if or .file.IsDeleted (not .file.IsCreated)}} - - - - {{end}} - - - {{if or .file.IsCreated (not .file.IsDeleted)}} - - - - {{end}} - - {{ $imageInfoBase := (call .root.ImageInfoBase .file.OldName) }} {{ $imageInfoHead := (call .root.ImageInfo .file.Name) }} -{{if or $imageInfoBase $imageInfoHead }} +{{if and $imageInfoBase $imageInfoHead}} - - {{if $imageInfoBase }} - {{ $classWidth := "" }} - {{ $classHeight := "" }} - {{ $classByteSize := "" }} - {{if $imageInfoHead}} - {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} - {{ $classWidth = "red" }} - {{end}} - {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} - {{ $classHeight = "red" }} - {{end}} - {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} - {{ $classByteSize = "red" }} - {{end}} - {{end}} - {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoBase.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}} - {{end}} - - - {{if $imageInfoHead }} - {{ $classWidth := "" }} - {{ $classHeight := "" }} - {{ $classByteSize := "" }} - {{if $imageInfoBase}} - {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} - {{ $classWidth = "green" }} - {{end}} - {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} - {{ $classHeight = "green" }} - {{end}} - {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} - {{ $classByteSize = "green" }} - {{end}} - {{end}} - {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoHead.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}} - {{end}} - - -{{end}} + +
+
+
+ X-Y + Swipe + Overlay +
+
+
+
+ +

{{.root.i18n.Tr "repo.diff.file_before"}}

+ +

+ {{if $imageInfoBase }} + {{ $classWidth := "" }} + {{ $classHeight := "" }} + {{ $classByteSize := "" }} + {{if $imageInfoHead}} + {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} + {{ $classWidth = "red" }} + {{end}} + {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} + {{ $classHeight = "red" }} + {{end}} + {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} + {{ $classByteSize = "red" }} + {{end}} + {{end}} + {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoBase.Width}} +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} +  |  + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}} + {{end}} +

+ + +

{{.root.i18n.Tr "repo.diff.file_after"}}

+ +

+ {{if $imageInfoHead }} + {{ $classWidth := "" }} + {{ $classHeight := "" }} + {{ $classByteSize := "" }} + {{if $imageInfoBase}} + {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} + {{ $classWidth = "green" }} + {{end}} + {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} + {{ $classHeight = "green" }} + {{end}} + {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} + {{ $classByteSize = "green" }} + {{end}} + {{end}} + {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoHead.Width}} +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} +  |  + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}} + {{end}} +

+ +
+
+
+
+
+ + + + + + + + +
+
+
+
+
+
+ + +
+ +
+
+
+
+
+ + +{{end}} \ No newline at end of file diff --git a/web_src/js/index.js b/web_src/js/index.js index 16bb412f0962b..7340801071924 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -2384,6 +2384,203 @@ function initIssueReferenceRepositorySearch() { }); } +function initImageDiff() { + function createContext(image1, image2) { + const size1 = { + width: image1.width, + height: image1.height + }; + const size2 = { + width: image2.width, + height: image2.height + }; + const max = { + width: Math.max(size2.width, size1.width), + height: Math.max(size2.height, size1.height) + }; + + return { + image1: $(image1), + image2: $(image2), + size1, + size2, + max, + ratio: [ + Math.floor(max.width - size1.width) / 2, + Math.floor(max.height - size1.height) / 2, + Math.floor(max.width - size2.width) / 2, + Math.floor(max.height - size2.height) / 2 + ] + }; + } + + $('.image-diff').each(function() { + const $container = $(this); + const pathAfter = $container.data('path-after'); + const pathBefore = $container.data('path-before'); + + const imageInfos = [{ + loaded: false, + path: pathAfter, + $image: $container.find('img.image-after') + }, { + loaded: false, + path: pathBefore, + $image: $container.find('img.image-before') + }]; + + for (const info of imageInfos) { + info.$image.on('load', () => { + info.loaded = true; + setReadyIfLoaded(); + }); + info.$image.attr('src', info.path); + } + + const diffContainerWidth = $container.width() - 300; + + function setReadyIfLoaded() { + if (imageInfos[0].loaded && imageInfos[1].loaded) { + initViews(imageInfos[0].$image, imageInfos[1].$image); + } + } + + function initViews($imageAfter, imageBefore) { + initSideBySide(createContext($imageAfter[0], imageBefore[0])); + initSwipe(createContext($imageAfter[1], imageBefore[1])); + initOverlay(createContext($imageAfter[2], imageBefore[2])); + } + + function initSideBySide(sizes) { + let factor = 1; + if (sizes.max.width > (diffContainerWidth - 24) / 2) { + factor = (diffContainerWidth - 24) / 2 / sizes.max.width; + } + + sizes.image1.css({ + width: sizes.size1.width * factor, + 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`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + } + + function initSwipe(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } + + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image1.parent().css({ + margin: `0px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image1.parent().parent().css({ + padding: `${sizes.ratio[1] * factor}px 0 0 0`, + width: sizes.max.width * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + sizes.image2.parent().parent().css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 2 + }); + $container.find('.diff-swipe').css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 4 + }); + $container.find('.swipe-bar').on('mousedown', function(e) { + e.preventDefault(); + + const $swipeBar = $(this); + const $swipeFrame = $swipeBar.parent(); + const width = $swipeFrame.width() - $swipeBar.width() - 2; + + $(document).on('mousemove.diff-swipe', (e2) => { + e2.preventDefault(); + + const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + + $swipeBar.css({ + left: value + }); + $container.find('.swipe-container').css({ + width: $swipeFrame.width() - value + }); + $(document).on('mouseup.diff-swipe', () => { + $(document).off('.diff-swipe'); + }); + }); + }); + } + + function initOverlay(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } + + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image1.parent().css({ + margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + 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 + }); + + const $range = $container.find("input[type='range'"); + const onInput = () => sizes.image1.parent().css({ + opacity: $range.val() / 100 + }); + $range.on('input', onInput); + onInput(); + } + }); +} + $(document).ready(async () => { // Show exact time $('.time-since').each(function () { @@ -2605,6 +2802,7 @@ $(document).ready(async () => { initTableSort(); initNotificationsTable(); initPullRequestMergeInstruction(); + initImageDiff(); const routes = { 'div.user.settings': initUserSettings, diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 57f101abb9186..bbd26f55c5ce3 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3008,6 +3008,122 @@ td.blob-excerpt { } } +.image-diff-container { + text-align: center; + padding: 30px 0; + + img { + border: 1px solid var(--color-primary-light-7); + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC) right bottom var(--color-primary-light-7); + } + + .before-container { + border: 1px solid var(--color-red); + display: block; + } + + .after-container { + border: 1px solid var(--color-green); + display: block; + } + + .diff-side-by-side { + .side { + display: inline-block; + line-height: 0; + vertical-align: top; + + .side-header { + font-weight: bold; + } + } + } + + .diff-swipe { + margin: auto; + + .swipe-frame { + position: absolute; + + .before-container { + position: absolute; + } + + .swipe-container { + position: absolute; + right: 0; + display: block; + border-left: 2px solid var(--color-secondary-dark-8); + height: 100%; + overflow: hidden; + + .after-container { + position: absolute; + right: 0; + } + } + + .swipe-bar { + z-index: 100; + position: absolute; + height: 100%; + top: 0; + left: 0; + + .handle { + background: var(--color-secondary-dark-8); + left: -5px; + height: 12px; + width: 12px; + position: absolute; + transform: rotate(45deg); + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + .top-handle { + top: -12px; + } + + .bottom-handle { + bottom: -14px; + } + } + } + } + + .diff-overlay { + margin: 0 auto; + + .overlay-frame { + margin: 0 auto; + position: relative; + } + + .before-container, + .after-container { + position: absolute; + } + + .control { + width: 300px; + position: absolute; + bottom: -25px; + left: 50%; + margin-left: -150px; + height: 10px; + display: flex; + + input { + width: 100%; + } + } + } +} + /* prevent page shaking on language bar click */ .repository-summary-language-stats { height: 48px; From 1a6fe56f3021f8ea1c24ec1fbc1fb6d837fb35ba Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sun, 24 Jan 2021 20:46:25 +0100 Subject: [PATCH 2/9] Reenabled view for single files. --- templates/repo/diff/image_diff.tmpl | 84 +++++++++++++++-------------- web_src/js/index.js | 29 ++++++---- 2 files changed, 62 insertions(+), 51 deletions(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 5670e57e08a28..20fe877d8f5fc 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -2,75 +2,78 @@ {{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }} {{ $imageInfoBase := (call .root.ImageInfoBase .file.OldName) }} {{ $imageInfoHead := (call .root.ImageInfo .file.Name) }} -{{if and $imageInfoBase $imageInfoHead}} +{{if or $imageInfoBase $imageInfoHead}}
- X-Y + Side by Side + {{if and $imageInfoBase $imageInfoHead}} Swipe Overlay + {{end}}
+ {{if $imageInfoBase }}

{{.root.i18n.Tr "repo.diff.file_before"}}

- {{if $imageInfoBase }} - {{ $classWidth := "" }} - {{ $classHeight := "" }} - {{ $classByteSize := "" }} - {{if $imageInfoHead}} - {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} - {{ $classWidth = "red" }} - {{end}} - {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} - {{ $classHeight = "red" }} - {{end}} - {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} - {{ $classByteSize = "red" }} - {{end}} + {{ $classWidth := "" }} + {{ $classHeight := "" }} + {{ $classByteSize := "" }} + {{if $imageInfoHead}} + {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} + {{ $classWidth = "red" }} + {{end}} + {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} + {{ $classHeight = "red" }} + {{end}} + {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} + {{ $classByteSize = "red" }} {{end}} - {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoBase.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}} {{end}} + {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoBase.Width}} +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} +  |  + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}}

+ {{end}} + {{if $imageInfoHead }}

{{.root.i18n.Tr "repo.diff.file_after"}}

- {{if $imageInfoHead }} - {{ $classWidth := "" }} - {{ $classHeight := "" }} - {{ $classByteSize := "" }} - {{if $imageInfoBase}} - {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} - {{ $classWidth = "green" }} - {{end}} - {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} - {{ $classHeight = "green" }} - {{end}} - {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} - {{ $classByteSize = "green" }} - {{end}} + {{ $classWidth := "" }} + {{ $classHeight := "" }} + {{ $classByteSize := "" }} + {{if $imageInfoBase}} + {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} + {{ $classWidth = "green" }} + {{end}} + {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} + {{ $classHeight = "green" }} + {{end}} + {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} + {{ $classByteSize = "green" }} {{end}} - {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoHead.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}} {{end}} + {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoHead.Width}} +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} +  |  + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}}

+ {{end}}
+ {{if and $imageInfoBase $imageInfoHead}}
@@ -96,6 +99,7 @@
+ {{end}}
diff --git a/web_src/js/index.js b/web_src/js/index.js index 7340801071924..6eccb56067a6f 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -2387,12 +2387,12 @@ function initIssueReferenceRepositorySearch() { function initImageDiff() { function createContext(image1, image2) { const size1 = { - width: image1.width, - height: image1.height + width: image1 && image1.width || 0, + height: image1 && image1.height || 0 }; const size2 = { - width: image2.width, - height: image2.height + width: image2 && image2.width || 0, + height: image2 && image2.height || 0 }; const max = { width: Math.max(size2.width, size1.width), @@ -2430,11 +2430,16 @@ function initImageDiff() { }]; for (const info of imageInfos) { - info.$image.on('load', () => { + if (info.$image.length > 0) { + info.$image.on('load', () => { + info.loaded = true; + setReadyIfLoaded(); + }); + info.$image.attr('src', info.path); + } else { info.loaded = true; setReadyIfLoaded(); - }); - info.$image.attr('src', info.path); + } } const diffContainerWidth = $container.width() - 300; @@ -2445,10 +2450,12 @@ function initImageDiff() { } } - function initViews($imageAfter, imageBefore) { - initSideBySide(createContext($imageAfter[0], imageBefore[0])); - initSwipe(createContext($imageAfter[1], imageBefore[1])); - initOverlay(createContext($imageAfter[2], imageBefore[2])); + function initViews($imageAfter, $imageBefore) { + initSideBySide(createContext($imageAfter[0], $imageBefore[0])); + if ($imageAfter.length > 0 && $imageBefore.length > 0) { + initSwipe(createContext($imageAfter[1], $imageBefore[1])); + initOverlay(createContext($imageAfter[2], $imageBefore[2])); + } } function initSideBySide(sizes) { From e00b38f4b91bfbd42f728878c72865c2a27db11e Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sun, 24 Jan 2021 21:41:45 +0100 Subject: [PATCH 3/9] Moved range input to top. --- templates/repo/diff/image_diff.tmpl | 6 +++--- web_src/less/_repository.less | 12 +----------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 20fe877d8f5fc..529713c915b96 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -91,11 +91,11 @@
- - -
+
+ +
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index bbd26f55c5ce3..1a44dc8de89c4 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3108,18 +3108,8 @@ td.blob-excerpt { position: absolute; } - .control { + input { width: 300px; - position: absolute; - bottom: -25px; - left: 50%; - margin-left: -150px; - height: 10px; - display: flex; - - input { - width: 100%; - } } } } From 07b80aa5aca895717c3786571e6a2f65cd41aa04 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sun, 24 Jan 2021 21:42:27 +0100 Subject: [PATCH 4/9] Show spinner while loading. --- templates/repo/diff/image_diff.tmpl | 11 ++++++----- web_src/js/index.js | 3 +++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 529713c915b96..fed8d39c485ea 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -16,7 +16,7 @@
-
+
{{if $imageInfoBase }}

{{.root.i18n.Tr "repo.diff.file_before"}}

@@ -74,8 +74,8 @@
{{if and $imageInfoBase $imageInfoHead}} -
-
+
+
@@ -88,8 +88,8 @@
-
-
+
+
@@ -100,6 +100,7 @@
{{end}} +
diff --git a/web_src/js/index.js b/web_src/js/index.js index 6eccb56067a6f..afa38294072d6 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -2456,6 +2456,9 @@ function initImageDiff() { initSwipe(createContext($imageAfter[1], $imageBefore[1])); initOverlay(createContext($imageAfter[2], $imageBefore[2])); } + + $container.find('.loader').hide(); + $container.find('.hide').removeClass('hide'); } function initSideBySide(sizes) { From 3d1e299e3db4d2a1d73b929ab7cee5f427221f2e Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Mon, 25 Jan 2021 08:16:15 +0100 Subject: [PATCH 5/9] Added translation. --- options/locale/locale_en-US.ini | 3 +++ templates/repo/diff/image_diff.tmpl | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 770670ec1f872..a3b19e9fcb002 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -1828,6 +1828,9 @@ diff.review.approve = Approve diff.review.reject = Request changes diff.committed_by = committed by diff.protected = Protected +diff.image.side_by_side = Side by Side +diff.image.swipe = Swipe +diff.image.overlay = Overlay releases.desc = Track project versions and downloads. release.releases = Releases diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index fed8d39c485ea..5464364befe29 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -8,10 +8,10 @@
- Side by Side + {{.root.i18n.Tr "repo.diff.image.side_by_side"}} {{if and $imageInfoBase $imageInfoHead}} - Swipe - Overlay + {{.root.i18n.Tr "repo.diff.image.swipe"}} + {{.root.i18n.Tr "repo.diff.image.overlay"}} {{end}}
From 6acaace6259f04a12f9e6d58c1c061fa5d1a9f8c Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Thu, 28 Jan 2021 16:11:25 +0000 Subject: [PATCH 6/9] Moved code to own file. --- web_src/js/features/imagediff.js | 206 ++++++++++++++++++++++++++++++ web_src/js/index.js | 210 +------------------------------ 2 files changed, 208 insertions(+), 208 deletions(-) create mode 100644 web_src/js/features/imagediff.js diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js new file mode 100644 index 0000000000000..c657867b1714e --- /dev/null +++ b/web_src/js/features/imagediff.js @@ -0,0 +1,206 @@ +export default async function initImageDiff() { + function createContext(image1, image2) { + const size1 = { + width: image1 && image1.width || 0, + height: image1 && image1.height || 0 + }; + const size2 = { + width: image2 && image2.width || 0, + height: image2 && image2.height || 0 + }; + const max = { + width: Math.max(size2.width, size1.width), + height: Math.max(size2.height, size1.height) + }; + + return { + image1: $(image1), + image2: $(image2), + size1, + size2, + max, + ratio: [ + Math.floor(max.width - size1.width) / 2, + Math.floor(max.height - size1.height) / 2, + Math.floor(max.width - size2.width) / 2, + Math.floor(max.height - size2.height) / 2 + ] + }; + } + + $('.image-diff').each(function() { + const $container = $(this); + const pathAfter = $container.data('path-after'); + const pathBefore = $container.data('path-before'); + + const imageInfos = [{ + loaded: false, + path: pathAfter, + $image: $container.find('img.image-after') + }, { + loaded: false, + path: pathBefore, + $image: $container.find('img.image-before') + }]; + + for (const info of imageInfos) { + if (info.$image.length > 0) { + info.$image.on('load', () => { + info.loaded = true; + setReadyIfLoaded(); + }); + info.$image.attr('src', info.path); + } else { + info.loaded = true; + setReadyIfLoaded(); + } + } + + const diffContainerWidth = $container.width() - 300; + + function setReadyIfLoaded() { + if (imageInfos[0].loaded && imageInfos[1].loaded) { + initViews(imageInfos[0].$image, imageInfos[1].$image); + } + } + + function initViews($imageAfter, $imageBefore) { + initSideBySide(createContext($imageAfter[0], $imageBefore[0])); + if ($imageAfter.length > 0 && $imageBefore.length > 0) { + initSwipe(createContext($imageAfter[1], $imageBefore[1])); + initOverlay(createContext($imageAfter[2], $imageBefore[2])); + } + + $container.find('.loader').hide(); + $container.find('.hide').removeClass('hide'); + } + + function initSideBySide(sizes) { + let factor = 1; + if (sizes.max.width > (diffContainerWidth - 24) / 2) { + factor = (diffContainerWidth - 24) / 2 / sizes.max.width; + } + + sizes.image1.css({ + width: sizes.size1.width * factor, + 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`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + } + + function initSwipe(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } + + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image1.parent().css({ + margin: `0px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image1.parent().parent().css({ + padding: `${sizes.ratio[1] * factor}px 0 0 0`, + width: sizes.max.width * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + sizes.image2.parent().parent().css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 2 + }); + $container.find('.diff-swipe').css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 4 + }); + $container.find('.swipe-bar').on('mousedown', function(e) { + e.preventDefault(); + + const $swipeBar = $(this); + const $swipeFrame = $swipeBar.parent(); + const width = $swipeFrame.width() - $swipeBar.width() - 2; + + $(document).on('mousemove.diff-swipe', (e2) => { + e2.preventDefault(); + + const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + + $swipeBar.css({ + left: value + }); + $container.find('.swipe-container').css({ + width: $swipeFrame.width() - value + }); + $(document).on('mouseup.diff-swipe', () => { + $(document).off('.diff-swipe'); + }); + }); + }); + } + + function initOverlay(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } + + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image1.parent().css({ + margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + 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 + }); + + const $range = $container.find("input[type='range'"); + const onInput = () => sizes.image1.parent().css({ + opacity: $range.val() / 100 + }); + $range.on('input', onInput); + onInput(); + } + }); +} diff --git a/web_src/js/index.js b/web_src/js/index.js index 2ea686d88755e..dad4ef3502c8a 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -20,6 +20,7 @@ import attachTribute from './features/tribute.js'; import createColorPicker from './features/colorpicker.js'; import createDropzone from './features/dropzone.js'; import initTableSort from './features/tablesort.js'; +import initImageDiff from './features/imagediff.js'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initStopwatch} from './features/stopwatch.js'; @@ -2390,213 +2391,6 @@ function initIssueReferenceRepositorySearch() { }); } -function initImageDiff() { - function createContext(image1, image2) { - const size1 = { - width: image1 && image1.width || 0, - height: image1 && image1.height || 0 - }; - const size2 = { - width: image2 && image2.width || 0, - height: image2 && image2.height || 0 - }; - const max = { - width: Math.max(size2.width, size1.width), - height: Math.max(size2.height, size1.height) - }; - - return { - image1: $(image1), - image2: $(image2), - size1, - size2, - max, - ratio: [ - Math.floor(max.width - size1.width) / 2, - Math.floor(max.height - size1.height) / 2, - Math.floor(max.width - size2.width) / 2, - Math.floor(max.height - size2.height) / 2 - ] - }; - } - - $('.image-diff').each(function() { - const $container = $(this); - const pathAfter = $container.data('path-after'); - const pathBefore = $container.data('path-before'); - - const imageInfos = [{ - loaded: false, - path: pathAfter, - $image: $container.find('img.image-after') - }, { - loaded: false, - path: pathBefore, - $image: $container.find('img.image-before') - }]; - - for (const info of imageInfos) { - if (info.$image.length > 0) { - info.$image.on('load', () => { - info.loaded = true; - setReadyIfLoaded(); - }); - info.$image.attr('src', info.path); - } else { - info.loaded = true; - setReadyIfLoaded(); - } - } - - const diffContainerWidth = $container.width() - 300; - - function setReadyIfLoaded() { - if (imageInfos[0].loaded && imageInfos[1].loaded) { - initViews(imageInfos[0].$image, imageInfos[1].$image); - } - } - - function initViews($imageAfter, $imageBefore) { - initSideBySide(createContext($imageAfter[0], $imageBefore[0])); - if ($imageAfter.length > 0 && $imageBefore.length > 0) { - initSwipe(createContext($imageAfter[1], $imageBefore[1])); - initOverlay(createContext($imageAfter[2], $imageBefore[2])); - } - - $container.find('.loader').hide(); - $container.find('.hide').removeClass('hide'); - } - - function initSideBySide(sizes) { - let factor = 1; - if (sizes.max.width > (diffContainerWidth - 24) / 2) { - factor = (diffContainerWidth - 24) / 2 / sizes.max.width; - } - - sizes.image1.css({ - width: sizes.size1.width * factor, - 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`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - } - - function initSwipe(sizes) { - let factor = 1; - if (sizes.max.width > diffContainerWidth - 12) { - factor = (diffContainerWidth - 12) / sizes.max.width; - } - - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `0px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image1.parent().parent().css({ - padding: `${sizes.ratio[1] * factor}px 0 0 0`, - width: sizes.max.width * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - sizes.image2.parent().parent().css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 2 - }); - $container.find('.diff-swipe').css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 4 - }); - $container.find('.swipe-bar').on('mousedown', function(e) { - e.preventDefault(); - - const $swipeBar = $(this); - const $swipeFrame = $swipeBar.parent(); - const width = $swipeFrame.width() - $swipeBar.width() - 2; - - $(document).on('mousemove.diff-swipe', (e2) => { - e2.preventDefault(); - - const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); - - $swipeBar.css({ - left: value - }); - $container.find('.swipe-container').css({ - width: $swipeFrame.width() - value - }); - $(document).on('mouseup.diff-swipe', () => { - $(document).off('.diff-swipe'); - }); - }); - }); - } - - function initOverlay(sizes) { - let factor = 1; - if (sizes.max.width > diffContainerWidth - 12) { - factor = (diffContainerWidth - 12) / sizes.max.width; - } - - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image1.parent().css({ - margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - 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 - }); - - const $range = $container.find("input[type='range'"); - const onInput = () => sizes.image1.parent().css({ - opacity: $range.val() / 100 - }); - $range.on('input', onInput); - onInput(); - } - }); -} - $(document).ready(async () => { // Show exact time $('.time-since').each(function () { @@ -2818,7 +2612,6 @@ $(document).ready(async () => { initTableSort(); initNotificationsTable(); initPullRequestMergeInstruction(); - initImageDiff(); const routes = { 'div.user.settings': initUserSettings, @@ -2844,6 +2637,7 @@ $(document).ready(async () => { initStopwatch(), renderMarkdownContent(), initGithook(), + initImageDiff(), ]); }); From aefc3d8b81b91fd6f8f8db11de40b066caa2191d Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Thu, 28 Jan 2021 16:25:48 +0000 Subject: [PATCH 7/9] Moved style to own file. --- web_src/less/_repository.less | 106 --------------------------- web_src/less/features/imagediff.less | 105 ++++++++++++++++++++++++++ web_src/less/index.less | 1 + 3 files changed, 106 insertions(+), 106 deletions(-) create mode 100644 web_src/less/features/imagediff.less diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 1a44dc8de89c4..57f101abb9186 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3008,112 +3008,6 @@ td.blob-excerpt { } } -.image-diff-container { - text-align: center; - padding: 30px 0; - - img { - border: 1px solid var(--color-primary-light-7); - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC) right bottom var(--color-primary-light-7); - } - - .before-container { - border: 1px solid var(--color-red); - display: block; - } - - .after-container { - border: 1px solid var(--color-green); - display: block; - } - - .diff-side-by-side { - .side { - display: inline-block; - line-height: 0; - vertical-align: top; - - .side-header { - font-weight: bold; - } - } - } - - .diff-swipe { - margin: auto; - - .swipe-frame { - position: absolute; - - .before-container { - position: absolute; - } - - .swipe-container { - position: absolute; - right: 0; - display: block; - border-left: 2px solid var(--color-secondary-dark-8); - height: 100%; - overflow: hidden; - - .after-container { - position: absolute; - right: 0; - } - } - - .swipe-bar { - z-index: 100; - position: absolute; - height: 100%; - top: 0; - left: 0; - - .handle { - background: var(--color-secondary-dark-8); - left: -5px; - height: 12px; - width: 12px; - position: absolute; - transform: rotate(45deg); - box-sizing: border-box; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - } - - .top-handle { - top: -12px; - } - - .bottom-handle { - bottom: -14px; - } - } - } - } - - .diff-overlay { - margin: 0 auto; - - .overlay-frame { - margin: 0 auto; - position: relative; - } - - .before-container, - .after-container { - position: absolute; - } - - input { - width: 300px; - } - } -} - /* prevent page shaking on language bar click */ .repository-summary-language-stats { height: 48px; diff --git a/web_src/less/features/imagediff.less b/web_src/less/features/imagediff.less new file mode 100644 index 0000000000000..55f1a53677ab0 --- /dev/null +++ b/web_src/less/features/imagediff.less @@ -0,0 +1,105 @@ +.image-diff-container { + text-align: center; + padding: 30px 0; + + img { + border: 1px solid var(--color-primary-light-7); + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC) right bottom var(--color-primary-light-7); + } + + .before-container { + border: 1px solid var(--color-red); + display: block; + } + + .after-container { + border: 1px solid var(--color-green); + display: block; + } + + .diff-side-by-side { + .side { + display: inline-block; + line-height: 0; + vertical-align: top; + + .side-header { + font-weight: bold; + } + } + } + + .diff-swipe { + margin: auto; + + .swipe-frame { + position: absolute; + + .before-container { + position: absolute; + } + + .swipe-container { + position: absolute; + right: 0; + display: block; + border-left: 2px solid var(--color-secondary-dark-8); + height: 100%; + overflow: hidden; + + .after-container { + position: absolute; + right: 0; + } + } + + .swipe-bar { + z-index: 100; + position: absolute; + height: 100%; + top: 0; + left: 0; + + .handle { + background: var(--color-secondary-dark-8); + left: -5px; + height: 12px; + width: 12px; + position: absolute; + transform: rotate(45deg); + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + .top-handle { + top: -12px; + } + + .bottom-handle { + bottom: -14px; + } + } + } + } + + .diff-overlay { + margin: 0 auto; + + .overlay-frame { + margin: 0 auto; + position: relative; + } + + .before-container, + .after-container { + position: absolute; + } + + input { + width: 300px; + } + } +} \ No newline at end of file diff --git a/web_src/less/index.less b/web_src/less/index.less index 5986930859c60..cd70eedefdedb 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -5,6 +5,7 @@ @import "./features/gitgraph.less"; @import "./features/animations.less"; @import "./features/heatmap.less"; +@import "./features/imagediff.less"; @import "./markdown/mermaid.less"; @import "./chroma/base.less"; From 2a799163ce9d10ceb7f26431d04d8023582caf6f Mon Sep 17 00:00:00 2001 From: 6543 <6543@obermui.de> Date: Thu, 28 Jan 2021 18:19:36 +0100 Subject: [PATCH 8/9] fix lint --- web_src/less/features/imagediff.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/features/imagediff.less b/web_src/less/features/imagediff.less index 55f1a53677ab0..f38ea98d7de17 100644 --- a/web_src/less/features/imagediff.less +++ b/web_src/less/features/imagediff.less @@ -102,4 +102,4 @@ width: 300px; } } -} \ No newline at end of file +} From 7135633c13884edae3a0ee59e538c15b01fb1a3c Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Thu, 25 Feb 2021 15:36:26 +0000 Subject: [PATCH 9/9] Force active class. --- templates/repo/diff/image_diff.tmpl | 154 ++++++++++++++-------------- web_src/js/features/imagediff.js | 4 +- 2 files changed, 80 insertions(+), 78 deletions(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 5464364befe29..01f7e3f8e8f4a 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -15,91 +15,93 @@ {{end}}
-
-
- {{if $imageInfoBase }} - -

{{.root.i18n.Tr "repo.diff.file_before"}}

- -

- {{ $classWidth := "" }} - {{ $classHeight := "" }} - {{ $classByteSize := "" }} - {{if $imageInfoHead}} - {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} - {{ $classWidth = "red" }} +

+
+
+ {{if $imageInfoBase }} + +

{{.root.i18n.Tr "repo.diff.file_before"}}

+ +

+ {{ $classWidth := "" }} + {{ $classHeight := "" }} + {{ $classByteSize := "" }} + {{if $imageInfoHead}} + {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} + {{ $classWidth = "red" }} + {{end}} + {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} + {{ $classHeight = "red" }} + {{end}} + {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} + {{ $classByteSize = "red" }} + {{end}} {{end}} - {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} - {{ $classHeight = "red" }} - {{end}} - {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} - {{ $classByteSize = "red" }} - {{end}} - {{end}} - {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoBase.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}} -

- - {{end}} - {{if $imageInfoHead }} - -

{{.root.i18n.Tr "repo.diff.file_after"}}

- -

- {{ $classWidth := "" }} - {{ $classHeight := "" }} - {{ $classByteSize := "" }} - {{if $imageInfoBase}} - {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} - {{ $classWidth = "green" }} - {{end}} - {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} - {{ $classHeight = "green" }} - {{end}} - {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} - {{ $classByteSize = "green" }} - {{end}} - {{end}} - {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoHead.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}} -

- - {{end}} -
-
- {{if and $imageInfoBase $imageInfoHead}} -
-
-
- - - + {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoBase.Width}} +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} +  |  + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}} +

- - - + {{end}} + {{if $imageInfoHead }} + +

{{.root.i18n.Tr "repo.diff.file_after"}}

+ +

+ {{ $classWidth := "" }} + {{ $classHeight := "" }} + {{ $classByteSize := "" }} + {{if $imageInfoBase}} + {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}} + {{ $classWidth = "green" }} + {{end}} + {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}} + {{ $classHeight = "green" }} + {{end}} + {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}} + {{ $classByteSize = "green" }} + {{end}} + {{end}} + {{.root.i18n.Tr "repo.diff.file_image_width"}}: {{$imageInfoHead.Width}} +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} +  |  + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}} +

+ {{end}}
-
-
-
-
-
- + {{if and $imageInfoBase $imageInfoHead}} +
+
+
+ + + + + + + + +
+
+
+
+
+
+
+ +
+ +
- -
+ {{end}}
- {{end}}
diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index c657867b1714e..ce7ce8d2afdcd 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -71,8 +71,8 @@ export default async function initImageDiff() { initOverlay(createContext($imageAfter[2], $imageBefore[2])); } - $container.find('.loader').hide(); - $container.find('.hide').removeClass('hide'); + $container.find('> .loader').hide(); + $container.find('> .hide').removeClass('hide'); } function initSideBySide(sizes) {