diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-11-20 11:18:23 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-11-20 11:18:23 +0000 |
commit | 117fb4487361aa86f6c1bf8e52e30d5e8e2c6630 (patch) | |
tree | 5be3e7a3b6d748dbd6cde1c85cfb876d0671ec98 | |
parent | c9b4b2a3c03814c492281d118592218f0326eeba (diff) | |
parent | db56c32c1e012ad8df9ac2a00d20114133d663d8 (diff) | |
download | gitlab-ce-117fb4487361aa86f6c1bf8e52e30d5e8e2c6630.tar.gz |
Merge branch 'image-diff-size-fix' into 'master'
Fixed the dimensions of image diffs
Closes #54236
See merge request gitlab-org/gitlab-ce!23195
4 files changed, 12 insertions, 35 deletions
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue index 6f2f0f98690..05f9f960934 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue @@ -34,14 +34,7 @@ export default { fileSizeReadable() { return numberToHumanSize(this.fileSize); }, - dimensionStyles() { - if (!this.isLoaded) return {}; - return { - width: `${this.width}px`, - height: `${this.height}px`, - }; - }, hasFileSize() { return this.fileSize > 0; }, @@ -89,7 +82,6 @@ export default { <div> <div :class="innerCssClasses" - :style="dimensionStyles" class="position-relative" > <img diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue index c3cfe54eb4d..57f373fca21 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue @@ -25,7 +25,7 @@ export default { swipeMaxWidth: undefined, swipeMaxHeight: undefined, swipeBarPos: 1, - swipeWrapWidth: undefined, + swipeWrapWidth: 0, }; }, computed: { @@ -63,7 +63,7 @@ export default { leftValue = clientWidth - spaceLeft; } - this.swipeWrapWidth = this.swipeMaxWidth - leftValue; + this.swipeWrapWidth = (leftValue / clientWidth) * 100; this.swipeBarPos = leftValue; }, startDrag() { @@ -81,7 +81,6 @@ export default { // Add 2 for border width this.swipeMaxWidth = Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2; - this.swipeWrapWidth = this.swipeMaxWidth; this.swipeMaxHeight = Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2; @@ -107,10 +106,6 @@ export default { <div class="swipe view"> <div ref="swipeFrame" - :style="{ - 'width': swipeMaxPixelWidth, - 'height': swipeMaxPixelHeight, - }" class="swipe-frame"> <image-viewer key="swipeOldImg" @@ -123,14 +118,17 @@ export default { <div ref="swipeWrap" :style="{ - 'width': swipeWrapPixelWidth, - 'height': swipeMaxPixelHeight, + width: `${swipeWrapWidth}%` }" - class="swipe-wrap"> + class="swipe-wrap" + > <image-viewer key="swipeNewImg" :render-info="false" :path="newPath" + :style="{ + width: swipeMaxPixelWidth + }" class="frame added" @imgLoaded="swipeNewImgLoaded" > diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue index 9806d65e940..aafa88f4ff1 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue @@ -19,18 +19,18 @@ export default { </script> <template> - <div class="two-up view"> + <div class="two-up view d-flex"> <image-viewer :path="oldPath" :render-info="true" inner-css-classes="frame deleted" - class="wrap" + class="wrap w-50" /> <image-viewer :path="newPath" :render-info="true" :inner-css-classes="['frame', 'added']" - class="wrap" + class="wrap w-50" > <slot slot="image-overlay" diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 3c7bf0b0e46..0163c795074 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -253,19 +253,6 @@ right: 7px; } - .frame { - top: 0; - right: 0; - position: absolute; - - &.deleted { - margin: 0; - display: block; - top: 13px; - right: 7px; - } - } - .swipe-bar { display: block; height: 100%; @@ -435,7 +422,7 @@ .onion-skin.view { .swipe-wrap { top: 0; - right: 0; + left: 0; } .frame.deleted { |