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>

3 files changed, 59 insertions, 42 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()
     }