new design of the welcomepage

Design done by: Virva Auvinen

Change-Id: I94ca75f50d3924088bc7d9be6cc884975480bcac
Reviewed-by: Alessandro Portale <alessandro.portale@nokia.com>
Reviewed-by: Eike Ziller <eike.ziller@nokia.com>

share/qtcreator/welcomescreen/develop.qml

@@ -31,61 +31,137 @@
 **************************************************************************/
 
 import QtQuick 1.1
-import "widgets" as Widgets
-import qtcomponents 1.0 as Components
+import "widgets"
 
-Item {
-    id: floater
+Rectangle {
+    id: rectangle1
+    width: 900
+    height: 600
+
+    PageCaption {
+        id: pageCaption
+
+        x: 32
+        y: 8
+
+        anchors.rightMargin: 16
+        anchors.right: parent.right
+        anchors.leftMargin: 16
+        anchors.left: parent.left
 
-    Image {
-        source: "qrc:welcome/images/welcomebg.png"
-        anchors.fill: parent
-        opacity: 0.8
+        caption: qsTr("Develop")
     }
 
-    width: 920
-    height: 600
+    Item {
+        id: canvas
 
-    property int proposedWidth: 920
-    property int proposedHeight: 600
-
-    Rectangle {
-
-        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 - 6
-                }
+        x: 12
+        y: 0
+        width: 1024
 
-            }
+        anchors.bottomMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.top: parent.top
+        anchors.topMargin: 0
+
+        RecentSessions {
+            id: recentSessions
+
+            x: 87
+            y: 144
+            width: 274
+
+            anchors.right: recentlyUsedSessions.right
+            anchors.rightMargin: -89
+            anchors.top: recentlyUsedSessions.bottom
+            anchors.topMargin: 20
+
+            model: sessionList
+        }
+
+        RecentProjects {
+            x: 406
+            y: 144
+            width: 481
+            height: 416
+
+            anchors.top: recentlyUsedProjects.bottom
+            anchors.topMargin: 20
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 40
+            anchors.right: parent.right
+            anchors.rightMargin: 137
+
+            model: projectList
+        }
+
+        Text {
+            id: recentlyUsedSessions
+
+            x: pageCaption.x + pageCaption.textOffset
+            y: 105
+
+            color: "#535353"
+            text: qsTr("Recently used sessions")
+            font.pixelSize: 16
+            font.family: "Helvetica"
+            font.bold: true
+        }
+
+        Text {
+            id: recentlyUsedProjects
+            x: 406
+
+            y: 105
+            color: "#535353"
+            text: qsTr("Recently used Projects")
+            anchors.left: recentlyUsedSessions.right
+            anchors.leftMargin: 134
+            font.bold: true
+            font.family: "Helvetica"
+            font.pixelSize: 16
         }
-        BorderImage {
-            anchors.top: scrollArea.top
-            height: root.height + 2 * margin
-            width: 1
-            x: recentProjects.x - margin
+
+        Item {
+            id: actions
+
+            x: 90
+            y: 296
+            width: 140
+            height: 70
+
+            anchors.topMargin: 42
+            anchors.top: recentSessions.bottom
+
+            LinkedText {
+                id: openProject
+                x: 51
+                y: 49
+                text: qsTr("Open Project")
+                onClicked: welcomeMode.openProject();
+            }
+
+            LinkedText {
+                id: createProject
+                x: 51
+                y: 18
+                text: qsTr("Create Project")
+                onClicked: welcomeMode.newProject();
+            }
+
+            Image {
+                id: icon02
+                x: 2
+                y: 32
+                source: "widgets/images/icons/openIcon.png"
+            }
+
+            Image {
+                id: icon01
+                x: 0
+                y: 0
+                source: "widgets/images/icons/createIcon.png"
+            }
         }
     }
 }

share/qtcreator/welcomescreen/dummydata/examplesModel.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (qt-info@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 qt-info@nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.0
+
+ListModel {
+    ListElement {
+        name: "Main Windows"
+        descriptionData: "All the standard features of application main windows are provided by Qt. Main windows can have pull down menus, tool bars, and dock windows. These separate forms of user input are unified in an integrated action system that also supports keyboard shortcuts and accelerator keys in menu items."
+        imageSource: "images/mockup/mainwindow-examples.png"
+    }
+
+    ListElement {
+        name: "Layouts"
+        description: "t uses a layout-based approach to widget management. Widgets are arranged in the optimal positions in windows based on simple layout rules, leading to a consistent look and feel. Custom layouts can be used to provide more control over the positions and sizes of child widgets."
+        imageSource: "images/mockup/layout-examples.png"
+    }
+
+    ListElement {
+        name: "Item Views"
+        description: "tem views are widgets that typically display data sets. Qt 4's model/view framework lets you handle large data sets by separating the underlying data from the way it is represented to the user, and provides support for customized rendering through the use of delegates."
+        imageSource: "images/mockup/itemview-examples.png"
+    }
+
+    ListElement {
+        name: "Drag and Drop"
+        description: "Qt supports native drag and drop on all platforms via an extensible MIME-based system that enables applications to send data to each other in the most appropriate formats. Drag and drop can also be implemented for internal use by applications."
+        imageSource: "images/mockup/draganddrop-examples.png"
+    }
+    ListElement {
+        name: "Threading and Concurrent Programming"
+        description: "Qt 4 makes it easier than ever to write multithreaded applications. More classes have been made usable from non-GUI threads, and the signals and slots mechanism can now be used to communicate between threads. The QtConcurrent namespace includes a collection of classes and functions for straightforward concurrent programming."
+        imageSource: "images/mockup/thread-examples.png"
+    }
+
+    ListElement {
+        name: "OpenGL and OpenVG Examples"
+        description: "Qt provides support for integration with OpenGL implementations on all platforms, giving developers the opportunity to display hardware accelerated 3D graphics alongside a more conventional user interface. Qt provides support for integration with OpenVG implementations on platforms with suitable drivers."
+        imageSource: "images/mockup/opengl-examples.png"
+    }
+
+    ListElement {
+        name: "Network"
+        description: "Qt is provided with an extensive set of network classes to support both client-based and server side network programming."
+        imageSource: "images/mockup/network-examples.png"
+    }
+
+    ListElement {
+        name: "Qt Designer"
+        description: "Qt Designer is a capable graphical user interface designer that lets you create and configure forms without writing code. GUIs created with Qt Designer can be compiled into an application or created at run-time."
+        imageSource: "images/mockup/designer-examples.png"
+    }
+    ListElement {
+        name: "Qt Script"
+        description: "Qt is provided with a powerful embedded scripting environment through the QtScript classes."
+        imageSource: "images/mockup/qtscript-examples.png"
+    }
+
+    ListElement {
+        name: "Desktop"
+        description: "Qt provides features to enable applications to integrate with the user's preferred desktop environment. Features such as system tray icons, access to the desktop widget, and support for desktop services can be used to improve the appearance of applications and take advantage of underlying desktop facilities."
+        imageSource: "images/mockup/desktop-examples.png"
+    }
+
+    ListElement {
+        name: "Caption"
+        description: "Description"
+        imageSource: "image/mockup/penguin.png"
+    }
+
+    ListElement {
+        name: "Caption"
+        description: "Description"
+        imageSource: "images/mockup/penguin.png"
+    }
+}

share/qtcreator/welcomescreen/widgets/LineEdit.qml → share/qtcreator/welcomescreen/dummydata/pagesModel.qml

@@ -30,23 +30,23 @@
 **
 **************************************************************************/
 
-import QtQuick 1.1
-import qtcomponents.custom 1.0 as Custom
-
-
-Custom.TextField {
-    id: root
-    leftMargin: 6
-    rightMargin: 6
-    topMargin: 6
-    bottomMargin: 6
-    property url backgroundSource: "qrc:welcome/images/lineedit.png"
-
-    background: BorderImage {
-        anchors.fill: parent
-        source: backgroundSource
-        border.left: 5; border.top: 5
-        border.right: 5; border.bottom: 5
+import QtQuick 1.0
 
+ListModel {
+    ListElement {
+        title: "Getting Started"
+        pageLocation: "../gettingstarted.qml"
+    }
+    ListElement {
+        title: "Develop"
+        pageLocation: "../develop.qml"
+    }
+    ListElement {
+        title: "Examples"
+        pageLocation: "../examples.qml"
+    }
+    ListElement {
+        title: "Tutorials"
+        pageLocation: "../tutorials.qml"
     }
 }

share/qtcreator/welcomescreen/dummydata/projectList.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (qt-info@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 qt-info@nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.0
+
+ListModel {
+    ListElement {
+        prettyFilePath: "showing some path aka the link..."
+        displayName: "Project name 01"
+    }
+    ListElement {
+        prettyFilePath: "showing some path aka link..."
+        displayName: "Project name 02"
+    }
+    ListElement {
+        prettyFilePath: "showing some ... path aka link..."
+        displayName: "Project name 03"
+    }
+    ListElement {
+        prettyFilePath: "showing some ... path aka link..."
+        displayName: "Project name 04"
+    }
+    ListElement {
+        prettyFilePath: "showing some ... path aka link..."
+        displayName: "Project name 05"
+    }
+    ListElement {
+        prettyFilePath: "showing some ... path aka link test..."
+        displayName: "Project name 06"
+    }
+    ListElement {
+        prettyFilePath: "showing some ... path aka link... blup"
+        displayName: "Project name 07"
+    }
+    ListElement {
+        prettyFilePath: "showing some ...  bla path aka link..."
+        displayName: "Project name 08"
+    }
+}

share/qtcreator/welcomescreen/dummydata/sessionList.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (qt-info@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 qt-info@nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.0
+
+ListModel {
+    ListElement {
+        sessionName: "Session 01"
+    }
+    ListElement {
+        sessionName: "Session 02"
+    }
+    ListElement {
+        sessionName: "Session 03"
+    }
+    ListElement {
+        sessionName: "Session 04"
+    }
+    ListElement {
+        sessionName: "Session 05"
+    }
+    ListElement {
+        sessionName: "Session 07"
+    }
+    ListElement {
+        sessionName: "Session 08"
+    }
+}

share/qtcreator/welcomescreen/dummydata/tutorialsModel.qml

+/**************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (qt-info@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 qt-info@nokia.com.
+**
+**************************************************************************/
+
+import QtQuick 1.0
+
+ListModel {
+    ListElement {
+        name: "Main Windows"
+        description: "All the standard features of application main windows are provided by Qt. Main windows can have pull down menus, tool bars, and dock windows. These separate forms of user input are unified in an integrated action system that also supports keyboard shortcuts and accelerator keys in menu items."
+        imageSource: "images/mockup/mainwindow-examples.png"
+        isVideo: false
+    }
+
+    ListElement {
+        name: "Layouts"
+        description: "t uses a layout-based approach to widget management. Widgets are arranged in the optimal positions in windows based on simple layout rules, leading to a consistent look and feel. Custom layouts can be used to provide more control over the positions and sizes of child widgets."
+        imageSource: "images/mockup/layout-examples.png"
+        isVideo: false
+    }
+
+    ListElement {
+        name: "Some Video"
+        description: "tem views are widgets that typically display data sets. Qt 4's model/view framework lets you handle large data sets by separating the underlying data from the way it is represented to the user, and provides support for customized rendering through the use of delegates."
+        imageSource: "images/mockup/"
+        isVideo: true
+        videoLength: "2:20"
+    }
+
+    ListElement {
+        name: "Drag and Drop"
+        description: "Qt supports native drag and drop on all platforms via an extensible MIME-based system that enables applications to send data to each other in the most appropriate formats. Drag and drop can also be implemented for internal use by applications."
+        imageSource: "images/mockup/draganddrop-examples.png"
+        isVideo: false
+    }
+    ListElement {
+        name: "Some Video"
+        description: "Qt 4 makes it easier than ever to write multithreaded applications. More classes have been made usable from non-GUI threads, and the signals and slots mechanism can now be used to communicate between threads. The QtConcurrent namespace includes a collection of classes and functions for straightforward concurrent programming."
+        imageSource: "images/mockup/"
+        isVideo: true
+        videoLength: "6:40"
+    }
+
+    ListElement {
+        name: "Some Video"
+        description: "Qt provides support for integration with OpenGL implementations on all platforms, giving developers the opportunity to display hardware accelerated 3D graphics alongside a more conventional user interface. Qt provides support for integration with OpenVG implementations on platforms with suitable drivers."
+        imageSource: ""
+        isVideo: true
+        videoLength: "7:40"
+    }
+
+    ListElement {
+        name: "Some Video"
+        description: "Qt is provided with an extensive set of network classes to support both client-based and server side network programming."
+        imageSource: "images/mockup/"
+        isVideo: true
+        videoLength: "2:30"
+    }
+
+    ListElement {
+        name: "Qt Designer"
+        description: "Qt Designer is a capable graphical user interface designer that lets you create and configure forms without writing code. GUIs created with Qt Designer can be compiled into an application or created at run-time."
+        imageSource: "images/mockup/designer-examples.png"
+        isVideo: false
+    }
+    ListElement {
+        name: "Qt Script"
+        description: "Qt is provided with a powerful embedded scripting environment through the QtScript classes."
+        imageSource: "images/mockup/qtscript-examples.png"
+        isVideo: false
+    }
+
+    ListElement {
+        name: "Desktop"
+        description: "Qt provides features to enable applications to integrate with the user's preferred desktop environment. Features such as system tray icons, access to the desktop widget, and support for desktop services can be used to improve the appearance of applications and take advantage of underlying desktop facilities."
+        imageSource: "images/mockup/desktop-examples.png"
+        isVideo: false
+    }
+
+    ListElement {
+        name: "Caption"
+        description: "Description"
+        imageSource: "image/mockup/penguin.png"
+        isVideo: false
+    }
+
+    ListElement {
+        name: "Caption"
+        description: "Description"
+        imageSource: "images/mockup/penguin.png"
+        isVideo: false
+    }
+}

share/qtcreator/welcomescreen/examples.qml

@@ -30,13 +30,100 @@
 **
 **************************************************************************/
 
-import QtQuick 1.1
-import "widgets" as Widgets
+import QtQuick 1.0
+import "widgets"
 
-Item {
-    Widgets.ExampleBrowser {
-        model: examplesModel
+Rectangle {
+    id: rectangle1
+    width: 1024
+    height: Math.min(920, parent.height - y)
+
+    PageCaption {