Fixed the dimensions of image diffs
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54236
This commit is contained in:
parent
4916de7528
commit
db56c32c1e
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue