Commit c6342265 authored by Jens Bache-Wiig's avatar Jens Bache-Wiig Committed by Daniel Molkentin
Browse files

Welcome page makeover

Change-Id: I4077960ed029eaf3c48164ea44448325b506e402
Reviewed-on: http://codereview.qt.nokia.com/1570

Reviewed-by: default avatarQt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: default avatarDaniel Molkentin <daniel.molkentin@nokia.com>
parent e30da00c
......@@ -48,6 +48,9 @@ FocusScope {
property alias verticalValue: vscrollbar.value
property alias horizontalValue: hscrollbar.value
property alias horizontalScrollBar: hscrollbar
property alias verticalScrollBar: vscrollbar
default property alias data: content.data
property int contentY
......
......@@ -36,33 +36,21 @@ import components 1.0 as Components
Item {
id: root
property int margin: 10
Components.ScrollArea {
id: scrollArea
anchors.fill: parent
frame: false
Item {
height: Math.max(recentSessions.height + manageSessionsButton.height + margin,
recentProjects.height)
width: root.width
height: Math.max(recentSessions.height, recentProjects.height)
width: root.width-20
Widgets.RecentSessions {
id: recentSessions
width: parent.width / 3 - margin
}
Widgets.Button {
id: manageSessionsButton
anchors.top: recentSessions.bottom
anchors.topMargin: margin
anchors.left: recentSessions.left
text: qsTr("Manage Sessions...")
onClicked: projectWelcomePage.manageSessions()
width: parent.width / 2
}
Widgets.RecentProjects {
id: recentProjects
x: parent.width / 3 + margin
width: parent.width - x
x: parent.width / 2
width: parent.width / 2
}
}
}
......
......@@ -35,86 +35,86 @@ import "widgets"
Rectangle {
id: root
color: "#F2F2F2"
smooth: true
color: "white"
// work around the fact that we can't use
// a property alias to welcomeMode.activePlugin
property int current: 0
onCurrentChanged: welcomeMode.activePlugin = current
Component.onCompleted: current = welcomeMode.activePlugin
Item {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: feedback.top
anchors.margins: 10
Item {
id: news
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.rightMargin: 5
width: 270
Rectangle {
anchors.fill: parent
border.color: "#36295B7F"
border.width: 1
color: "#B3FFFFFF"
}
FeaturedAndNewsListing {
anchors.fill: parent
anchors.margins: 8
}
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
}
Image {
id: tabFrame
source: "qrc:welcome/images/welcomebg.png"
smooth: true
Rectangle {
anchors.fill: parent
border.color: "#36295B7F"
border.width: 1
color: "#20FFFFFF"
}
LinksBar {
id: navigationAndDevLinks
property alias current: root.current
anchors.top: inner_background.bottom
anchors.left: parent.left
anchors.bottomMargin: 4
anchors.topMargin: -2
width: parent.width
model: tabs.model
tabBarWidth: width
}
Rectangle {
color:"#eee"
id: news
opacity: 0.7
anchors.top: navigationAndDevLinks.bottom
anchors.bottom: feedback.top
anchors.left: parent.left
width: 270
FeaturedAndNewsListing {
anchors.fill: parent
}
Rectangle{
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: news.right
width:1
color: "#aaa"
}
Rectangle{
anchors.right: parent.right
anchors.leftMargin: 5
LinksBar {
id: linksBar
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
property alias current: root.current
model: tabs.model
}
Rectangle {
anchors.fill: linksBar
anchors.bottomMargin: 1
opacity: 1
border.color: "#4D295B7F"
border.width: 1
color: "#00000000"
}
TabWidget {
id: tabs
property int current: root.current
model: pagesModel
anchors.top: linksBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 10
}
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 1
width:1
color: "white"
}
}
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
}
Feedback {
id: feedback
anchors.bottom: parent.bottom
......
......@@ -31,50 +31,47 @@
**************************************************************************/
import Qt 4.7
import "../components/custom" as Custom
Custom.Button {
id: button
BorderImage {
property string text
property string image
property int iconSize : innerImg.sourceSize.height
signal clicked;
id: root
source: "qrc:/welcome/images/btn_26.png"
height: innerImg.height + 16
width: Math.max(100, labelItem.contentsWidth+20)
height: 32
border.left: 5; border.top: 5
border.right: 5; border.bottom: 5
background: BorderImage {
source: {
if (pressed)
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"
}
border { left: 5; right: 5; top: 5; bottom: 5 }
Image{
id: innerImg
height: root.iconSize
width: root.iconSize
anchors.verticalCenter: label.verticalCenter
anchors.right: label.left
anchors.rightMargin: 4
visible: root.image != ""
source: root.image
}
label: Item {
property int contentsWidth : row.width
Row {
id: row
spacing: 4
anchors.centerIn: parent
property int contentsWidth : row.width
Image {
id: image
source: iconSource
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.Stretch //mm Image should shrink if button is too small, depends on QTBUG-14957
}
Text {
id:text
color: textColor
anchors.verticalCenter: parent.verticalCenter
text: button.text
horizontalAlignment: Text.Center
}
}
Text {
id: label;
anchors.left: innerImg.right
anchors.right: parent.right
text: root.text
}
Keys.onSpacePressed:clicked()
MouseArea { id: mouseArea; anchors.fill: parent; hoverEnabled: true; onClicked: root.clicked() }
states: [
State {
id: pressedState; when: mouseArea.pressed;
PropertyChanges { target: root; source: "qrc:/welcome/images/btn_26_pressed.png" }
},
State {
id: hoverState; when: mouseArea.containsMouse
PropertyChanges { target: root; source: "qrc:/welcome/images/btn_26_hover.png" }
}
]
}
......@@ -35,21 +35,30 @@ import components 1.0 as Components
Item {
id: exampleBrowserRoot
Item {
Rectangle {
color:"#f4f4f4"
id : lineEditRoot
width: parent.width
height: lineEdit.height
height: lineEdit.height + 6
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottomMargin: - 8
anchors.leftMargin: - 8
LineEdit {
Behavior on width { NumberAnimation{} }
Components.TextField {
placeholderText: !checkBox.checked ? qsTr("Search in Tutorials") : qsTr("Search in Tutorials, Examples and Demos")
focus: true
id: lineEdit
width: lineEditRoot.width - checkBox.width - 20 - tagFilterButton.width
anchors.left: parent.left
anchors.leftMargin:4
anchors.verticalCenter: parent.verticalCenter
width: lineEditRoot.width - checkBox.width - 24 - tagFilterButton.width
onTextChanged: examplesModel.filterRegExp = RegExp('.*'+text, "im")
}
CheckBox {
Components.CheckBox {
id: checkBox
text: qsTr("Show Examples and Demos")
checked: false
......@@ -60,15 +69,14 @@ Item {
onCheckedChanged: examplesModel.showTutorialsOnly = !checked;
}
Button {
Components.Button {
id: tagFilterButton
property string tag
Behavior on width { NumberAnimation{} }
Behavior on opacity { NumberAnimation{} }
onTagChanged: { examplesModel.filterTag = tag; examplesModel.updateFilter() }
anchors.leftMargin: 6
anchors.left: checkBox.right
anchors.verticalCenter: lineEdit.verticalCenter
visible: !examplesModel.showTutorialsOnly
opacity: !examplesModel.showTutorialsOnly ? 1 : 0
text: tag === "" ? qsTr("Filter by Tag") : qsTr("Tag Filter: %1").arg(tag)
onClicked: {
tagBrowserLoader.source = "TagBrowser.qml"
......@@ -78,22 +86,40 @@ Item {
}
Components.ScrollArea {
id: scrollArea
anchors.topMargin: lineEditRoot.height+12
anchors.bottomMargin: lineEditRoot.height - 8
anchors.margins:-8
anchors.fill: parent
clip: true
frame: false
Column {
Repeater {
id: repeater
model: examplesModel
delegate: ExampleDelegate {
width: scrollArea.width-20;
property int count: repeater.count
}
delegate: ExampleDelegate { width: scrollArea.width }
}
}
Component.onCompleted: verticalScrollBar.anchors.bottomMargin = -(scrollArea.anchors.bottomMargin + 8)
}
Rectangle{
anchors.bottom: scrollArea.bottom
height:4
anchors.left: scrollArea.left
anchors.right: scrollArea.right
anchors.rightMargin: scrollArea.verticalScrollBar.width
width:parent.width
gradient: Gradient{
GradientStop{position:1 ; color:"#10000000"}
GradientStop{position:0 ; color:"#00000000"}
}
Rectangle{
height:1
color:"#ccc"
anchors.bottom: parent.bottom
width:parent.width
}
}
Loader {
id: tagBrowserLoader
anchors.fill: parent
......
......@@ -31,16 +31,27 @@
**************************************************************************/
import QtQuick 1.0
import components 1.0 as Components
Rectangle {
id: root
height: 130
height: Math.max(image.height-20, description.paintedHeight) + 68
color: "#00ffffff"
radius: 6
clip: true
Components.QStyleItem { id: styleItem; cursor: "pointinghandcursor"; anchors.fill: parent }
Item {
visible: parent.state=="hover"
anchors.fill: parent
Rectangle{
height: 1
color: "#eee"
anchors.top: parent.top
width:parent.width
}
Rectangle {
height: 1
color: "#eee"
anchors.bottom: parent.bottom
width:parent.width
}
}
Text {
id: title
......@@ -50,7 +61,9 @@ Rectangle {
anchors.topMargin: 10
text: model.name
font.bold: true
font.pixelSize: 16
font.pixelSize: 14
elide: Text.ElideRight
}
RatingBar { id: rating; anchors.top: parent.top; anchors.topMargin: 10; anchors.right: parent.right; anchors.rightMargin: 10; rating: model.difficulty; visible: model.difficulty !== 0 }
......@@ -59,9 +72,8 @@ Rectangle {
property bool hideImage : model.imageUrl === "" || status === Image.Error
id: image
anchors.top: title.bottom
anchors.left: parent.left
anchors.topMargin: 10
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 30
width: hideImage ? 0 : 90
height: hideImage ? 0 : 66
asynchronous: true
......@@ -69,43 +81,27 @@ Rectangle {
source: model.imageUrl !== "" ? "image://helpimage/" + encodeURI(model.imageUrl) : ""
}
Item {
Text {
id: description
anchors.left: image.right
anchors.right: parent.right
anchors.rightMargin: 10
anchors.leftMargin: image.hideImage ? 0 : 10
anchors.left: parent.left
anchors.right: image.left
anchors.leftMargin: 10
anchors.top: rating.bottom
anchors.topMargin: 6
anchors.bottom: bottomRow.top
anchors.bottomMargin: 6
clip: true
Text {
clip: true
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
wrapMode: Text.WordWrap
text: model.description
}
wrapMode: Text.WordWrap
text: model.description
color:"#444"
height: 80
}
Row {
id: bottomRow
anchors.left: image.right;
anchors.leftMargin: image.hideImage ? 0 : 10
anchors.topMargin: 10
anchors.bottomMargin: 10
id: tagLine;
anchors.bottomMargin: 20
anchors.bottom: parent.bottom
spacing: 4
Text { text: qsTr("Tags:"); font.bold: true; }
Text { text: model.tags.join(", "); color: "grey" }
}
Rectangle {
visible: count-1 !== index
height: 1
anchors {left: parent.left; bottom: parent.bottom; right: parent.right }
color: "darkgrey"
anchors.left: parent.left
anchors.leftMargin: 10
anchors.rightMargin: 26
Text { id: labelText; text: "Tags: " ; color: "#999"; font.pixelSize: 11}
Text { text: model.tags.join(", "); color: "#bbb"; font.pixelSize: 11}
}
MouseArea {
......@@ -122,13 +118,7 @@ Rectangle {
onExited: parent.state = ""
}
states: [ State { name: "hover"; PropertyChanges { target: root; color: "#5effffff" } } ]
transitions:
Transition {
from: ""
to: "hover"
reversible: true
ColorAnimation { duration: 100; easing.type: Easing.OutQuad }
}
states: [ State { name: "hover"; PropertyChanges { target: root; color: "#f9f9f9" } } ]
}
......@@ -36,15 +36,14 @@ import components 1.0 as Components
Item {
InsetText {
id: text
anchors.horizontalCenter: parent.horizontalCenter
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 10
horizontalAlignment: Text.AlignHCenter
anchors.margins: 14
horizontalAlignment: Text.AlignLeft
text: qsTr("Featured News")
// mainColor: "#44A51C"
mainColor: "#074C1C"
font.bold: true
font.pointSize: 16
font.pointSize: 18
}
ListModel {
......@@ -64,9 +63,7 @@ Item {
anchors.top: text.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: text.height
clip: true
anchors.margins: 16
}
}
......@@ -33,60 +33,60 @@
import QtQuick 1.0
import components 1.0 as Components
BorderImage {
Rectangle {
id: inner_background
height: openProjectButton.height + 10
source: "qrc:welcome/images/background_center_frame_v2.png"
border.left: 2
border.right: 2
height: 32
Rectangle { color: "#4D295B7F"; width: parent.width; height: 1; anchors.top: parent.top; anchors.left: parent.left }
gradient: Gradient{
GradientStop{color: "#eee" ; position: 0}
GradientStop{color: "#bbb" ; position: 1}
}
Components.QStyleItem { id: styleItem; visible: false }
Rectangle { color: "#444"; width: parent.width; height: 1; anchors.top: parent.top; anchors.left: parent.left }
Rectangle { color: "white"; width: parent.width; height: 1; anchors.top: parent.top; anchors.topMargin: 1 ; anchors.left: parent.left }
// whitelist
property bool _hasDesktopTheme: welcomeMode.platform() === "linux"
Button {
id: feedbackButton
text: qsTr("Feedback")
iconSource: "qrc:welcome/images/feedback_arrow.png"
height: 32
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.margins: 5
onClicked: welcomeMode.sendFeedback()
}