WelcomePage: polishing the welcome page

Major visual upgrade and refactoring.
I also added dummydata and a qmlproject file.

Change-Id: I5ebc6dfb4718a37bb20766669272b85bc9316316
Reviewed-on: http://codereview.qt-project.org/5708

Reviewed-by: hjk <qthjk@ovi.com>

share/qtcreator/welcomescreen/develop.qml

@@ -30,43 +30,119 @@
 **
 **************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 1.1
 import "widgets" as Widgets
 import qtcomponents 1.0 as Components
 
 Item {
-    id: root
-    property int margin: 8
+    id: floater
 
-    Components.ScrollArea {
-        id: scrollArea
-        anchors.fill:  parent
-        anchors.margins: - margin
-        frame: false
-        Item {
-            id: baseitem
-            height: Math.max(recentSessions.height, recentProjects.height)
-            width: root.width
-            Widgets.RecentSessions {
-                id: recentSessions
-                width: Math.floor(root.width / 2.5)
-                anchors.left: parent.left
+    Image {
+        source: "qrc:welcome/images/welcomebg.png"
+        anchors.fill: parent
+        opacity: 0.8
+    }
+
+    property int proposedWidth: 920
+    property int proposedHeight: 600
+
+    Rectangle {
+        id: rectangle1
+        height: 26
+        opacity: 0.9
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#cff7f7f7"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#04f7f7f7"
             }
-            Widgets.RecentProjects {
-                id: recentProjects
-                anchors.left:  recentSessions.right
-                anchors.right: parent.right
-                anchors.rightMargin: scrollArea.verticalScrollBar.visible ? 0 :
-                                         -scrollArea.verticalScrollBar.width
+        }
+        anchors.rightMargin: -1
+        anchors.topMargin: -4
+        anchors.right: root.right
+        anchors.left: root.left
+        anchors.top: root.bottom
+        Rectangle {
+            width: 1
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#a41c1b1b"
+                }
+
+                GradientStop {
+                    position: 1
+                    color: "#0a1c1b1b"
+                }
             }
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+
+        }
+        Rectangle {
+            width: 1
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#a41c1b1b"
+                }
+
+                GradientStop {
+                    position: 1
+                    color: "#0a000000"
+                }
+            }
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.top: parent.top
 
         }
     }
+
     Rectangle {
-        anchors.top: scrollArea.top
-        height: root.height + 2 * margin
-        width: 1
-        color: "#ccc"
-        x: recentProjects.x - margin
+
+        width: Math.min(floater.width, floater.proposedWidth)
+        height: Math.min(floater.height, floater.proposedHeight)
+        id: root
+        property int margin: 8
+        anchors.centerIn: floater
+
+        Components.ScrollArea {
+            id: scrollArea
+            anchors.fill:  parent
+            anchors.margins: - margin
+            frame: true
+            Item {
+                id: baseitem
+                height: Math.max(recentSessions.height, recentProjects.height)
+                width: root.width - 20
+                Widgets.RecentSessions {
+                    id: recentSessions
+                    width: Math.floor(root.width / 2.5)
+                    anchors.left: parent.left
+                }
+                Widgets.RecentProjects {
+                    id: recentProjects
+                    anchors.left:  recentSessions.right
+                    anchors.right: parent.right
+                    anchors.rightMargin: scrollArea.verticalScrollBar.visible ? 0 :
+                                                                                -scrollArea.verticalScrollBar.width - 2
+                }
+
+            }
+        }
+        BorderImage {
+            anchors.top: scrollArea.top
+            height: root.height + 2 * margin
+            width: 1
+            x: recentProjects.x - margin
+        }
     }
 }

share/qtcreator/welcomescreen/examples.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.nokia.com)
+**
+**
+** GNU Lesser General Public License Usage
+**
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this file.
+** Please review the following information to ensure the GNU Lesser General
+** Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** Other Usage
+**
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at info@qt.nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.1
+import "widgets" as Widgets
+
+Item {
+    Widgets.ExampleBrowser {
+        model: examplesModel
+        anchors.fill: parent
+        anchors.margins: 8
+    }
+}

share/qtcreator/welcomescreen/gettingstarted.qml

@@ -30,7 +30,13 @@
 **
 **************************************************************************/
 
-import QtQuick 1.0
+import QtQuick 1.1
 import "widgets" as Widgets
 
-Widgets.ExampleBrowser {}
+Item {
+    Widgets.ExampleBrowser {
+        model: tutorialsModel
+        anchors.fill: parent
+        anchors.margins: 8
+    }
+}

share/qtcreator/welcomescreen/welcomescreen.qml

@@ -36,6 +36,8 @@ import qtcomponents 1.0 as Components
 
 Rectangle {
     id: root
+    width: 1024
+    height: 768
     color: "white"
     // work around the fact that we can't use
     // a property alias to welcomeMode.activePlugin
@@ -43,44 +45,32 @@ Rectangle {
     onCurrentChanged: welcomeMode.activePlugin = current
     Component.onCompleted: current = welcomeMode.activePlugin
 
-    BorderImage {
-        id: inner_background
-        Image {
-            id: header;
-            source: "qrc:welcome/images/center_frame_header.png";
-            anchors.verticalCenter: parent.verticalCenter;
-            anchors.horizontalCenter: parent.horizontalCenter;
-            anchors.topMargin: 2
-        }
-        anchors.top: root.top
-        source: "qrc:welcome/images/background_center_frame_v2.png"
-        width: parent.width
-        height: 60
-        border.right: 2
-        border.left: 2
-        border.top: 2
-        border.bottom: 10
-    }
 
     LinksBar {
         id: navigationAndDevLinks
         property alias current: root.current
+        anchors.topMargin: -1
         anchors.top: inner_background.bottom
-        anchors.left: news.right
-        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.right: news.left
         anchors.bottomMargin: 4
-        anchors.topMargin: -2
         model: tabs.model
     }
 
-    Rectangle {
-        color: "#eee"
+    Item {
+        Image {
+            source: "qrc:welcome/images/welcomebg.png"
+            anchors.fill: parent
+            opacity: 0.5
+        }
+
+        anchors.right: parent.right
         id: news
         opacity: 0.7
         anchors.top: navigationAndDevLinks.top
-        anchors.bottom: feedback.top
-        anchors.left: parent.left
-        width: 270
+        anchors.bottom: parent.bottom
+        width: 220
+
         FeaturedAndNewsListing {
             anchors.fill: parent
         }
@@ -100,31 +90,48 @@ Rectangle {
             color: "#ccc"
         }
         Rectangle{
-            anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            width:1
+            width: 1
             color: "black"
+            anchors.left: parent.left
         }
     }
 
     TabWidget {
         id: tabs
         property int current: root.current
-        model: pagesModel
-        anchors.top: navigationAndDevLinks.bottom
-        anchors.bottom: feedback.top
-        anchors.left: news.right
-        anchors.right: parent.right
-        anchors.leftMargin: 0
         anchors.rightMargin: 0
-        anchors.margins: 4
+        anchors.leftMargin: 0
+        model: pagesModel
+        anchors.top: feedback.bottom
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: news.left
+        anchors.margins: 0
     }
 
     Feedback {
         id: feedback
-        anchors.bottom: parent.bottom
-        width: parent.width
+        height: 38
+        anchors.top: navigationAndDevLinks.bottom
+        anchors.left: parent.left
+        anchors.right: news.left
+        searchVisible: tabs.currentHasSearchBar
     }
 
+    BorderImage {
+        id: inner_background
+        x: 0
+        y: 0
+        anchors.top: root.top
+        source: "qrc:welcome/images/background_center_frame_v2.png"
+        width: parent.width
+        height: 0
+        anchors.topMargin: 0
+        border.right: 2
+        border.left: 2
+        border.top: 2
+        border.bottom: 10
+    }
 }

share/qtcreator/welcomescreen/welcomescreen.qmlproject

+/* File generated by Qt Creator, version 2.3.81 */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "welcomescreen.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+
+    importPaths: ["../../../lib/qtcreator/"]
+
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ "../exampleplugin" ]
+}

share/qtcreator/welcomescreen/widgets/Button.qml

@@ -38,19 +38,39 @@ Custom.Button {
 
     width: Math.max(50, labelItem.contentsWidth+20)
     height: 32
+    property url pressedSource: "qrc:welcome/images/btn_26_pressed.png"
+    property url hoverSource: "qrc:welcome/images/btn_26_hover.png"
+    property url backgroundSource: "qrc:welcome/images/btn_26.png"
 
-    background: BorderImage {
-        source: {
-            if (pressed || checked )
-                return "qrc:/welcome/images/btn_26_pressed.png"
-            else
-                if (containsMouse)
-                    return "qrc:/welcome/images/btn_26_hover.png"
-                else
-                    return "qrc:/welcome/images/btn_26.png"
-        }
 
+    background: BorderImage {
+        id: borderImage
+        source: button.backgroundSource
         border { left: 5; right: 5; top: 5; bottom: 5 }
+
+        property bool isPressedOrChecked: (button.pressed || button.checked)
+
+        property bool isHovered: !borderImage.isPressedOrChecked && !button.containsMouse
+
+        states: [
+            State {
+                name: "pressed"
+                when: borderImage.isPressedOrChecked
+                PropertyChanges {
+                    target: borderImage
+                    source:button.pressedSource
+                }
+            },
+            State {
+                when: borderImage.isHovered
+                name: "hovered"
+                PropertyChanges {
+                    target: borderImage
+                    source:button.hoverSource
+                }
+            }
+
+        ]
     }
 
     label: Item {

share/qtcreator/welcomescreen/widgets/Caption.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.nokia.com)
+**
+**
+** GNU Lesser General Public License Usage
+**
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this file.
+** Please review the following information to ensure the GNU Lesser General
+** Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** Other Usage
+**
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at info@qt.nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.1
+
+Item {
+    id: root
+    height:  48
+    property alias text: text.text
+    anchors.left: parent.left
+    anchors.leftMargin: 20
+    anchors.right: parent.right
+    anchors.rightMargin: 20
+    Rectangle {
+        id: caption
+        height: 32
+        radius: 3
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#e6e6e6"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#e4e4e4"
+            }
+        }
+        smooth: true
+        border.color: "#a4a4a4"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        Rectangle {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 1
+            anchors.leftMargin: 2
+            anchors.rightMargin: 2
+            height: 1
+        }
+
+        Text {
+            id: text
+            anchors.margins: 8
+            color: "#19196f"
+            text: "model.name"
+            anchors.fill: parent
+            wrapMode: Text.WordWrap
+            styleColor: "#807b7b"
+            style: Text.Normal
+            font.pixelSize: 14
+            font.bold: true
+            textFormat: Text.PlainText
+            maximumLineCount: 1
+            elide: Text.ElideRight
+        }
+        states: [
+            State {
+                name: "hover"
+
+                PropertyChanges {
+                    target: caption
+                    height: 48
+                }
+                PropertyChanges {
+                    target: text
+                    maximumLineCount: 2
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                SequentialAnimation {
+                    PropertyAnimation {
+                        target: caption
+                        property: "height"
+                        duration: 40
+                    }
+                    PropertyAction {
+                        target: text
+                        property: "maximumLineCount"
+                    }
+                }
+            }
+        ]
+    }
+
+    MouseArea {
+        id: mouseArea
+        x: 20
+        y: 0
+        anchors.fill: parent
+        anchors.bottomMargin: 12
+        hoverEnabled: true
+        onEntered: {
+            if (text.truncated) {
+                caption.state = "hover"
+            }
+            root.parent.state = "hover"
+        }
+        onExited:{
+            caption.state = ""
+            root.parent.state = ""
+        }
+    }
+}

share/qtcreator/welcomescreen/widgets/CheckBox.qml

-import QtQuick 1.0
+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.nokia.com)
+**
+**
+** GNU Lesser General Public License Usage
+**
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this file.
+** Please review the following information to ensure the GNU Lesser General
+** Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** Other Usage
+**
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at info@qt.nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.1
 import qtcomponents.custom 1.0 as Custom
 
 Custom.CheckBox{
@@ -7,15 +39,16 @@ Custom.CheckBox{
     property string hint
     height:20
     width: Math.max(110, backgroundItem.rowWidth)
-
+    property url backgroundSource: "qrc:welcome/images/lineedit.png";
+    property url checkSource: "qrc:welcome/images/checked.png";
     background: Item {
         property int rowWidth: row.width
         Row {
             id: row
             anchors.verticalCenter: parent.verticalCenter
-            spacing: 4
+            spacing: 6
             BorderImage {
-                source: "qrc:welcome/images/lineedit.png";
+                source: checkBox.backgroundSource
                 width: 16;
                 height: 16;
                 border.left: 4;
@@ -23,13 +56,14 @@ Custom.CheckBox{
                 border.top: 4;