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 @@ ...@@ -29,43 +29,41 @@
import QtQuick 2.1 import QtQuick 2.1
import widgets 1.0 import widgets 1.0
import QtQuick.Controls 1.2 as Controls
Rectangle {
Controls.ScrollView {
id: rectangle1 id: rectangle1
width: parent.width
height: Math.max(sessions.height, recentProjects.height)
Item { Item {
id: canvas id: canvas
x: 12 implicitWidth: childrenRect.width + 200
y: 0 implicitHeight: childrenRect.height
anchors.bottomMargin: 0 Button {
anchors.fill: parent y: screenDependHeightDistance
anchors.topMargin: 0 text: qsTr("New Project")
anchors.left: sessionsTitle.left
RecentProjects { onClicked: projectWelcomePage.newProject();
x: 428 iconSource: "widgets/images/new.png"
id: recentProjects }
anchors.leftMargin: 12 Button {
y: screenDependHeightDistance
text: qsTr("Open Project")
anchors.left: recentProjectsTitle.left anchors.left: recentProjectsTitle.left
onClicked: projectWelcomePage.openProject();
anchors.top: recentProjectsTitle.bottom iconSource: "widgets/images/open.png"
anchors.topMargin: 20
anchors.right: parent.right
anchors.rightMargin: 60
model: projectList
} }
NativeText { NativeText {
id: sessionsTitle id: sessionsTitle
x: 32 x: 32
y: 128 y: screenDependHeightDistance + 77
color: "#535353" color: "#535353"
text: qsTr("Sessions") text: qsTr("Sessions")
...@@ -78,7 +76,7 @@ Rectangle { ...@@ -78,7 +76,7 @@ Rectangle {
id: recentProjectsTitle id: recentProjectsTitle
x: 406 x: 406
y: 128 y: screenDependHeightDistance + 77
color: "#535353" color: "#535353"
text: qsTr("Recent Projects") text: qsTr("Recent Projects")
anchors.left: sessionsTitle.right anchors.left: sessionsTitle.right
...@@ -88,11 +86,27 @@ Rectangle { ...@@ -88,11 +86,27 @@ Rectangle {
font.pixelSize: 16 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 { Item {
id: actions id: actions
x: pageCaption.x + pageCaption.textOffset x: pageCaption.x + pageCaption.textOffset
y: 295 y: screenDependHeightDistance + 244
width: 140 width: 140
height: 70 height: 70
...@@ -100,22 +114,6 @@ Rectangle { ...@@ -100,22 +114,6 @@ Rectangle {
anchors.top: sessions.bottom 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 { Sessions {
id: sessions id: sessions
......
...@@ -30,35 +30,9 @@ ...@@ -30,35 +30,9 @@
import QtQuick 2.1 import QtQuick 2.1
import widgets 1.0 import widgets 1.0
Rectangle { Item {
id: rectangle1
width: 1024
height: grid.contentHeight + 100
CustomizedGridView { anchors.fill: parent
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)
}
ComboBox { ComboBox {
id: comboBox id: comboBox
...@@ -66,7 +40,7 @@ Rectangle { ...@@ -66,7 +40,7 @@ Rectangle {
anchors.verticalCenter: searchBar.verticalCenter anchors.verticalCenter: searchBar.verticalCenter
width: 200 width: 200
anchors.leftMargin: 46 anchors.leftMargin: 30
anchors.left: parent.left anchors.left: parent.left
model: exampleSetModel model: exampleSetModel
textRole: "text" textRole: "text"
...@@ -89,4 +63,28 @@ Rectangle { ...@@ -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 @@ ...@@ -30,33 +30,33 @@
import QtQuick 2.1 import QtQuick 2.1
import widgets 1.0 import widgets 1.0
Rectangle { Item {
id: rectangle1
width: 1024
height: grid.contentHeight + 100
CustomizedGridView { anchors.fill: parent
id: grid
anchors.rightMargin: 38
anchors.bottomMargin: 60
anchors.leftMargin: 38
anchors.topMargin: 82
anchors.fill: parent
model: tutorialsModel
}
SearchBar { SearchBar {
id: searchBar id: searchBar
y: 52 y: screenDependHeightDistance
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 60 anchors.rightMargin: 20
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 60 anchors.leftMargin: 30
placeholderText: qsTr("Search in Tutorials...") placeholderText: qsTr("Search in Tutorials...")
onTextChanged: tutorialsModel.parseSearchString(text) 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 @@ ...@@ -29,49 +29,42 @@
import QtQuick 2.1 import QtQuick 2.1
import widgets 1.0 import widgets 1.0
import QtQuick.Controls 1.0
ScrollView { Item {
id: scrollView id: root
property var fonts: CustomFonts {} property var fonts: CustomFonts {}
property var colors: CustomColors { } property var colors: CustomColors { }
flickableItem.pixelAligned: true property int screenDependHeightDistance: Math.min(50, Math.max(16, height / 30))
Rectangle { SideBar {
width: Math.max(920, scrollView.flickableItem.width - 30) id: sideBar
height: Math.max(loader.height, scrollView.flickableItem.height); model: pagesModel
anchors.top: parent.top
id: root 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 { anchors.left: sideBar.right
color: "#737373"
width: 1
height: parent.height
anchors.right: sideBar.right }
}
QtObject { PageLoader {
id: tab id: loader
property int currentIndex: sideBar.currentIndex
}
PageLoader { model: pagesModel
id: loader currentIndex: sideBar.currentIndex
model: pagesModel
anchors.left: sideBar.right
anchors.right: parent.right
}
anchors.top: parent.top
anchors.left: splitter.right
anchors.right: parent.right
anchors.bottom: parent.bottom
} }
} }
...@@ -30,22 +30,23 @@ ...@@ -30,22 +30,23 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 import QtQuick.Controls 1.0
GridView { ScrollView {
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)
delegate: Loader { property alias model: gridView.model
property int delegateOffset: cellHeight * Math.floor(index / columns) + 100
property bool isVisible: delegateOffset > scrollView.flickableItem.contentY - cellHeight GridView {
&& delegateOffset < scrollView.flickableItem.contentY + scrollView.flickableItem.height id: gridView
onIsVisibleChanged: active = true
visible: isVisible anchors.fill: parent
active: false
sourceComponent: Delegate { anchors.leftMargin: 20
anchors.rightMargin: 20
interactive: false
cellHeight: 240
cellWidth: 216
delegate: Delegate {
id: delegate id: delegate
property bool isHelpImage: model.imageUrl.search(/qthelp/) != -1 property bool isHelpImage: model.imageUrl.search(/qthelp/) != -1
......
...@@ -33,25 +33,19 @@ Item { ...@@ -33,25 +33,19 @@ Item {
id: pageLoader id: pageLoader
property alias model: repeater.model property alias model: repeater.model
property int currentIndex: 0
height: repeater.height
Repeater { Repeater {
id: repeater id: repeater
height: itemAt(tab.currentIndex).height anchors.fill: parent
Loader { Loader {
id: loader id: loader
anchors.left: parent.left anchors.fill: parent
anchors.right: parent.right
height: item.height property bool isCurrentIndex: index === pageLoader.currentIndex
property bool active: index === tab.currentIndex source: isCurrentIndex ? pageLocation : ""
property bool wasActive
onActiveChanged: {
if (active)
wasActive = true;
}
visible: active
source: wasActive ? pageLocation : ""
} }
} }
} }
...@@ -31,11 +31,12 @@ import QtQuick 2.1 ...@@ -31,11 +31,12 @@ import QtQuick 2.1
Item { Item {
id: projectItem id: projectItem
width: projectList.width width: childrenRect.width
height: 32 height: 32
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: -4
color: "#f9f9f9" color: "#f9f9f9"
opacity: projectNameText.hovered ? 1 : 0 opacity: projectNameText.hovered ? 1 : 0
} }
...@@ -55,8 +56,7 @@ Item { ...@@ -55,8 +56,7 @@ Item {
y: 2 y: 2
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 7 + 12 anchors.leftMargin: 7 + 12
anchors.right: parent.right
anchors.rightMargin: 4
onClicked: projectWelcomePage.requestProject(filePath) onClicked: projectWelcomePage.requestProject(filePath)
} }
...@@ -64,12 +64,10 @@ Item { ...@@ -64,12 +64,10 @@ Item {
id: pathText id: pathText
y: 18 y: 18
color: "#6b6b6b" color: "#6b6b6b"
anchors.right: parent.right
anchors.rightMargin: 12
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 7 + 12 anchors.leftMargin: 7 + 12
font: fonts.smallPath font: fonts.smallPath
elide: Text.ElideRight
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
......
...@@ -33,11 +33,12 @@ Item { ...@@ -33,11 +33,12 @@ Item {
x: 5 x: 5
id: delegate id: delegate
property bool expanded: false property bool expanded: false
height: column.height height: columns.height
width: columns.width
property alias name: text.text property alias name: text.text
Column { Column {
id: column id: columns
spacing: 4 spacing: 4
Row { Row {
......
...@@ -32,19 +32,20 @@ import QtQuick.Window 2.1 ...@@ -32,19 +32,20 @@ import QtQuick.Window 2.1
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
ColumnLayout { ColumnLayout {
id: root
spacing: 0 spacing: 0
property alias currentIndex: tabs.currentIndex property alias currentIndex: tabs.currentIndex
property alias model: tabs.model property alias model: tabs.model
id: root
Item { Item {
id: modeArea
z: 1 z: 1
width: tabs.width + 16 * 2
height: tabs.height + 51 * 2
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: tabs.width + 16 * 2
Layout.preferredHeight: tabs.height + screenDependHeightDistance * 2
Image { Image {
fillMode: Image.Tile fillMode: Image.Tile
...@@ -55,7 +56,10 @@ ColumnLayout { ...@@ -55,7 +56,10 @@ ColumnLayout {
Tabs { Tabs {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
x: 16 x: 16
width: Math.max(modeArea.width - 16 * 2, implicitWidth)
id: tabs id: tabs
spacing: Math.round((screenDependHeightDistance / count) + 10)
} }