Welcome: Keep sidebar and headers static on scrolling

Task-number: QTCREATORBUG-12872 Change-Id: I8ab9a88203fcce60fa9f9cdf06369eb0c572a0bf Reviewed-by: Thomas Hartmann <Thomas.Hartmann@digia.com>
2014-09-25 15:05:23 +02:00
parent 4481925b1a
commit f3c6200513
10 changed files with 195 additions and 211 deletions
--- a/share/qtcreator/welcomescreen/develop.qml
+++ b/share/qtcreator/welcomescreen/develop.qml
@@ -29,24 +29,65 @@

 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
+        Button {
+            y: screenDependHeightDistance
+            text: qsTr("New Project")
+            anchors.left: sessionsTitle.left
+            onClicked: projectWelcomePage.newProject();
+            iconSource: "widgets/images/new.png"
+
+        }
+
+        Button {
+            y: screenDependHeightDistance
+            text: qsTr("Open Project")
+            anchors.left: recentProjectsTitle.left
+            onClicked: projectWelcomePage.openProject();
+            iconSource: "widgets/images/open.png"
+        }
+
+        NativeText {
+            id: sessionsTitle
+
+            x: 32
+            y: screenDependHeightDistance + 77
+
+            color: "#535353"
+            text: qsTr("Sessions")
+            font.pixelSize: 16
+            font.family: "Helvetica"
+            font.bold: true
+        }
+
+        NativeText {
+            id: recentProjectsTitle
+            x: 406
+
+            y: screenDependHeightDistance + 77
+            color: "#535353"
+            text: qsTr("Recent Projects")
+            anchors.left: sessionsTitle.right
+            anchors.leftMargin: 280
+            font.bold: true
+            font.family: "Helvetica"
+            font.pixelSize: 16
+        }

        RecentProjects {
-            x: 428
+            x: screenDependLeftMargin

            id: recentProjects

@@ -61,38 +102,11 @@ Rectangle {
            model: projectList
        }

-        NativeText {
-            id: sessionsTitle
-
-            x: 32
-            y: 128
-
-            color: "#535353"
-            text: qsTr("Sessions")
-            font.pixelSize: 16
-            font.family: "Helvetica"
-            font.bold: true
-        }
-
-        NativeText {
-            id: recentProjectsTitle
-            x: 406
-
-            y: 128
-            color: "#535353"
-            text: qsTr("Recent Projects")
-            anchors.left: sessionsTitle.right
-            anchors.leftMargin: 280
-            font.bold: true
-            font.family: "Helvetica"
-            font.pixelSize: 16
-        }
-
        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
--- a/share/qtcreator/welcomescreen/examples.qml
+++ b/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
+    }
 }
--- a/share/qtcreator/welcomescreen/tutorials.qml
+++ b/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
+    }
 }
--- a/share/qtcreator/welcomescreen/welcomescreen.qml
+++ b/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))
+
+    SideBar {
+        id: sideBar
+        model: pagesModel
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }

    Rectangle {
-        width: Math.max(920, scrollView.flickableItem.width - 30)
-        height: Math.max(loader.height, scrollView.flickableItem.height);
+        id: splitter
+        color: "#737373"
+        width: 1
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom

-        id: root
-
-        SideBar {
-            id: sideBar
-            model: pagesModel
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-
-        }
-
-        Rectangle {
-            color: "#737373"
-            width: 1
-            height: parent.height
-
-            anchors.right: sideBar.right
-        }
-
-        QtObject {
-            id: tab
-            property int currentIndex: sideBar.currentIndex
-        }
-
-        PageLoader {
-            id: loader
-            model: pagesModel
-            anchors.left: sideBar.right
-            anchors.right: parent.right
-        }
+        anchors.left: sideBar.right

    }
+
+    PageLoader {
+        id: loader
+
+        model: pagesModel
+        currentIndex: sideBar.currentIndex
+
+        anchors.top: parent.top
+        anchors.left: splitter.right
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
 }
--- a/share/qtcreator/welcomescreen/widgets/CustomizedGridView.qml
+++ b/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
--- a/share/qtcreator/welcomescreen/widgets/PageLoader.qml
+++ b/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 : ""
        }
    }
 }
--- a/share/qtcreator/welcomescreen/widgets/ProjectItem.qml
+++ b/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
--- a/share/qtcreator/welcomescreen/widgets/SessionItem.qml
+++ b/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 {
--- a/share/qtcreator/welcomescreen/widgets/SideBar.qml
+++ b/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
+            }
+
+            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 {
-                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
+                Layout.preferredHeight: innerColumn.spacerHeight
+            }
+
+            Button {
+                id: gettingStartedButton
+
+                x: 4
+
+                text: qsTr("Get Started Now")
+                onClicked: gettingStarted.openHelp("qthelp://org.qt-project.qtcreator/doc/index.html")
            }

            Item {
-                height: 24
-                width: parent.width
-            }
-
-            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")
-                }
-            }
-
-            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 {
                }
            }
        }
-
    }
 }
--- a/share/qtcreator/welcomescreen/widgets/Tabs.qml
+++ b/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