Commit 0c400e38 authored by Aleksi Suomalainen's avatar Aleksi Suomalainen Committed by GitHub

Merge pull request #34 from neochapay/master

Add ListView
parents 433cbec8 f4f5cf7b
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0
Page {
id: listViewPage
headerTools: HeaderToolsLayout { showBackButton: false; title: "MediumListView" }
ListModel {
id: animalsModel
ListElement { name: "Ant"; desc: "Small description"; size: "Tiny" }
ListElement { name: "Flea"; desc: ""; size: "Tiny" }
ListElement { name: "Parrot"; desc: ""; size: "Small" }
ListElement { name: "Guinea pig"; desc: "The guinea pig, cavy or domestic guinea pig, or cuy for livestock breeds, is a species of rodent belonging to the family Caviidae and the genus Cavia"; size: "Small" }
ListElement { name: "Rat"; desc: ""; size: "Small" }
ListElement { name: "Butterfly"; desc: ""; size: "Small" }
ListElement { name: "Dog"; desc: ""; size: "Medium" }
ListElement { name: "Cat"; desc: ""; size: "Medium" }
ListElement { name: "Pony"; desc: ""; size: "Medium" }
ListElement { name: "Koala"; desc: ""; size: "Medium" }
ListElement { name: "Horse"; desc: ""; size: "Large" }
ListElement { name: "Tiger"; desc: ""; size: "Large" }
ListElement { name: "Giraffe"; desc: ""; size: "Large" }
ListElement { name: "Elephant"; desc: ""; size: "Huge" }
ListElement { name: "Whale"; desc: ""; size: "Huge" }
}
ListView {
id: view
anchors.fill: parent
clip: true
model: animalsModel
delegate: ListViewItemWithActions {
label: name
description: desc
}
section.property: "size"
}
}
...@@ -92,6 +92,10 @@ ApplicationWindow { ...@@ -92,6 +92,10 @@ ApplicationWindow {
title: "Spinner" title: "Spinner"
page: "content/SpinnerPage.qml" page: "content/SpinnerPage.qml"
} }
ListElement {
title: "ListView"
page: "content/ListViewPage.qml"
}
ListElement { ListElement {
title: "Labels (no orientation locks)" title: "Labels (no orientation locks)"
page: "content/LabelPage.qml" page: "content/LabelPage.qml"
......
...@@ -33,3 +33,6 @@ desktop.path = /usr/share/applications ...@@ -33,3 +33,6 @@ desktop.path = /usr/share/applications
desktop.files = glacier-gallery.desktop desktop.files = glacier-gallery.desktop
INSTALLS += desktop INSTALLS += desktop
DISTFILES += \
content/ListViewPage.qml
Name: qt5-qtquickcontrols-nemo Name: qt5-qtquickcontrols-nemo
Summary: Nemomobile Qt Quick Controls Summary: Nemomobile Qt Quick Controls
Version: 5.1.1 Version: 5.1.2
Release: nemo1 Release: nemo1
Group: Qt/Qt Group: Qt/Qt
License: LGPLv2.1 with exception or GPLv3 License: LGPLv2.1 with exception or GPLv3
......
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles.Nemo 1.0
ListView {
id: listView
signal hideAllActions(int hideIndex)
section.criteria: ViewSection.FullString
section.delegate: Component{
id: sectionHeading
Rectangle {
width: listView.width
height: 44
color: "black"
Text {
id: sectionText
text: section
font.capitalization: Font.AllUppercase
font.pixelSize: 20
color: "white"
anchors{
left: parent.left
leftMargin: 10
verticalCenter: parent.verticalCenter
}
}
Rectangle{
id: line
height: 1
color: "white"
width: listView.width-sectionText.width-30
anchors{
left: sectionText.right
leftMargin: 10
verticalCenter: sectionText.verticalCenter
}
}
}
}
Item{
id: bottom
width: parent.width
height: 30
anchors.bottom: parent.bottom
visible: listView.contentHeight >= listView.height
LinearGradient{
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(0, 30)
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: "black" }
}
}
}
}
import QtQuick 2.1
import QtQuick.Controls.Nemo 1.0
import QtGraphicalEffects 1.0
Item {
id: root
width: parent.width
height: 60
property string label: ""
property string description: ""
property string subdescription: ""
property string icon: ""
property string page: ""
property alias actions: actionsLoader.sourceComponent
signal clicked
function hideAllActions() {
root.ListView.view.hideAllActions(index)
}
Connections {
target: root.ListView.view
onHideAllActions: {
if (hideIndex != index) {
listArea.x = 0
}
}
}
Rectangle{
id: actionsArea
color: "#474747"
anchors.right: listArea.left
height: listArea.height
width: childrenRect.width
Loader {
id: actionsLoader
}
}
Rectangle{
id: listArea
width: root.width
height: root.height
color: "transparent"
Behavior on x{
NumberAnimation { duration: 200}
}
Rectangle {
anchors.fill: parent
color: "#11ffffff"
visible: mouse.pressed
}
Image{
id: itemIcon
height: parent.height-10
width: height
anchors{
left: parent.left
leftMargin: 20
top: parent.top
topMargin: 5
}
sourceSize.width: width
sourceSize.height: height
source: (icon != "") ? icon : "images/listview-icon-template-s.svg"
//visible: (icon != "")
}
Rectangle{
id: dataArea
width: parent.width-itemIcon.width-arrowItem.width-60
height: labelItem.height+(description != "" ? descriptionItem.height : 0)+(subdescription != "" ? subDescriptionItem.height : 0)
clip: true
anchors{
left:itemIcon.right
leftMargin: 20
verticalCenter: itemIcon.verticalCenter
}
color: "transparent"
Text {
id: labelItem
color: "#ffffff"
text: label
anchors{
left: parent.left
right: parent.right
}
font.pixelSize: 30
clip: true
}
Text{
id: descriptionItem
color: "#ffffff"
text: description
anchors{
left: parent.left
right: parent.right
top: labelItem.bottom
}
font.pixelSize: 18
clip: true
visible: description != ""
}
Text{
id: subDescriptionItem
color: "#ffffff"
text: subdescription
anchors{
left: parent.left
right: parent.right
top: descriptionItem.bottom
}
font.pixelSize: 18
clip: true
visible: subdescription != ""
}
Item{
width: 15
height: parent.height
anchors{
top: parent.top
right: parent.right
}
visible: !mouse.pressed
LinearGradient{
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(15, 0)
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: "black" }
}
}
}
}
Image {
id: arrowItem
height: parent.height-10
width: height
anchors{
right: parent.right
rightMargin: 20
verticalCenter: parent.verticalCenter
}
sourceSize.width: width
sourceSize.height: height
source: "images/listview-icon-arrow.svg"
//visible: (page != "")
}
MouseArea {
id: mouse
anchors.fill: parent
onClicked: {
//if actions is hide
if(listArea.x === 0)
{
root.clicked()
}
else
{
listArea.x = 0
}
}
onPressed: {
hideAllActions()
}
onPressAndHold: {
if (actionsLoader.item) {
listArea.x = actionsArea.width
}
}
}
}
}
...@@ -17,7 +17,9 @@ QML_FILES += \ ...@@ -17,7 +17,9 @@ QML_FILES += \
QueryDialog.qml \ QueryDialog.qml \
Header.qml \ Header.qml \
HeaderToolsLayout.qml \ HeaderToolsLayout.qml \
Slider.qml Slider.qml\
ListView.qml \
ListViewItemWithActions.qml
OTHER_FILES += qmldir \ OTHER_FILES += qmldir \
$$QML_FILES $$QML_FILES
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32.000001"
id="svg5140"
version="1.1">
<defs
id="defs5142">
<linearGradient
id="linearGradient3919-7-9">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop3921-4-3" />
<stop
style="stop-color:#dcdcdc;stop-opacity:1;"
offset="1"
id="stop3923-0-19" />
</linearGradient>
</defs>
<metadata
id="metadata5145">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
style="fill:#241c1c"
id="layer1"
transform="translate(0,-1020.3622)">
<path
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none"
d="m 6.5000002,1025.3622 0,22 L 25.5,1036.4034 Z"
id="path5357-0-0" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="svg5140"
viewBox="0 0 32 32.000001"
height="32"
width="32">
<defs
id="defs5142">
<linearGradient
xlink:href="#linearGradient3919-7-9"
id="linearGradient4206-77"
gradientUnits="userSpaceOnUse"
x1="-426.48438"
y1="125.01562"
x2="-426.48438"
y2="187.98438"
gradientTransform="matrix(0.49230769,0,0,0.49230769,226.46155,959.31607)" />
<linearGradient
id="linearGradient3919-7-9">
<stop
id="stop3921-4-3"
offset="0"
style="stop-color:#ffffff;stop-opacity:1;" />
<stop
id="stop3923-0-19"
offset="1"
style="stop-color:#dcdcdc;stop-opacity:1;" />
</linearGradient>
</defs>
<metadata
id="metadata5145">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-1020.3622)"
id="layer1">
<circle
id="path4010-94-3"
style="display:inline;fill:url(#linearGradient4206-77);fill-opacity:1;stroke:none"
cx="16"
cy="1036.3622"
r="16" />
</g>
</svg>
...@@ -19,6 +19,8 @@ QueryDialog 1.0 QueryDialog.qml ...@@ -19,6 +19,8 @@ QueryDialog 1.0 QueryDialog.qml
Header 1.0 Header.qml Header 1.0 Header.qml
HeaderToolsLayout 1.0 HeaderToolsLayout.qml HeaderToolsLayout 1.0 HeaderToolsLayout.qml
Slider 1.0 Slider.qml Slider 1.0 Slider.qml
ListView 1.0 ListView.qml
ListViewItemWithActions 1.0 ListViewItemWithActions.qml
# MIRRORED CONTROLS: # MIRRORED CONTROLS:
# These are the controls that we take directly from official QQC. # These are the controls that we take directly from official QQC.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment