Skip to content

Commit

Permalink
Merge pull request #34 from neochapay/master
Browse files Browse the repository at this point in the history
Add ListView
  • Loading branch information
locusf authored Jan 30, 2017
2 parents 433cbec + f4f5cf7 commit 0c400e3
Show file tree
Hide file tree
Showing 10 changed files with 429 additions and 2 deletions.
42 changes: 42 additions & 0 deletions examples/touch/content/ListViewPage.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
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"
}
}
4 changes: 4 additions & 0 deletions examples/touch/main.qml
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ ApplicationWindow {
title: "Spinner"
page: "content/SpinnerPage.qml"
}
ListElement {
title: "ListView"
page: "content/ListViewPage.qml"
}
ListElement {
title: "Labels (no orientation locks)"
page: "content/LabelPage.qml"
Expand Down
3 changes: 3 additions & 0 deletions examples/touch/touch.pro
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,6 @@ desktop.path = /usr/share/applications
desktop.files = glacier-gallery.desktop
INSTALLS += desktop

DISTFILES += \
content/ListViewPage.qml

2 changes: 1 addition & 1 deletion rpm/qtquickcontrols-nemo.spec
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Name: qt5-qtquickcontrols-nemo
Summary: Nemomobile Qt Quick Controls
Version: 5.1.1
Version: 5.1.2
Release: nemo1
Group: Qt/Qt
License: LGPLv2.1 with exception or GPLv3
Expand Down
67 changes: 67 additions & 0 deletions src/controls/ListView.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
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" }
}

}
}

}

200 changes: 200 additions & 0 deletions src/controls/ListViewItemWithActions.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
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
}
}
}
}
}
4 changes: 3 additions & 1 deletion src/controls/controls.pro
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ QML_FILES += \
QueryDialog.qml \
Header.qml \
HeaderToolsLayout.qml \
Slider.qml
Slider.qml\
ListView.qml \
ListViewItemWithActions.qml

OTHER_FILES += qmldir \
$$QML_FILES
Expand Down
48 changes: 48 additions & 0 deletions src/controls/images/listview-icon-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 0c400e3

Please sign in to comment.