Skip to content

Q
qtquickcontrols-nemo
Commit 77b312ac authored by Sergey Chupligin's avatar Sergey Chupligin
Browse files
Options

[ListView] add item actons

parent b5071ab1
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 134 deletions
examples/touch/content/ListViewPage.qml
View file @ 77b312ac
......@@ -28,12 +28,12 @@ Page {
ListElement { name: "Whale"; desc: ""; size: "Huge" }
}
MediumListView {
ListView {
id: view
anchors.fill: parent
clip: true
model: animalsModel
delegate: MediumListViewItem {
delegate: ListViewItemWithActions {
label: name
description: desc
}
......
src/controls/MediumListView.qml → src/controls/ListView.qml
View file @ 77b312ac
......@@ -5,6 +5,9 @@ import QtQuick.Controls.Styles.Nemo 1.0
ListView {
id: listView
signal hideAllActions(int hideIndex)
section.criteria: ViewSection.FullString
section.delegate: Component{
id: sectionHeading
......@@ -59,5 +62,6 @@ ListView {
}
}
}
src/controls/ListViewItemWithActions.qml 0 → 100644
View file @ 77b312ac
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
}
}
}
}
}
src/controls/MediumListViewItem.qml deleted 100644 → 0
View file @ b5071ab1
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 icon: ""
property string page: ""
signal clicked
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: (description != "") ? childrenRect.height : labelItem.height
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: text != ""
}
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: root.clicked()
}
}
src/controls/controls.pro
View file @ 77b312ac
......@@ -18,9 +18,8 @@ QML_FILES += \
Header.qml \
HeaderToolsLayout.qml \
Slider.qml\
MediumListView.qml \
MediumListViewItem.qml\
MediumListViewElement.qml
ListView.qml \
ListViewItemWithActions.qml
OTHER_FILES += qmldir \
$$QML_FILES
......@@ -54,5 +53,3 @@ images.files = $$_PRO_FILE_PWD_/images
images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
INSTALLS += target qmlfiles images
DISTFILES +=
src/controls/qmldir
View file @ 77b312ac
......@@ -19,8 +19,8 @@ QueryDialog 1.0 QueryDialog.qml
Header 1.0 Header.qml
HeaderToolsLayout 1.0 HeaderToolsLayout.qml
Slider 1.0 Slider.qml
MediumListView 1.0 MediumListView.qml
MediumListViewItem 1.0 MediumListViewItem.qml
ListView 1.0 ListView.qml
ListViewItemWithActions 1.0 ListViewItemWithActions.qml
# MIRRORED CONTROLS:
# 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