Commit 117fb448 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'image-diff-size-fix' into 'master'

Fixed the dimensions of image diffs

Closes #54236

See merge request gitlab-org/gitlab-ce!23195
parents c9b4b2a3 db56c32c
......@@ -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
......
......@@ -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"
>
......
......@@ -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"
......
......@@ -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 {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment