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>

2 files changed, 129 insertions, 104 deletions

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()
     }