Welcome: Keep sidebar and headers static on scrolling

Task-number: QTCREATORBUG-12872
Change-Id: I8ab9a88203fcce60fa9f9cdf06369eb0c572a0bf
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@digia.com>

share/qtcreator/welcomescreen/develop.qml

@@ -29,43 +29,41 @@
 
 import QtQuick 2.1
 import widgets 1.0
+import QtQuick.Controls 1.2 as Controls
 
-Rectangle {
+
+Controls.ScrollView {
     id: rectangle1
-    width: parent.width
-    height: Math.max(sessions.height, recentProjects.height)
+
 
     Item {
         id: canvas
 
-        x: 12
-        y: 0
+        implicitWidth: childrenRect.width + 200
+        implicitHeight: childrenRect.height
 
-        anchors.bottomMargin: 0
-        anchors.fill: parent
-        anchors.topMargin: 0
-
-        RecentProjects {
-            x: 428
+        Button {
+            y: screenDependHeightDistance
+            text: qsTr("New Project")
+            anchors.left: sessionsTitle.left
+            onClicked: projectWelcomePage.newProject();
+            iconSource: "widgets/images/new.png"
 
-            id: recentProjects
+        }
 
-            anchors.leftMargin: 12
+        Button {
+            y: screenDependHeightDistance
+            text: qsTr("Open Project")
             anchors.left: recentProjectsTitle.left
-
-            anchors.top: recentProjectsTitle.bottom
-            anchors.topMargin: 20
-            anchors.right: parent.right
-            anchors.rightMargin: 60
-
-            model: projectList
+            onClicked: projectWelcomePage.openProject();
+            iconSource: "widgets/images/open.png"
         }
 
         NativeText {
             id: sessionsTitle
 
             x: 32
-            y: 128
+            y: screenDependHeightDistance + 77
 
             color: "#535353"
             text: qsTr("Sessions")
@@ -78,7 +76,7 @@ Rectangle {
             id: recentProjectsTitle
             x: 406
 
-            y: 128
+            y: screenDependHeightDistance + 77
             color: "#535353"
             text: qsTr("Recent Projects")
             anchors.left: sessionsTitle.right
@@ -88,11 +86,27 @@ Rectangle {
             font.pixelSize: 16
         }
 
+        RecentProjects {
+            x: screenDependLeftMargin
+
+            id: recentProjects
+
+            anchors.leftMargin: 12
+            anchors.left: recentProjectsTitle.left
+
+            anchors.top: recentProjectsTitle.bottom
+            anchors.topMargin: 20
+            anchors.right: parent.right
+            anchors.rightMargin: 60
+
+            model: projectList
+        }
+
         Item {
             id: actions
             x: pageCaption.x + pageCaption.textOffset
 
-            y: 295
+            y: screenDependHeightDistance + 244
             width: 140
             height: 70
 
@@ -100,22 +114,6 @@ Rectangle {
             anchors.top: sessions.bottom
         }
 
-        Button {
-            y: 51
-            text: qsTr("New Project")
-            anchors.left: sessionsTitle.left
-            onClicked: projectWelcomePage.newProject();
-            iconSource: "widgets/images/new.png"
-
-        }
-
-        Button {
-            y: 51
-            text: qsTr("Open Project")
-            anchors.left: recentProjectsTitle.left
-            onClicked: projectWelcomePage.openProject();
-            iconSource: "widgets/images/open.png"
-        }
 
         Sessions {
             id: sessions

share/qtcreator/welcomescreen/examples.qml

@@ -30,35 +30,9 @@
 import QtQuick 2.1
 import widgets 1.0
 
-Rectangle {
-    id: rectangle1
-    width: 1024
-    height: grid.contentHeight + 100
+Item {
 
-    CustomizedGridView {
-        id: grid
-        y: 82
-        height: grid.contentHeight
-        anchors.rightMargin: 38
-        anchors.leftMargin: 38
-        anchors.left: parent.left
-        anchors.right: parent.right
-        model: examplesModel
-    }
-
-    SearchBar {
-        id: searchBar
-
-        y: 52
-
-        anchors.left: comboBox.right
-        anchors.rightMargin: 52
-        anchors.right: parent.right
-        anchors.leftMargin: 18
-
-        placeholderText: qsTr("Search in Examples...")
-        onTextChanged: examplesModel.parseSearchString(text)
-    }
+    anchors.fill: parent
 
     ComboBox {
         id: comboBox
@@ -66,7 +40,7 @@ Rectangle {
         anchors.verticalCenter: searchBar.verticalCenter
 
         width: 200
-        anchors.leftMargin: 46
+        anchors.leftMargin: 30
         anchors.left: parent.left
         model: exampleSetModel
         textRole: "text"
@@ -89,4 +63,28 @@ Rectangle {
         }
     }
 
+    SearchBar {
+        id: searchBar
+
+        y: screenDependHeightDistance
+        anchors.left: comboBox.right
+        anchors.leftMargin: 18
+        anchors.rightMargin: 20
+        anchors.right: parent.right
+
+        placeholderText: qsTr("Search in Examples...")
+        onTextChanged: examplesModel.parseSearchString(text)
+    }
+
+    CustomizedGridView {
+        id: grid
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: searchBar.bottom
+        anchors.bottom: parent.bottom
+        anchors.topMargin: screenDependHeightDistance
+
+        model: examplesModel
+    }
 }

share/qtcreator/welcomescreen/tutorials.qml

@@ -30,33 +30,33 @@
 import QtQuick 2.1
 import widgets 1.0
 
-Rectangle {
-    id: rectangle1
-    width: 1024
-    height: grid.contentHeight + 100
+Item {
 
-    CustomizedGridView {
-        id: grid
-        anchors.rightMargin: 38
-        anchors.bottomMargin: 60
-        anchors.leftMargin: 38
-        anchors.topMargin: 82
-        anchors.fill: parent
-
-        model: tutorialsModel
-    }
+    anchors.fill: parent
 
     SearchBar {
         id: searchBar
 
-        y: 52
+        y: screenDependHeightDistance
 
         anchors.right: parent.right
-        anchors.rightMargin: 60
+        anchors.rightMargin: 20
         anchors.left: parent.left
-        anchors.leftMargin: 60
+        anchors.leftMargin: 30
 
         placeholderText: qsTr("Search in Tutorials...")
         onTextChanged: tutorialsModel.parseSearchString(text)
     }
+
+    CustomizedGridView {
+        id: grid
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: searchBar.bottom
+        anchors.bottom: parent.bottom
+        anchors.topMargin: screenDependHeightDistance
+
+        model: tutorialsModel
+    }
 }

share/qtcreator/welcomescreen/welcomescreen.qml

@@ -29,49 +29,42 @@
 
 import QtQuick 2.1
 import widgets 1.0
-import QtQuick.Controls 1.0
 
-ScrollView {
-    id: scrollView
+Item  {
+    id: root
 
     property var fonts: CustomFonts {}
     property var colors: CustomColors { }
 
-    flickableItem.pixelAligned: true
+    property int screenDependHeightDistance: Math.min(50, Math.max(16, height / 30))
 
-    Rectangle {
-        width: Math.max(920, scrollView.flickableItem.width - 30)
-        height: Math.max(loader.height, scrollView.flickableItem.height);
-
-        id: root
-
-        SideBar {
-            id: sideBar
-            model: pagesModel
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
+    SideBar {
+        id: sideBar
+        model: pagesModel
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
 
-        }
+    Rectangle {
+        id: splitter
+        color: "#737373"
+        width: 1
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
 
-        Rectangle {
-            color: "#737373"
-            width: 1
-            height: parent.height
+        anchors.left: sideBar.right
 
-            anchors.right: sideBar.right
-        }
+    }
 
-        QtObject {
-            id: tab
-            property int currentIndex: sideBar.currentIndex
-        }
+    PageLoader {
+        id: loader
 
-        PageLoader {
-            id: loader
-            model: pagesModel
-            anchors.left: sideBar.right
-            anchors.right: parent.right
-        }
+        model: pagesModel
+        currentIndex: sideBar.currentIndex
 
+        anchors.top: parent.top
+        anchors.left: splitter.right
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
     }
 }

share/qtcreator/welcomescreen/widgets/CustomizedGridView.qml

@@ -30,22 +30,23 @@
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 
-GridView {
-    x: Math.max((width - (cellWidth * columns)) / 2, 0);
-    id: gridView
-    interactive: false
-    cellHeight: 240
-    cellWidth: 216
-    property int columns:  Math.max(Math.floor(width / cellWidth), 1)
+ScrollView {
 
-    delegate: Loader {
-        property int delegateOffset: cellHeight * Math.floor(index / columns) + 100
-        property bool isVisible: delegateOffset > scrollView.flickableItem.contentY - cellHeight
-                                 && delegateOffset < scrollView.flickableItem.contentY + scrollView.flickableItem.height
-        onIsVisibleChanged: active = true
-        visible: isVisible
-        active: false
-        sourceComponent: Delegate {
+    property alias model: gridView.model
+
+    GridView {
+        id: gridView
+
+        anchors.fill: parent
+
+        anchors.leftMargin: 20
+        anchors.rightMargin: 20
+
+        interactive: false
+        cellHeight: 240
+        cellWidth: 216
+
+        delegate: Delegate {
             id: delegate
 
             property bool isHelpImage: model.imageUrl.search(/qthelp/)  != -1

share/qtcreator/welcomescreen/widgets/PageLoader.qml

@@ -33,25 +33,19 @@ Item {
     id: pageLoader
 
     property alias model: repeater.model
+    property int currentIndex: 0
 
-    height: repeater.height
 
     Repeater {
         id: repeater
-        height: itemAt(tab.currentIndex).height
+        anchors.fill: parent
+
         Loader {
             id: loader
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: item.height
-            property bool active: index === tab.currentIndex
-            property bool wasActive
-            onActiveChanged: {
-                if (active)
-                    wasActive = true;
-            }
-            visible:  active
-            source: wasActive ? pageLocation : ""
+            anchors.fill: parent
+
+            property bool isCurrentIndex: index === pageLoader.currentIndex
+            source: isCurrentIndex ? pageLocation : ""
         }
     }
 }

share/qtcreator/welcomescreen/widgets/ProjectItem.qml

@@ -31,11 +31,12 @@ import QtQuick 2.1
 
 Item {
     id: projectItem
-    width: projectList.width
+    width: childrenRect.width
     height: 32
 
     Rectangle {
         anchors.fill: parent
+        anchors.margins: -4
         color: "#f9f9f9"
         opacity: projectNameText.hovered ? 1 : 0
     }
@@ -55,8 +56,7 @@ Item {
         y: 2
         anchors.left: parent.left
         anchors.leftMargin: 7 + 12
-        anchors.right: parent.right
-        anchors.rightMargin: 4
+
         onClicked: projectWelcomePage.requestProject(filePath)
     }
 
@@ -64,12 +64,10 @@ Item {
         id: pathText
         y: 18
         color: "#6b6b6b"
-        anchors.right: parent.right
-        anchors.rightMargin: 12
+
         anchors.left: parent.left
         anchors.leftMargin: 7 + 12
         font: fonts.smallPath
-        elide: Text.ElideRight
         MouseArea {
             anchors.fill: parent
             hoverEnabled: true

share/qtcreator/welcomescreen/widgets/SessionItem.qml

@@ -33,11 +33,12 @@ Item {
     x: 5
     id: delegate
     property bool expanded: false
-    height: column.height
+    height: columns.height
+    width: columns.width
     property alias name: text.text
 
     Column {
-        id: column
+        id: columns
         spacing: 4
 
         Row {

share/qtcreator/welcomescreen/widgets/SideBar.qml

@@ -32,19 +32,20 @@ import QtQuick.Window 2.1
 import QtQuick.Layouts 1.0
 
 ColumnLayout {
+    id: root
+
     spacing: 0
 
     property alias currentIndex: tabs.currentIndex
-
     property alias model: tabs.model
 
-    id: root
-
     Item {
+        id: modeArea
+
         z: 1
-        width: tabs.width + 16 * 2
-        height: tabs.height + 51 * 2
         Layout.fillWidth: true
+        Layout.preferredWidth: tabs.width + 16 * 2
+        Layout.preferredHeight: tabs.height + screenDependHeightDistance * 2
 
         Image {
             fillMode: Image.Tile
@@ -55,7 +56,10 @@ ColumnLayout {
         Tabs {
             anchors.verticalCenter: parent.verticalCenter
             x: 16
+            width: Math.max(modeArea.width - 16 * 2, implicitWidth)
+
             id: tabs
+            spacing: Math.round((screenDependHeightDistance / count) + 10)
         }
 
         Rectangle {
@@ -66,6 +70,7 @@ ColumnLayout {
             anchors.bottomMargin: 0
             height: 1
         }
+
         Rectangle {
             color: "#737373"
             anchors.left: parent.left
@@ -75,6 +80,7 @@ ColumnLayout {
             height: 1
             opacity: 0.6
         }
+
         Rectangle {
             color: "#737373"
             anchors.left: parent.left
@@ -88,62 +94,59 @@ ColumnLayout {
 
     Rectangle {
         color: "#ebebeb"
+
         Layout.fillWidth: true
-        Layout.minimumHeight: 320
+        Layout.preferredWidth: innerColumn.width + 20
         Layout.fillHeight: true
-        Layout.minimumWidth: innerColumn.width
 
         ColumnLayout {
             id: innerColumn
-            spacing: 14
+
             x: 12
 
+            spacing: 4
+
+            property int spacerHeight: screenDependHeightDistance - 14
+
             Item {
-                height: 24
-                width: parent.width
+                Layout.preferredHeight: innerColumn.spacerHeight
             }
 
             NativeText {
                 text: qsTr("New to Qt?")
                 font.pixelSize: 18
-                font.bold: false
             }
 
-            Item {
-                NativeText {
-                    id: gettingStartedText
-                    anchors.fill: parent
-                    anchors.rightMargin: 24
-                    text: qsTr("Learn how to develop your own applications and explore Qt Creator.")
-                    font.pixelSize: 12
-                    wrapMode: Text.WordWrap
-                }
-                height: gettingStartedText.implicitHeight
-                implicitWidth: parent.width
+            NativeText {
+                id: gettingStartedText
+
+                Layout.preferredWidth: innerColumn.width
+
+                text: qsTr("Learn how to develop your own applications and explore Qt Creator.")
+                font.pixelSize: 12
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
 
             Item {
-                height: 24
-                width: parent.width
+                Layout.preferredHeight: innerColumn.spacerHeight
             }
 
-            Item {
-                width: gettingStartedButton.width + 28
-                Button {
-                    x: 4
-                    id: gettingStartedButton
-                    text: qsTr("Get Started Now")
-                    onClicked: gettingStarted.openHelp("qthelp://org.qt-project.qtcreator/doc/index.html")
-                }
+            Button {
+                id: gettingStartedButton
+
+                x: 4
+
+                text: qsTr("Get Started Now")
+                onClicked: gettingStarted.openHelp("qthelp://org.qt-project.qtcreator/doc/index.html")
             }
 
             Item {
-                height: 18
-                width: parent.width
+                Layout.preferredHeight: innerColumn.spacerHeight
             }
 
             ColumnLayout {
                 spacing: 16
+
                 IconAndLink {
                     iconSource: "images/icons/qt_account.png"
                     title: qsTr("Qt Account")
@@ -171,6 +174,5 @@ ColumnLayout {
                 }
             }
         }
-
     }
 }

share/qtcreator/welcomescreen/widgets/Tabs.qml

@@ -34,8 +34,7 @@ import QtQuick.Layouts 1.1
 ColumnLayout {
     id: customTab
     property alias model: repeater.model
-    spacing: 16
-
+    property int count: repeater.count
     signal itemChanged
     property int currentIndex: -1