Commit f3c62005 authored by Marco Bubke's avatar Marco Bubke Committed by hjk
Browse files

Welcome: Keep sidebar and headers static on scrolling



Task-number: QTCREATORBUG-12872
Change-Id: I8ab9a88203fcce60fa9f9cdf06369eb0c572a0bf
Reviewed-by: default avatarThomas Hartmann <Thomas.Hartmann@digia.com>
parent 4481925b
......@@ -29,43 +29,41 @@
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
RecentProjects {
x: 428
Button {
y: screenDependHeightDistance
text: qsTr("New Project")
anchors.left: sessionsTitle.left
onClicked: projectWelcomePage.newProject();
iconSource: "widgets/images/new.png"
id: recentProjects
}
anchors.leftMargin: 12
Button {
y: screenDependHeightDistance
text: qsTr("Open Project")
anchors.left: recentProjectsTitle.left
anchors.top: recentProjectsTitle.bottom
anchors.topMargin: 20
anchors.right: parent.right
anchors.rightMargin: 60
model: projectList
onClicked: projectWelcomePage.openProject();
iconSource: "widgets/images/open.png"
}
NativeText {
id: sessionsTitle
x: 32
y: 128
y: screenDependHeightDistance + 77
color: "#535353"
text: qsTr("Sessions")
......@@ -78,7 +76,7 @@ Rectangle {
id: recentProjectsTitle
x: 406
y: 128
y: screenDependHeightDistance + 77
color: "#535353"
text: qsTr("Recent Projects")
anchors.left: sessionsTitle.right
......@@ -88,11 +86,27 @@ Rectangle {
font.pixelSize: 16
}
RecentProjects {
x: screenDependLeftMargin
id: recentProjects
anchors.leftMargin: 12
anchors.left: recentProjectsTitle.left
anchors.top: recentProjectsTitle.bottom
anchors.topMargin: 20
anchors.right: parent.right
anchors.rightMargin: 60
model: projectList
}
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
......
......@@ -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
}
}
......@@ -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
}
}
......@@ -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))
Rectangle {
width: Math.max(920, scrollView.flickableItem.width - 30)
height: Math.max(loader.height, scrollView.flickableItem.height);
id: root
SideBar {
id: sideBar
model: pagesModel
anchors.top: parent.top
anchors.bottom: parent.bottom
SideBar {
id: sideBar
model: pagesModel
anchors.top: parent.top
anchors.bottom: parent.bottom
}
}
Rectangle {
id: splitter
color: "#737373"
width: 1
anchors.top: parent.top
anchors.bottom: parent.bottom
Rectangle {
color: "#737373"
width: 1
height: parent.height
anchors.left: sideBar.right
anchors.right: sideBar.right
}
}
QtObject {
id: tab
property int currentIndex: sideBar.currentIndex
}
PageLoader {
id: loader
PageLoader {
id: loader
model: pagesModel
anchors.left: sideBar.right
anchors.right: parent.right
}
model: pagesModel
currentIndex: sideBar.currentIndex
anchors.top: parent.top
anchors.left: splitter.right
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
......@@ -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
......
......@@ -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 : ""
}
}
}
......@@ -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
......
......@@ -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 {
......
......@@ -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
}
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
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 {
height: 24
width: parent.width
Layout.preferredHeight: innerColumn.spacerHeight
}
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")
}
Button {
id: gettingStartedButton
x: 4
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 {
}
}
}
}
}
......@@ -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
......