controls/templates/SwipeListItem.qml

/*
 *   Copyright 2010 Marco Martin <notmart@gmail.com>
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU Library General Public License as
 *   published by the Free Software Foundation; either version 2, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU Library General Public License for more details
 *
 *   You should have received a copy of the GNU Library General Public
 *   License along with this program; if not, write to the
 *   Free Software Foundation, Inc.,
 *   51 Franklin Street, Fifth Floor, Boston, MA  2.010-1301, USA.
 */

import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls.Private 1.0
import org.kde.kirigami 1.0
import "../private"

Item {
    id: listItem

//BEGIN properties
     default property Item contentItem

    property alias supportsMouseEvents: itemMouse.enabled

    signal clicked


    signal pressAndHold

    property bool checked: false

    property alias pressed: itemMouse.pressed

    property alias containsMouse: itemMouse.containsMouse

    property bool sectionDelegate: false

    property bool separatorVisible: true

    property list<Action> actions


    property real position: 0

    property Item background

    property color textColor: Theme.viewTextColor

    property color backgroundColor: Theme.viewBackgroundColor

    property color activeTextColor: Theme.highlightedTextColor

    property color activeBackgroundColor: Theme.highlightColor

    Item {
        id: behindItem
        parent: listItem
        anchors {
            fill: parent
            leftMargin: height
        }
        Rectangle {
            id: shadowHolder
            color: Theme.backgroundColor
            anchors.fill: parent
        }
        EdgeShadow {
            edge: Qt.TopEdge
            anchors {
                right: parent.right
                left: parent.left
                top: parent.top
            }
        }
        EdgeShadow {
            edge: Qt.LeftEdge
            x: behindItem.width - (behindItem.width * listItem.position)
            anchors {
                top: parent.top
                bottom: parent.bottom
            }
        }
    }

    implicitWidth: parent ? parent.width : contentItem.width + paddingItem.anchors.margins * 2
    implicitHeight: contentItem.height + Units.smallSpacing * 5
//END properties

//BEGIN signal handlers
    onBackgroundChanged: {
        if (background) {
            background.parent = itemMouse;
            background.anchors.fill = itemMouse;
            background.z = -1;
        }
    }

    onContentItemChanged: {
        contentItem.parent = paddingItem
        contentItem.z = 1;
    }

    Component.onCompleted: {
        backgroundChanged();
        contentItemChanged();
    }

    onPositionChanged: {
        if (!mainFlickable.loopCheck && !handleMouse.pressed && !mainFlickable.flicking &&
            !mainFlickable.dragging && !positionAnimation.running) {
            mainFlickable.contentX = (listItem.width-listItem.height) * mainFlickable.internalPosition;
        }
    }
//END signal handlers

//BEGIN UI implementation
    Row {
        id: actionsLayout
        z: 1
        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
            rightMargin: y
        }
        height: Math.min( parent.height / 1.5, Units.iconSizes.medium)
        width: childrenRect.width
        property bool exclusive: false
        property Item checkedButton
        spacing: Units.largeSpacing
        Repeater {
            model: {
                if (listItem.actions.length == 0) {
                    return null;
                } else {
                    return listItem.actions[0].text !== undefined &&
                        listItem.actions[0].trigger !== undefined ?
                            listItem.actions :
                            listItem.actions[0];
                }
            }
            delegate: Icon {
                height: actionsLayout.height
                width: height
                source: modelData.iconName
                enabled: (modelData && modelData.enabled !== undefined) ? modelData.enabled : true;
                visible: (modelData && modelData.visible !== undefined) ? modelData.visible : true;
                MouseArea {
                    anchors {
                        fill: parent;
                        margins: -Units.smallSpacing;
                    }
                    enabled: (modelData && modelData.enabled !== undefined) ? modelData.enabled : true;
                    onClicked: {
                        if (modelData && modelData.trigger !== undefined) {
                            modelData.trigger();
                        // assume the model is a list of QAction or Action
                        } else if (toolbar.model.length > index) {
                            toolbar.model[index].trigger();
                        } else {
                            console.log("Don't know how to trigger the action")
                        }
                        positionAnimation.to = 0;
                        positionAnimation.running = true;
                    }
                }
            }
        }
    }

    PropertyAnimation {
        id: positionAnimation
        target: mainFlickable
        properties: "contentX"
        duration: Units.longDuration
        easing.type: Easing.InOutQuad
    }

    Flickable {
        id: mainFlickable
        z: 2
        interactive: false
        boundsBehavior: Flickable.StopAtBounds
        anchors.fill: parent
        contentWidth: mainItem.width
        contentHeight: height
        onFlickEnded: {
            if (contentX > width / 2) {
                positionAnimation.to = width - height;
            } else {
                positionAnimation.to = 0;
            }
            positionAnimation.running = true;
        }
        readonly property real internalPosition:  (mainFlickable.contentX/(listItem.width-listItem.height));
        property bool loopCheck: false
        onInternalPositionChanged: {
            if (!loopCheck) {
                loopCheck = true;
                listItem.position = internalPosition;
                loopCheck = false;
            }
        }

        Item {
            id: mainItem
            width: (mainFlickable.width * 2) - handleMouse.width
            height: mainFlickable.height
            MouseArea {
                id: itemMouse
                anchors {
                    left: parent.left
                    top: parent.top
                    bottom: parent.bottom
                }
                hoverEnabled: !Settings.isMobile
                width: mainFlickable.width
                onClicked: listItem.clicked()
                onPressAndHold: listItem.pressAndHold()

                Item {
                    id: paddingItem
                    anchors {
                        fill: parent
                        margins: Units.smallSpacing
                        rightMargin: handleIcon.width + Units.smallSpacing
                    }
                }
            }

            MouseArea {
                id: handleMouse
                anchors {
                    left: itemMouse.right
                    right: itemMouse.right
                    top: parent.top
                    bottom: parent.bottom
                    leftMargin:  -height
                }
                preventStealing: true
                property var downTimestamp;
                property int startX
                property int startMouseX

                onClicked: {
                    if (Math.abs(startX - mainFlickable.contentX) > Units.gridUnit ||
                        Math.abs(startMouseX - mouse.x) > Units.gridUnit) {
                        return;
                    }
                    if (mainFlickable.contentX > mainFlickable.width / 2) {
                        positionAnimation.to = 0;
                    } else {
                        positionAnimation.to = mainFlickable.width - mainFlickable.height;
                    }
                    positionAnimation.running = true;
                }
                onPressed: {
                    downTimestamp = (new Date()).getTime();
                    startX = mainFlickable.contentX;
                    startMouseX = mouse.x;
                }
                onPositionChanged: {
                    mainFlickable.contentX = Math.max(0, Math.min(mainFlickable.width - height, mainFlickable.contentX + (startMouseX - mouse.x)))
                }
                onReleased: {
                    var speed = ((startX - mainFlickable.contentX) / ((new Date()).getTime() - downTimestamp) * 1000);
                    mainFlickable.flick(speed, 0);
                }
                Icon {
                    id: handleIcon
                    anchors.centerIn: parent
                    selected: listItem.checked || (listItem.pressed && !listItem.checked && !listItem.sectionDelegate)
                    width: Units.iconSizes.smallMedium
                    height: width
                    source: (mainFlickable.contentX > mainFlickable.width / 2) ? "handle-right" : "handle-left"
                }
            }
        }
    }
//END UI implementation

    Accessible.role: Accessible.ListItem
}