summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAleix Pol <[email protected]>2017-02-16 12:29:23 +0100
committerAleix Pol <[email protected]>2017-02-16 12:29:23 +0100
commitea811437d6e7a0370783a579eca2e8b8c9ec095c (patch)
tree1ebba0e02e72891e0bae83adb016d4e043b1893e
parent6926530ac08766e91f61af5e0c27aad59d13ffc3 (diff)
Iterate page headers
Instead of using a tiny weird thing upon scroll, collapse the header into a smaller version.
-rw-r--r--discover/qml/ApplicationsListPage.qml8
-rw-r--r--discover/qml/BrowsingPage.qml13
-rw-r--r--discover/qml/InstalledPage.qml7
-rw-r--r--discover/qml/PageHeader.qml129
-rw-r--r--discover/qml/SourcesPage.qml23
-rw-r--r--discover/qml/UpdatesPage.qml21
6 files changed, 80 insertions, 121 deletions
diff --git a/discover/qml/ApplicationsListPage.qml b/discover/qml/ApplicationsListPage.qml
index 61417a0..e1fdc04 100644
--- a/discover/qml/ApplicationsListPage.qml
+++ b/discover/qml/ApplicationsListPage.qml
@@ -41,6 +41,7 @@ DiscoverPage {
property alias listHeader: apps.header
property bool compact: false
property bool canNavigate: true
+ readonly property Item view: apps
readonly property alias subcategories: appsModel.subcategories
title: category ? category.name : ""
@@ -60,14 +61,11 @@ DiscoverPage {
}
}
+ headerPositioning: ListView.OverlayHeader
header: CategoryDisplay {
category: appsModel.filteredCategory
search: appsModel.search
- anchors {
- left: parent.left
- right: parent.right
- }
- z: 5000
+ view: apps
}
model: ResourcesProxyModel {
id: appsModel
diff --git a/discover/qml/BrowsingPage.qml b/discover/qml/BrowsingPage.qml
index 2e3a8a2..ac763f7 100644
--- a/discover/qml/BrowsingPage.qml
+++ b/discover/qml/BrowsingPage.qml
@@ -17,7 +17,7 @@
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import QtQuick 2.1
+import QtQuick 2.4
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import org.kde.discover 1.0
@@ -42,13 +42,12 @@ DiscoverPage
}
ListView {
- header: CategoryDisplay {
- anchors {
- left: parent.left
- right: parent.right
- }
- category: null
+ id: browsingView
+
+ headerPositioning: ListView.OverlayHeader
+ header: PageHeader {
background: "qrc:/banners/coffee.jpg"
+ view: browsingView
}
model: FeaturedModel {}
spacing: Kirigami.Units.gridUnit
diff --git a/discover/qml/InstalledPage.qml b/discover/qml/InstalledPage.qml
index c686af1..d642dad 100644
--- a/discover/qml/InstalledPage.qml
+++ b/discover/qml/InstalledPage.qml
@@ -16,12 +16,7 @@ ApplicationsListPage {
canNavigate: false
listHeader: PageHeader {
- width: parent.width
background: "qrc:/banners/installedcrop.jpg"
-
- Item {
- Layout.fillWidth: true
- height: Kirigami.Units.largeSpacing
- }
+ view: page.view
}
}
diff --git a/discover/qml/PageHeader.qml b/discover/qml/PageHeader.qml
index ea43039..bcc89c0 100644
--- a/discover/qml/PageHeader.qml
+++ b/discover/qml/PageHeader.qml
@@ -24,12 +24,15 @@ import QtGraphicalEffects 1.0
import org.kde.discover.app 1.0
import org.kde.kirigami 2.0 as Kirigami
-ColumnLayout {
+Rectangle {
id: root
readonly property QtObject _page: findPage()
property string background
property string search: ""
- readonly property bool shadow: background.length > 0 && decorationImage.status !== Image.Error
+ property Flickable view: null
+ color: Kirigami.Theme.backgroundColor
+
+ property alias extra: extraLoader.sourceComponent
function findPage() {
var obj = root;
@@ -38,86 +41,33 @@ ColumnLayout {
}
return obj;
}
- spacing: 0
+ z: 500
+ readonly property real initialHeight: decorationImage.Layout.preferredHeight + rect.height + bottomPadding
- Component.onCompleted: {
- if (!root._page.pageHeader)
- root._page.pageHeader = tinyHeader
+ function boundHeight(min, scrolledDistance, max) {
+ return Math.max(max-Math.max(0, scrolledDistance), min)
}
- Component {
- id: tinyHeader
- Item {
- height: layout.implicitHeight
- DropShadow {
- anchors.fill: source
- source: backgroundColor.visible ? backgroundColor : bg
- horizontalOffset: 0
- verticalOffset: 3
- radius: 8.0
- samples: 17
- color: rect.color
- }
- Rectangle {
- id: backgroundColor
- anchors.fill: parent
- color: Kirigami.Theme.highlightColor
- visible: bg.status != Image.Ready
- }
- Image {
- id: bg
- anchors.fill: parent
- source: root.background
- fillMode: Image.PreserveAspectCrop
- }
+ height: view ? boundHeight(Kirigami.Units.largeSpacing*2, view.contentY/2, initialHeight) : 0
- RowLayout {
- id: layout
- anchors {
- left: parent.left
- right: parent.right
- rightMargin: Kirigami.Units.largeSpacing
- }
- Item {
- Layout.fillWidth: true
- Layout.fillHeight: true
- }
- Item {
- Layout.topMargin: Kirigami.Units.smallSpacing*2
- Layout.bottomMargin: Kirigami.Units.smallSpacing*2
- Layout.preferredHeight: title.paintedHeight
- Layout.preferredWidth: title.paintedWidth
- LinkButton {
- id: title
- text: titleLabel.text
- font: SystemFonts.titleFont
- color: Kirigami.Theme.highlightedTextColor
- onClicked: {
- var flic = root._page.flickable
- if (flic.positionViewAtBeginning)
- flic.positionViewAtBeginning();
- else
- flic.contentY = 0;
- }
- }
- DropShadow {
- horizontalOffset: 2
- verticalOffset: 2
- radius: 8.0
- samples: 17
- color: "#f0000000"
- source: title
- anchors.fill: title
- }
- }
- }
- }
+ anchors {
+ left: parent.left
+ right: parent.right
}
Image {
id: decorationImage
+ anchors {
+ left: parent.left
+ right: parent.right
+ top: parent.top
+ bottom: rect.top
+ }
+ z: 501
+ readonly property bool shadow: background.length > 0 && decorationImage.status !== Image.Error
fillMode: Image.PreserveAspectCrop
- Layout.preferredHeight: root.shadow ? titleLabel.paintedHeight * 4 : titleLabel.paintedHeight * 2
+ Layout.minimumHeight: Kirigami.Units.largeSpacing
+ Layout.preferredHeight: (decorationImage.shadow ? 10 : 6) * Kirigami.Units.largeSpacing
Layout.fillWidth: true
source: root.background
@@ -125,16 +75,17 @@ ColumnLayout {
id: titleLabel
anchors {
fill: parent
- margins: Kirigami.Units.gridUnit
+ rightMargin: Kirigami.Units.gridUnit
}
- font.pointSize: SystemFonts.titleFont.pointSize * 3
text: root.search.length>0 && root._page.title.length>0 ? i18n("Search: %1 + %2", root.search, root._page.title)
: root.search.length>0 ? i18n("Search: %1", root.search)
: root._page.title
- color: root.shadow ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.linkColor
+ color: decorationImage.shadow ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.linkColor
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignBottom
elide: Text.ElideRight
+
+ font.pixelSize: Math.min(SystemFonts.titleFont.pixelSize * 3, root.height/2)
}
DropShadow {
@@ -145,13 +96,33 @@ ColumnLayout {
color: "#80000000"
source: titleLabel
anchors.fill: titleLabel
- visible: root.shadow
+ visible: decorationImage.shadow
}
}
Rectangle {
id: rect
- color: root._page.isCurrentPage ? Kirigami.Theme.linkColor : "gray"
- Layout.fillWidth: true
+ color: root._page.isCurrentPage ? Kirigami.Theme.linkColor : Kirigami.Theme.disabledTextColor
height: 3
+ z: 501
+ anchors {
+ left: parent.left
+ right: parent.right
+ bottom: parent.bottom
+ bottomMargin: extraLoader.item ? Math.max(0, extraLoader.item.height + extraLoader.item.anchors.topMargin + extraLoader.item.anchors.bottomMargin - Math.max(0, view.contentY/2)) : 0
+ }
+ }
+
+ Loader {
+ id: extraLoader
+ anchors {
+ left: parent.left
+ right: parent.right
+ bottom: parent.bottom
+
+ leftMargin: item ? item.anchors.leftMargin : 0
+ rightMargin: item ? item.anchors.rightMargin : 0
+ bottomMargin: item ? item.anchors.bottomMargin : 0
+ }
+ sourceComponent: root.extra
}
}
diff --git a/discover/qml/SourcesPage.qml b/discover/qml/SourcesPage.qml
index 747915c..b6ef571 100644
--- a/discover/qml/SourcesPage.qml
+++ b/discover/qml/SourcesPage.qml
@@ -1,4 +1,4 @@
-import QtQuick 2.1
+import QtQuick 2.4
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import org.kde.discover 1.0
@@ -53,6 +53,7 @@ DiscoverPage {
}
mainItem: ListView {
+ id: sourcesView
model: QSortFilterProxyModel{
filterRegExp: new RegExp(page.search)
sourceModel: KConcatenateRowsProxyModel {
@@ -70,18 +71,15 @@ DiscoverPage {
}
}
+ headerPositioning: ListView.OverlayHeader
header: PageHeader {
- anchors {
- left: parent.left
- right: parent.right
- }
+ view: sourcesView
- RowLayout {
- Layout.fillWidth: true
- Layout.leftMargin: Kirigami.Units.gridUnit
- Layout.rightMargin: Kirigami.Units.gridUnit
- Layout.topMargin: Kirigami.Units.smallSpacing
- Layout.bottomMargin: Kirigami.Units.smallSpacing
+ extra: RowLayout {
+ anchors {
+ topMargin: Kirigami.Units.smallSpacing
+ bottomMargin: Kirigami.Units.smallSpacing
+ }
ToolButton {
// iconName: "list-add"
text: i18n("Add Source")
@@ -122,6 +120,9 @@ DiscoverPage {
MenuItem { action: ActionBridge { action: app.action("help_report_bug") } }
}
}
+ Item {
+ Layout.fillWidth: true
+ }
}
}
diff --git a/discover/qml/UpdatesPage.qml b/discover/qml/UpdatesPage.qml
index 26294ca..c2ffb22 100644
--- a/discover/qml/UpdatesPage.qml
+++ b/discover/qml/UpdatesPage.qml
@@ -1,6 +1,6 @@
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
-import QtQuick 2.1
+import QtQuick 2.4
import org.kde.discover 1.0
import org.kde.discover.app 1.0
import org.kde.kquickcontrolsaddons 2.0
@@ -47,24 +47,20 @@ DiscoverPage
backend: resourcesUpdatesModel
}
+ headerPositioning: ListView.OverlayHeader
header: PageHeader {
- id: header
- anchors {
- left: parent.left
- right: parent.right
- }
background: "qrc:/banners/updatescrop.jpg"
+ view: updatesView
+
+ extra: RowLayout {
+ id: updateControls
- RowLayout {
Layout.fillWidth: true
- Layout.leftMargin: Kirigami.Units.gridUnit
- Layout.rightMargin: Kirigami.Units.gridUnit
- Layout.topMargin: Kirigami.Units.smallSpacing
- Layout.bottomMargin: Kirigami.Units.smallSpacing
visible: (updateModel.totalUpdatesCount > 0 && resourcesUpdatesModel.isProgressing) || updateModel.hasUpdates
LabelBackground {
+ Layout.leftMargin: Kirigami.Units.gridUnit
text: updateModel.toUpdateCount + " (" + updateModel.updateSize+")"
}
Label {
@@ -82,9 +78,8 @@ DiscoverPage
}
Item { Layout.fillWidth: true}
Button {
- id: startButton
Layout.minimumWidth: Kirigami.Units.gridUnit * 6
- Layout.rightMargin: Kirigami.Units.smallSpacing
+ Layout.rightMargin: Kirigami.Units.gridUnit
text: unselectedItem.visible ? i18n("Update Selected") : i18n("Update All")
enabled: !resourcesUpdatesModel.isProgressing
onClicked: page.start()