From 09faf43ef822ca4dbdfb2a2714ad43a782acf6e8 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 24 Aug 2023 20:13:23 +0800 Subject: [PATCH] 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. --- templates/repo/diff/image_diff.tmpl | 7 ++----- web_src/css/features/imagediff.css | 13 +++++++++++-- web_src/js/features/imagediff.js | 7 +++---- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index ec14ef9b1a..bd461d2800 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -11,7 +11,7 @@ {{end}} -
+
{{if .blobBase}} @@ -63,10 +63,8 @@
+
-
- -
@@ -74,7 +72,6 @@
{{end}}
-
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css index a7bce3f471..ad3165e8d8 100644 --- a/web_src/css/features/imagediff.css +++ b/web_src/css/features/imagediff.css @@ -1,6 +1,14 @@ +.image-diff-tabs { + min-height: 60px; + +} +.image-diff-tabs.is-loading .tab { + display: none; +} + .image-diff-container { text-align: center; - padding: 1em 0; + padding: 0.5em 0 1em; } .image-diff-container img { @@ -31,6 +39,7 @@ .image-diff-container .diff-swipe { margin: auto; + padding: 1em 0; } .image-diff-container .diff-swipe .swipe-frame { @@ -89,7 +98,7 @@ } .image-diff-container .diff-overlay .overlay-frame { - margin: 0 auto; + margin: 1em auto 0; position: relative; } diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 2e7baab79f..23b048f295 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -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']");