Commit f5024718 authored by Thomas Hartmann's avatar Thomas Hartmann Committed by hjk

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/5708Reviewed-by: default avatarhjk <qthjk@ovi.com>
parent 9893f049
......@@ -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
}
}
}
/**************************************************************************
**
** 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
}
}
......@@ -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
}
}
......@@ -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
}
}
/* 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" ]
}
......@@ -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 {
......
/**************************************************************************
**
** 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 = ""
}
}
}
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;
border.bottom: 4
Image {
source: "qrc:welcome/images/checked.png";
source: checkBox.checkSource
width: 10; height: 10
anchors.centerIn: parent
visible: checkbox.checked
}
}
Text {
anchors.verticalCenter: parent.verticalCenter
text: checkbox.text
}
}
......
......@@ -30,116 +30,75 @@
**
**************************************************************************/
import QtQuick 1.0
import QtQuick 1.1