From 890c85c4b44160312730baac7bd06f59da9b8401 Mon Sep 17 00:00:00 2001
From: Grzegorz Czajkowski <g.czajkowski@samsung.com>
Date: Tue, 10 Sep 2019 15:35:42 +0200
Subject: [PATCH] Fix preview position

[Issue] https://github.com/Samsung/TAU-Design-Editor/issues/319

[Problem] Preview element is moved outside of screen

[Cause] transform: translate(-50%, -50%) is not removed from
        closet-preview-container. This happens because
        getBoundingClientRect on closet-design-editor-frame
        returns 0 since its visibility is set to hidden for
        remote samples in order not to show design editor
        and go to preview directly.

[Solution] Remove transform: translate(-50%, -50%).

[Test]
    1. Go to the page http://localhost:3000/demos?path=1.0%2Fexamples%2Fmobile%2FUIComponents%2Fcomponents%2Fnavigationelements%2Fpanel%2Findex.html
    2. Open the preview.
    3. Preview should be placed in the centre of screen.

Signed-off-by: Grzegorz Czajkowski <g.czajkowski@samsung.com>
---
 design-editor/src/panel/preview/preview-element.js | 4 ++--
 design-editor/styles/design-editor/preview.less    | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/design-editor/src/panel/preview/preview-element.js b/design-editor/src/panel/preview/preview-element.js
index 381c50cb9..d84c9ddb4 100644
--- a/design-editor/src/panel/preview/preview-element.js
+++ b/design-editor/src/panel/preview/preview-element.js
@@ -91,6 +91,7 @@ class Preview extends DressElement {
 	 */
 	show({editor, callback}) {
 		const $targetFrame = editor && editor.getDesignViewIframe(),
+			// FIXME: $targetFrame is hidden for TAU remote samples and its position is 0.
 			position = ($targetFrame && $targetFrame[0].getBoundingClientRect()) || {top: 0, left: 0};
 
 		if ($targetFrame && editor) {
@@ -125,13 +126,12 @@ class Preview extends DressElement {
 			styles = {
 				width: `${screenConfig.width}px`,
 				height: `${screenConfig.height}px`,
-				transform: `scale(${ratio}) translate(-50% -50%)`
+				transform: `scale(${ratio})`
 			};
 
 		if (position.top) {
 			styles.top = position.top;
 			styles.left = position.left;
-			styles.transform = `scale(${ratio})`;
 		}
 
 		$elem.addClass(`closet-preview-shape-${screenConfig.shape}`)
diff --git a/design-editor/styles/design-editor/preview.less b/design-editor/styles/design-editor/preview.less
index 5138bea84..20d461be1 100644
--- a/design-editor/styles/design-editor/preview.less
+++ b/design-editor/styles/design-editor/preview.less
@@ -18,7 +18,6 @@ closet-preview-element {
     top: 50%;
     left: 50%;
     opacity: 0;
-    transform: translate(-50%, -50%);
     transform-origin: top left;
     transition-property: opacity;
     transition-duration: 300ms;