Fix qml example button layouts

The buttons in the qml examples are now set into layouts so that the
text is visible on different platforms.

Change-Id: Id25d01ea978905b5c744047b40d47e56e6ac14bd
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@digia.com>

7 files changed, 289 insertions, 225 deletions

diff --git a/examples/qmlcustominput/qml/qmlcustominput/data.qml b/examples/qmlcustominput/qml/qmlcustominput/data.qml
index 71c544a4..5a8df2c9 100644
--- a/examples/qmlcustominput/qml/qmlcustominput/data.qml
+++ b/examples/qmlcustominput/qml/qmlcustominput/data.qml
@@ -18,7 +18,6 @@
 
 import QtQuick 2.1
 import QtDataVisualization 1.0
-import QtQuick.XmlListModel 2.0
 
 Item {
     property alias model: dataModel
diff --git a/examples/qmlcustominput/qml/qmlcustominput/main.qml b/examples/qmlcustominput/qml/qmlcustominput/main.qml
index a7e7f466..6ba6c19e 100644
--- a/examples/qmlcustominput/qml/qmlcustominput/main.qml
+++ b/examples/qmlcustominput/qml/qmlcustominput/main.qml
@@ -17,6 +17,7 @@
 ****************************************************************************/
 
 import QtQuick 2.1
+import QtQuick.Layouts 1.0
 import QtDataVisualization 1.0
 import "."
 
@@ -34,7 +35,7 @@ Item {
         id: dataView
         anchors.bottom: parent.bottom
         width: parent.width
-        height: parent.height - shadowToggle.height
+        height: parent.height - buttonLayout.height
 
         //! [0]
         Scatter3D {
@@ -153,45 +154,53 @@ Item {
     }
     //! [7]
 
-    NewButton {
-        id: shadowToggle
-        width: parent.width / 3 // We're adding 3 buttons and want to divide them equally
-        text: "Hide Shadows"
+    RowLayout {
+        id: buttonLayout
+        Layout.minimumHeight: shadowToggle.height
+        width: parent.width
         anchors.left: parent.left
-
-        onClicked: {
-            if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
-                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftMedium;
-                text = "Hide Shadows";
-            } else {
-                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
-                text = "Show Shadows";
+        spacing: 0
+
+        NewButton {
+            id: shadowToggle
+            Layout.fillHeight: true
+            Layout.minimumWidth: parent.width / 3 // 3 buttons divided equally in the layout
+            text: "Hide Shadows"
+
+            onClicked: {
+                if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
+                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftMedium;
+                    text = "Hide Shadows";
+                } else {
+                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
+                    text = "Show Shadows";
+                }
             }
         }
-    }
 
-    NewButton {
-        id: cameraToggle
-        width: parent.width / 3
-        text: "Animate Camera"
-        anchors.left: shadowToggle.right
-
-        onClicked: {
-            cameraAnimationX.paused = !cameraAnimationX.paused;
-            cameraAnimationY.paused = cameraAnimationX.paused;
-            if (cameraAnimationX.paused) {
-                text = "Animate Camera";
-            } else {
-                text = "Pause Camera";
+        NewButton {
+            id: cameraToggle
+            Layout.fillHeight: true
+            Layout.minimumWidth: parent.width / 3
+            text: "Animate Camera"
+
+            onClicked: {
+                cameraAnimationX.paused = !cameraAnimationX.paused;
+                cameraAnimationY.paused = cameraAnimationX.paused;
+                if (cameraAnimationX.paused) {
+                    text = "Animate Camera";
+                } else {
+                    text = "Pause Camera";
+                }
             }
         }
-    }
 
-    NewButton {
-        id: exitButton
-        width: parent.width / 3
-        text: "Quit"
-        anchors.left: cameraToggle.right
-        onClicked: Qt.quit(0);
+        NewButton {
+            id: exitButton
+            Layout.fillHeight: true
+            Layout.minimumWidth: parent.width / 3
+            text: "Quit"
+            onClicked: Qt.quit(0);
+        }
     }
 }
diff --git a/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml b/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml
index 895db183..e44c9d1a 100644
--- a/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml
+++ b/examples/qmlcustominput/qml/qmlcustominput/newbutton.qml
@@ -18,6 +18,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.0
 
 Item {
     id: newbutton
@@ -26,17 +27,25 @@ Item {
 
     signal clicked
 
-    height: 80
+    implicitWidth: buttonText.implicitWidth + 5
+    implicitHeight: buttonText.implicitHeight + 10
 
     Button {
+        id: buttonText
         width: parent.width
         height: parent.height
-        Text {
-            id: buttonText
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-            anchors.fill: parent
+
+        style: ButtonStyle {
+            label: Component {
+                Text {
+                    text: buttonText.text
+                    clip: true
+                    wrapMode: Text.WordWrap
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.fill: parent
+                }
+            }
         }
         onClicked: newbutton.clicked()
     }
diff --git a/examples/qmlscatter/qml/qmlscatter/main.qml b/examples/qmlscatter/qml/qmlscatter/main.qml
index 40e48996..338bec24 100644
--- a/examples/qmlscatter/qml/qmlscatter/main.qml
+++ b/examples/qmlscatter/qml/qmlscatter/main.qml
@@ -18,6 +18,7 @@
 
 //! [0]
 import QtQuick 2.1
+import QtQuick.Layouts 1.0
 import QtDataVisualization 1.0
 import "."
 //! [0]
@@ -49,7 +50,7 @@ Item {
         anchors.bottom: parent.bottom
         //! [9]
         width: parent.width
-        height: parent.height - shadowToggle.height
+        height: parent.height - buttonLayout.height
         //! [8]
 
         //! [2]
@@ -126,90 +127,102 @@ Item {
         }
     }
 
-    //! [7]
-    NewButton {
-        id: shadowToggle
-        width: parent.width / 6 // We're adding 6 buttons and want to divide them equally
-        text: "Hide Shadows"
-        onClicked: {
-            if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
-                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow;
-                text = "Hide Shadows";
-            } else {
-                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
-                text = "Show Shadows";
+    RowLayout {
+        id: buttonLayout
+        Layout.minimumHeight: cameraToggle.height
+        width: parent.width
+        anchors.left: parent.left
+        spacing: 0
+        //! [7]
+        NewButton {
+            id: shadowToggle
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            text: "Hide Shadows"
+            onClicked: {
+                if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
+                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow;
+                    text = "Hide Shadows";
+                } else {
+                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
+                    text = "Show Shadows";
+                }
             }
         }
-    }
-    //! [7]
-
-    NewButton {
-        id: smoothToggle
-        width: parent.width / 6
-        text: "Use Smooth for Series One"
-        anchors.left: shadowToggle.right
-        onClicked: {
-            if (scatterSeries.meshSmooth === false) {
-                text = "Use Flat for Series One";
-                scatterSeries.meshSmooth = true;
-            } else {
-                text = "Use Smooth for Series One"
-                scatterSeries.meshSmooth = false;
+        //! [7]
+
+        NewButton {
+            id: smoothToggle
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            text: "Use Smooth Dots"
+            onClicked: {
+                if (scatterSeries.meshSmooth === false) {
+                    text = "Use Flat for Series One";
+                    scatterSeries.meshSmooth = true;
+                } else {
+                    text = "Use Smooth for Series One"
+                    scatterSeries.meshSmooth = false;
+                }
             }
         }
-    }
 
-    NewButton {
-        id: cameraToggle
-        width: parent.width / 6
-        text: "Change Camera Placement"
-        anchors.left: smoothToggle.right
-        onClicked: {
-            if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) {
-                scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricRightHigh;
-            } else {
-                scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront;
+        NewButton {
+            id: cameraToggle
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            text: "Change Camera Placement"
+            onClicked: {
+                if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) {
+                    scatterGraph.scene.activeCamera.cameraPreset =
+                            Camera3D.CameraPresetIsometricRightHigh;
+                } else {
+                    scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront;
+                }
             }
         }
-    }
 
-    NewButton {
-        id: themeToggle
-        width: parent.width / 6
-        text: "Change Theme"
-        anchors.left: cameraToggle.right
-        onClicked: {
-            if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) {
-                // Ownership of the theme is transferred and old theme is destroyed when setting
-                // a new one, so we need to create them dynamically
-                scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0; Theme3D {type: Theme3D.ThemeIsabelle; font.family: "Lucida Handwriting"; font.pointSize: 40}', parent);
-            } else {
-                scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0; Theme3D {type: Theme3D.ThemeArmyBlue}', parent);
+        NewButton {
+            id: themeToggle
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            text: "Change Theme"
+            onClicked: {
+                if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) {
+                    // Ownership of the theme is transferred and old theme is destroyed when setting
+                    // a new one, so we need to create them dynamically
+                    scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0;
+                        Theme3D {type: Theme3D.ThemeIsabelle; font.family: "Lucida Handwriting";
+                        font.pointSize: 40}', parent);
+                } else {
+                    scatterGraph.theme = Qt.createQmlObject('import QtDataVisualization 1.0;
+                        Theme3D {type: Theme3D.ThemeArmyBlue}', parent);
+                }
             }
         }
-    }
 
-    NewButton {
-        id: backgroundToggle
-        width: parent.width / 6
-        text: "Hide Background"
-        anchors.left: themeToggle.right
-        onClicked: {
-            if (scatterGraph.theme.backgroundEnabled === true) {
-                scatterGraph.theme.backgroundEnabled = false;
-                text = "Show Background";
-            } else {
-                scatterGraph.theme.backgroundEnabled = true;
-                text = "Hide Background";
+        NewButton {
+            id: backgroundToggle
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            text: "Hide Background"
+            onClicked: {
+                if (scatterGraph.theme.backgroundEnabled === true) {
+                    scatterGraph.theme.backgroundEnabled = false;
+                    text = "Show Background";
+                } else {
+                    scatterGraph.theme.backgroundEnabled = true;
+                    text = "Hide Background";
+                }
             }
         }
-    }
 
-    NewButton {
-        id: exitButton
-        width: parent.width / 6
-        text: "Quit"
-        anchors.left: backgroundToggle.right
-        onClicked: Qt.quit(0);
+        NewButton {
+            id: exitButton
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            text: "Quit"
+            onClicked: Qt.quit(0);
+        }
     }
 }
diff --git a/examples/qmlscatter/qml/qmlscatter/newbutton.qml b/examples/qmlscatter/qml/qmlscatter/newbutton.qml
index 895db183..e44c9d1a 100644
--- a/examples/qmlscatter/qml/qmlscatter/newbutton.qml
+++ b/examples/qmlscatter/qml/qmlscatter/newbutton.qml
@@ -18,6 +18,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.0
 
 Item {
     id: newbutton
@@ -26,17 +27,25 @@ Item {
 
     signal clicked
 
-    height: 80
+    implicitWidth: buttonText.implicitWidth + 5
+    implicitHeight: buttonText.implicitHeight + 10
 
     Button {
+        id: buttonText
         width: parent.width
         height: parent.height
-        Text {
-            id: buttonText
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-            anchors.fill: parent
+
+        style: ButtonStyle {
+            label: Component {
+                Text {
+                    text: buttonText.text
+                    clip: true
+                    wrapMode: Text.WordWrap
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.fill: parent
+                }
+            }
         }
         onClicked: newbutton.clicked()
     }
diff --git a/examples/qmlsurface/qml/qmlsurface/main.qml b/examples/qmlsurface/qml/qmlsurface/main.qml
index 13f3f7ce..efec0b24 100644
--- a/examples/qmlsurface/qml/qmlsurface/main.qml
+++ b/examples/qmlsurface/qml/qmlsurface/main.qml
@@ -17,6 +17,7 @@
 ****************************************************************************/
 
 import QtQuick 2.1
+import QtQuick.Layouts 1.0
 import QtDataVisualization 1.0
 import "."
 
@@ -26,13 +27,16 @@ Item {
     height: 720
     visible: true
 
+    property int buttonMaximumWidth: surfaceGridToggle.width
+    property int buttonMinimumHeight: seriesToggle.height
+
     Data {
         id: surfaceData
     }
 
     Item {
         id: surfaceView
-        width: mainview.width - surfaceGridToggle.width
+        width: mainview.width - buttonLayout.width
         height: mainview.height
         anchors.right: mainview.right;
 
@@ -113,120 +117,132 @@ Item {
         }
     }
     //! [4]
-
-    NewButton {
-        id: surfaceGridToggle
+    ColumnLayout {
+        id: buttonLayout
         anchors.top: parent.top
         anchors.left: parent.left
-        width: 200
-        text: "Show Surface Grid"
-        //! [1]
-        onClicked: {
-            if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
-                surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
-                heightSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
-                text = "Show Surface Grid"
-            } else {
-                surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe;
-                heightSeries.drawMode |= Surface3DSeries.DrawWireframe;
-                text = "Hide Surface Grid"
+        spacing: 0
+
+        NewButton {
+            id: surfaceGridToggle
+            Layout.maximumWidth: buttonMaximumWidth
+            Layout.fillWidth: true
+            Layout.minimumHeight: buttonMinimumHeight
+            text: "Show Surface Grid"
+            //! [1]
+            onClicked: {
+                if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
+                    surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
+                    heightSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
+                    text = "Show Surface Grid"
+                } else {
+                    surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe;
+                    heightSeries.drawMode |= Surface3DSeries.DrawWireframe;
+                    text = "Hide Surface Grid"
+                }
             }
+            //! [1]
         }
-        //! [1]
-    }
 
-    NewButton {
-        id: surfaceToggle
-        anchors.top: surfaceGridToggle.bottom
-        width: surfaceGridToggle.width
-        text: "Hide Surface"
-        //! [8]
-        onClicked: {
-            if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface) {
-                surfaceSeries.drawMode &= ~Surface3DSeries.DrawSurface;
-                heightSeries.drawMode &= ~Surface3DSeries.DrawSurface;
-                text = "Show Surface"
-            } else {
-                surfaceSeries.drawMode |= Surface3DSeries.DrawSurface;
-                heightSeries.drawMode |= Surface3DSeries.DrawSurface;
-                text = "Hide Surface"
+        NewButton {
+            id: surfaceToggle
+            Layout.maximumWidth: buttonMaximumWidth
+            Layout.fillWidth: true
+            Layout.minimumHeight: buttonMinimumHeight
+            text: "Hide Surface"
+            //! [8]
+            onClicked: {
+                if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface) {
+                    surfaceSeries.drawMode &= ~Surface3DSeries.DrawSurface;
+                    heightSeries.drawMode &= ~Surface3DSeries.DrawSurface;
+                    text = "Show Surface"
+                } else {
+                    surfaceSeries.drawMode |= Surface3DSeries.DrawSurface;
+                    heightSeries.drawMode |= Surface3DSeries.DrawSurface;
+                    text = "Hide Surface"
+                }
             }
+            //! [8]
         }
-        //! [8]
-    }
 
-    NewButton {
-        id: flatShadingToggle
-        anchors.top: surfaceToggle.bottom
-        width: surfaceToggle.width
-        text: "Show Flat"
-        enabled: surfaceSeries.flatShadingSupported
-        //! [2]
-        onClicked: {
-            if (surfaceSeries.flatShadingEnabled === true) {
-                surfaceSeries.flatShadingEnabled = false;
-                heightSeries.flatShadingEnabled = false;
-                text = "Show Flat"
-            } else {
-                surfaceSeries.flatShadingEnabled = true;
-                heightSeries.flatShadingEnabled = true;
-                text = "Show Smooth"
+        NewButton {
+            id: flatShadingToggle
+            Layout.maximumWidth: buttonMaximumWidth
+            Layout.fillWidth: true
+            Layout.minimumHeight: buttonMinimumHeight
+
+            text: "Show Flat"
+            enabled: surfaceSeries.flatShadingSupported
+            //! [2]
+            onClicked: {
+                if (surfaceSeries.flatShadingEnabled === true) {
+                    surfaceSeries.flatShadingEnabled = false;
+                    heightSeries.flatShadingEnabled = false;
+                    text = "Show Flat"
+                } else {
+                    surfaceSeries.flatShadingEnabled = true;
+                    heightSeries.flatShadingEnabled = true;
+                    text = "Show Smooth"
+                }
             }
+            //! [2]
         }
-        //! [2]
-    }
 
-    NewButton {
-        id: backgroundToggle
-        anchors.top: flatShadingToggle.bottom
-        width: flatShadingToggle.width
-        text: "Hide Background"
-        onClicked: {
-            if (surfaceplot.theme.backgroundEnabled === true) {
-                surfaceplot.theme.backgroundEnabled = false;
-                text = "Show Background"
-            } else {
-                surfaceplot.theme.backgroundEnabled = true;
-                text = "Hide Background"
+        NewButton {
+            id: backgroundToggle
+            Layout.maximumWidth: buttonMaximumWidth
+            Layout.fillWidth: true
+            Layout.minimumHeight: buttonMinimumHeight
+            text: "Hide Background"
+            onClicked: {
+                if (surfaceplot.theme.backgroundEnabled === true) {
+                    surfaceplot.theme.backgroundEnabled = false;
+                    text = "Show Background"
+                } else {
+                    surfaceplot.theme.backgroundEnabled = true;
+                    text = "Hide Background"
+                }
             }
         }
-    }
 
-    NewButton {
-        id: gridToggle
-        anchors.top: backgroundToggle.bottom
-        width: backgroundToggle.width
-        text: "Hide Grid"
-        onClicked: {
-            if (surfaceplot.theme.gridEnabled === true) {
-                surfaceplot.theme.gridEnabled = false;
-                text = "Show Grid"
-            } else {
-                surfaceplot.theme.gridEnabled = true;
-                text = "Hide Grid"
+        NewButton {
+            id: gridToggle
+            Layout.maximumWidth: buttonMaximumWidth
+            Layout.fillWidth: true
+            Layout.minimumHeight: buttonMinimumHeight
+            text: "Hide Grid"
+            onClicked: {
+                if (surfaceplot.theme.gridEnabled === true) {
+                    surfaceplot.theme.gridEnabled = false;
+                    text = "Show Grid"
+                } else {
+                    surfaceplot.theme.gridEnabled = true;
+                    text = "Hide Grid"
+                }
             }
         }
-    }
 
-    NewButton {
-        id: seriesToggle
-        anchors.top: gridToggle.bottom
-        width: gridToggle.width
-        text: "Switch to Item Model Series"
-        //! [3]
-        onClicked: {
-            if (surfaceplot.seriesList[0] === heightSeries) {
-                surfaceplot.axisY.max = 500.0
-                surfaceplot.seriesList = [surfaceSeries]
-                middleGradient.position = 0.25
-                text = "Switch to Height Map Series"
-            } else {
-                surfaceplot.axisY.max = 250.0
-                surfaceplot.seriesList = [heightSeries]
-                middleGradient.position = 0.50
-                text = "Switch to Item Model Series"
+        NewButton {
+            id: seriesToggle
+            Layout.maximumWidth: buttonMaximumWidth
+            Layout.fillWidth: true
+            Layout.minimumHeight: buttonMinimumHeight
+            text: "Switch to Item Model Series"
+            //! [3]
+            onClicked: {
+                if (surfaceplot.seriesList[0] === heightSeries) {
+                    surfaceplot.axisY.max = 500.0
+                    surfaceplot.seriesList = [surfaceSeries]
+                    middleGradient.position = 0.25
+                    text = "Switch to Height Map Series"
+                } else {
+                    surfaceplot.axisY.max = 250.0
+                    surfaceplot.seriesList = [heightSeries]
+                    middleGradient.position = 0.50
+                    text = "Switch to Item Model Series"
+                }
             }
+            //! [3]
         }
-        //! [3]
     }
 }
diff --git a/examples/qmlsurface/qml/qmlsurface/newbutton.qml b/examples/qmlsurface/qml/qmlsurface/newbutton.qml
index 895db183..e44c9d1a 100644
--- a/examples/qmlsurface/qml/qmlsurface/newbutton.qml
+++ b/examples/qmlsurface/qml/qmlsurface/newbutton.qml
@@ -18,6 +18,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.0
 
 Item {
     id: newbutton
@@ -26,17 +27,25 @@ Item {
 
     signal clicked
 
-    height: 80
+    implicitWidth: buttonText.implicitWidth + 5
+    implicitHeight: buttonText.implicitHeight + 10
 
     Button {
+        id: buttonText
         width: parent.width
         height: parent.height
-        Text {
-            id: buttonText
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-            anchors.fill: parent
+
+        style: ButtonStyle {
+            label: Component {
+                Text {
+                    text: buttonText.text
+                    clip: true
+                    wrapMode: Text.WordWrap
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.fill: parent
+                }
+            }
         }
         onClicked: newbutton.clicked()
     }