WelcomePage: Taking text sizes into account for layout

Buttons do not have a fixed width of 160px anymore
and the sidebar layout becomes dynamic.

Task-number: QTCREATORBUG-12108
Task-number: QTCREATORBUG-12091
Change-Id: I940b4b7c9c79a312766501559147abb85833b78f
Reviewed-by: Alessandro Portale <alessandro.portale@digia.com>

share/qtcreator/welcomescreen/widgets/Button.qml

@@ -38,7 +38,10 @@ Button {
     Component {
         id: touchStyle
         ButtonStyle {
+            padding.left: button.iconSource != "" ? 38 : 14
+            padding.right: 14
             background: Item {
+                anchors.fill: parent
 
                 Image {
                     id: icon
@@ -51,8 +54,8 @@ Button {
                     visible: button.iconSource != ""
                 }
 
-                implicitHeight: 30
                 implicitWidth: 160
+                implicitHeight: 30
 
                 Rectangle {
                     anchors.fill: parent
@@ -117,7 +120,6 @@ Button {
             }
 
             label: Text {
-                    x: button.iconSource != "" ? 38 : 14
                     renderType: Text.NativeRendering
                     verticalAlignment: Text.AlignVCenter
                     text: button.text

share/qtcreator/welcomescreen/widgets/SideBar.qml

@@ -28,6 +28,7 @@
 ****************************************************************************/
 
 import QtQuick 2.1
+import QtQuick.Window 2.1
 import QtQuick.Layouts 1.0
 
 ColumnLayout {
@@ -37,13 +38,13 @@ ColumnLayout {
 
     property alias model: tabs.model
 
-    property int __width: tabs.width + 16 * 2
     id: root
 
     Item {
         z: 1
-        width: __width
+        width: tabs.width + 16 * 2
         height: tabs.height + 51 * 2
+        Layout.fillWidth: true
 
         Image {
             fillMode: Image.Tile
@@ -87,13 +88,14 @@ ColumnLayout {
 
     Rectangle {
         color: "#ebebeb"
-        width: root.__width
+        Layout.fillWidth: true
         Layout.minimumHeight: 320
         Layout.fillHeight: true
+        Layout.minimumWidth: innerColumn.width
 
-        Column {
+        ColumnLayout {
+            id: innerColumn
             spacing: 14
-            width: parent.width - 16 * 2
             x: 12
 
             Item {
@@ -111,7 +113,7 @@ ColumnLayout {
                 text: qsTr("Learn how to develop your own applications and explore Qt Creator.")
                 font.pixelSize: 12
                 wrapMode: Text.WordWrap
-                width: parent.width
+                Layout.maximumWidth: Screen.pixelDensity * 60
             }
 
             Item {
@@ -119,17 +121,22 @@ ColumnLayout {
                 width: parent.width
             }
 
+            Item {
+                width: gettingStartedButton.width + 24
                 Button {
+                    x: 4
+                    id: gettingStartedButton
                     text: qsTr("Get Started Now")
                     onClicked: gettingStarted.openHelp("qthelp://org.qt-project.qtcreator/doc/index.html")
                 }
+            }
 
             Item {
                 height: 18
                 width: parent.width
             }
 
-            Column {
+            ColumnLayout {
                 x: 14
                 spacing: 16
                 IconAndLink {