From a735beefdb558049f8425bf1ed5ef287c109fe7f Mon Sep 17 00:00:00 2001
From: Moritz Post <mpost@eclipsesource.com>
Date: Wed, 22 May 2019 10:25:56 +0200
Subject: [PATCH] Update imageview-zoom.jsx to create correct layout

The snippet did not produce the same layout cross-platform. We now use
a fixed height for the controls to ensure a consistent layout.
---
 snippets/imageview-zoom.jsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/snippets/imageview-zoom.jsx b/snippets/imageview-zoom.jsx
index 2276f5a60..7aa8dd37e 100644
--- a/snippets/imageview-zoom.jsx
+++ b/snippets/imageview-zoom.jsx
@@ -1,17 +1,20 @@
-import {ImageView, TextView, CheckBox, Slider, Composite, Stack, contentView, device} from 'tabris';
+import {CheckBox, Composite, contentView, ImageView, Slider, Stack, TextView} from 'tabris';
 
 contentView.append(
   <Stack stretch alignment='stretchX'>
     <ImageView stretchY zoomEnabled image='resources/salad.jpg' background='#f5f5f5'
-        onZoom={ev => zoomLevelSlider.selection = ev.zoomLevel * 10}/>
-    <CheckBox left={16} top={16} stretchX checked text='Zoom enabled'
+      onZoom={ev => zoomLevelSlider.selection = ev.zoomLevel * 10}/>
+    <Stack height={device.platform === 'iOS' ? 196 : undefined} alignment='stretchX'
+      padding={{bottom: 12, top: 12}} background='white' elevation={8}>
+      <CheckBox left={device.platform === 'iOS' ? 16 : 9} height={48} stretchX checked text='Zoom enabled'
         onCheckedChanged={ev => setZoomEnabled(ev.value)}/>
-    <LabeledSlider id='zoomLevel' text='Zoom level' selection={10}
+      <LabeledSlider id='zoomLevel' text='Zoom level' selection={10}
         onSelectionChanged={ev => setZoomLevel(ev.value / 10)}/>
-    <LabeledSlider id='minZoomLevel' text='Min zoom' selection={10}
+      <LabeledSlider id='minZoomLevel' text='Min zoom' selection={10}
         onSelectionChanged={ev => setMinZoomLevel(ev.value / 10)}/>
-    <LabeledSlider id='maxZoomLevel' text='Max zoom' selection={30}
+      <LabeledSlider id='maxZoomLevel' text='Max zoom' selection={30}
         onSelectionChanged={ev => setMaxZoomLevel(ev.value / 10)}/>
+    </Stack>
   </Stack>
 );
 
@@ -62,7 +65,7 @@ function setMaxZoomLevel(value) {
 /** @param {tabris.Attributes<Slider> & {text: string}} attributes */
 function LabeledSlider({text, ...attributes}) {
   const container = /** @type {Composite} */ (
-    <Composite padding={16}>
+    <Composite height={40} padding={[0, 16]}>
       <TextView left centerY width={72} text={text}/>
       <Slider left='prev() 16' right={40} centerY minimum={5} maximum={50} {...attributes}/>
       <TextView right centerY alignment='right' text={(attributes.selection / 10).toFixed(1)}/>