Fix preview position

[Issue] Samsung#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

@@ -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}`)

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;