diff --git a/examples/touch/content/ListViewPage.qml b/examples/touch/content/ListViewPage.qml new file mode 100644 index 0000000..c3832ad --- /dev/null +++ b/examples/touch/content/ListViewPage.qml @@ -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" + } +} diff --git a/examples/touch/main.qml b/examples/touch/main.qml index 58b7762..9380bd6 100644 --- a/examples/touch/main.qml +++ b/examples/touch/main.qml @@ -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" diff --git a/examples/touch/touch.pro b/examples/touch/touch.pro index 4384aec..80b34cb 100644 --- a/examples/touch/touch.pro +++ b/examples/touch/touch.pro @@ -33,3 +33,6 @@ desktop.path = /usr/share/applications desktop.files = glacier-gallery.desktop INSTALLS += desktop +DISTFILES += \ + content/ListViewPage.qml + diff --git a/rpm/qtquickcontrols-nemo.spec b/rpm/qtquickcontrols-nemo.spec index bf9fb59..4026a23 100644 --- a/rpm/qtquickcontrols-nemo.spec +++ b/rpm/qtquickcontrols-nemo.spec @@ -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 diff --git a/src/controls/ListView.qml b/src/controls/ListView.qml new file mode 100644 index 0000000..58be52a --- /dev/null +++ b/src/controls/ListView.qml @@ -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" } + } + + } + } + +} + diff --git a/src/controls/ListViewItemWithActions.qml b/src/controls/ListViewItemWithActions.qml new file mode 100644 index 0000000..9c147e0 --- /dev/null +++ b/src/controls/ListViewItemWithActions.qml @@ -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 + } + } + } + } +} diff --git a/src/controls/controls.pro b/src/controls/controls.pro index 1bca72b..04488f8 100644 --- a/src/controls/controls.pro +++ b/src/controls/controls.pro @@ -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 diff --git a/src/controls/images/listview-icon-arrow.svg b/src/controls/images/listview-icon-arrow.svg new file mode 100644 index 0000000..cef957c --- /dev/null +++ b/src/controls/images/listview-icon-arrow.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/controls/images/listview-icon-template-s.svg b/src/controls/images/listview-icon-template-s.svg new file mode 100644 index 0000000..2975326 --- /dev/null +++ b/src/controls/images/listview-icon-template-s.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/controls/qmldir b/src/controls/qmldir index 412ed48..cf9e142 100644 --- a/src/controls/qmldir +++ b/src/controls/qmldir @@ -19,6 +19,8 @@ QueryDialog 1.0 QueryDialog.qml Header 1.0 Header.qml HeaderToolsLayout 1.0 HeaderToolsLayout.qml Slider 1.0 Slider.qml +ListView 1.0 ListView.qml +ListViewItemWithActions 1.0 ListViewItemWithActions.qml # MIRRORED CONTROLS: # These are the controls that we take directly from official QQC.