Commit 6921db1b authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'scrollable-design-view' into 'master'

Scrollable design view (#13217 part 1)

See merge request gitlab-org/gitlab!22942
parents 2f5848ad db296a61
......@@ -89,15 +89,17 @@ export default {
</script>
<template>
<div ref="presentationViewport" class="d-flex flex-column h-100 mh-100 position-relative">
<design-image v-if="image" :image="image" :name="imageName" @resize="onImageResize" />
<design-overlay
v-if="overlayDimensions && overlayPosition"
:dimensions="overlayDimensions"
:position="overlayPosition"
:notes="discussionStartingNotes"
:current-comment-form="currentCommentForm"
@openCommentForm="openCommentForm"
/>
<div ref="presentationViewport" class="h-100 w-100 p-3 overflow-auto">
<div class="h-100 w-100 d-flex align-items-center position-relative">
<design-image v-if="image" :image="image" :name="imageName" @resize="onImageResize" />
<design-overlay
v-if="overlayDimensions && overlayPosition"
:dimensions="overlayDimensions"
:position="overlayPosition"
:notes="discussionStartingNotes"
:current-comment-form="currentCommentForm"
@openCommentForm="openCommentForm"
/>
</div>
</div>
</template>
......@@ -52,13 +52,7 @@ export default {
</script>
<template>
<div class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image">
<img
ref="contentImg"
:src="image"
:alt="name"
class="ml-auto mr-auto img-fluid mh-100 design-image"
@load="onImgLoad"
/>
<div class="m-auto h-100 w-100 d-flex-center js-design-image">
<img ref="contentImg" :src="image" :alt="name" class="img-fluid mh-100" @load="onImgLoad" />
</div>
</template>
......@@ -2,27 +2,35 @@
exports[`Design management design presentation component renders empty state when no image provided 1`] = `
<div
class="d-flex flex-column h-100 mh-100 position-relative"
class="h-100 w-100 p-3 overflow-auto"
>
<!---->
<!---->
<div
class="h-100 w-100 d-flex align-items-center position-relative"
>
<!---->
<!---->
</div>
</div>
`;
exports[`Design management design presentation component renders image and overlay when image provided 1`] = `
<div
class="d-flex flex-column h-100 mh-100 position-relative"
class="h-100 w-100 p-3 overflow-auto"
>
<design-image-stub
image="test.jpg"
name="test"
/>
<design-overlay-stub
dimensions="[object Object]"
notes=""
position="[object Object]"
/>
<div
class="h-100 w-100 d-flex align-items-center position-relative"
>
<design-image-stub
image="test.jpg"
name="test"
/>
<design-overlay-stub
dimensions="[object Object]"
notes=""
position="[object Object]"
/>
</div>
</div>
`;
......@@ -2,11 +2,11 @@
exports[`Design management large image component renders image 1`] = `
<div
class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image"
class="m-auto h-100 w-100 d-flex-center js-design-image"
>
<img
alt="test"
class="ml-auto mr-auto img-fluid mh-100 design-image"
class="img-fluid mh-100"
src="test.jpg"
/>
</div>
......@@ -14,12 +14,12 @@ exports[`Design management large image component renders image 1`] = `
exports[`Design management large image component renders loading state 1`] = `
<div
class="d-flex align-items-center h-100 w-100 p-3 overflow-hidden js-design-image"
class="m-auto h-100 w-100 d-flex-center js-design-image"
isloading="true"
>
<img
alt=""
class="ml-auto mr-auto img-fluid mh-100 design-image"
class="img-fluid mh-100"
src=""
/>
</div>
......
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