Introduce ActionRow widget
AbandonedPublic

Authored by cblack on Jan 1 2020, 9:49 PM.

Details

Reviewers
mart
Group Reviewers
VDG
Kirigami
Summary

ActionRows are row widgets with associated actions. Left and right actions are triggered by swipes,
and center actions are triggered with an interaction.

Test Plan
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import org.kde.kirigami 2.12

Window {
    visible: true
    width: 640
    height: 480
    ListView {
        anchors.fill: parent

        model: 10
        delegate: ActionRow {
            width: parent.width
            leftAction: Action {
                text: "Copy"
                onTriggered: {
                    print("Copy triggered")
                }
            }
            centerAction: Action {
                onTriggered: {
                    print("Center triggered")
                }
            }

            rightAction: Action {
                text: "Delete"
                SwipeAction.foregroundColor: "white"
                SwipeAction.backgroundColor: "#bf0039"
                SwipeAction.isDelete: true
                icon.name: "edit-delete"
                onTriggered: {
                    print("Delete triggered")
                }
            }
        }
    }

    title: qsTr("Hello World")
}

Diff Detail

Repository
R169 Kirigami
Branch
actionrow (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 20513
Build 20531: arc lint + arc unit
cblack created this revision.Jan 1 2020, 9:49 PM
Restricted Application added a project: Kirigami. · View Herald TranscriptJan 1 2020, 9:49 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
cblack requested review of this revision.Jan 1 2020, 9:49 PM
ngraham added a subscriber: ngraham.Jan 1 2020, 9:58 PM
ngraham added inline comments.
src/controls/ActionRow.qml
52

Make this a multiple of GridUnit

145

use a multiple of largeSpacing or smallSpacing or even gridUnit

148

smallMedium size

152

don't hardcode colors

157

ditto

188

ditto

191

ditto

195

ditto

200

ditto

cblack updated this revision to Diff 72579.Jan 1 2020, 10:10 PM
cblack marked an inline comment as done.

Update based off of feedback

cblack marked 6 inline comments as done.Jan 1 2020, 10:12 PM
cblack updated this revision to Diff 72580.Jan 1 2020, 10:13 PM

Get the other two items unhardcoded

cblack marked an inline comment as done.Jan 1 2020, 10:14 PM
ouwerkerk added a subscriber: ouwerkerk.EditedJan 2 2020, 12:14 AM

Are we certain about naming here: SwipeAction.isDelete? Maybe SwipeAction.collapse ? It doesn't necessarily have to be a real "delete" action that is backing this, maybe all you want to convey with the name of this setting is that the list entry will be collapsed in an animation?

mart added a subscriber: mart.Jan 7 2020, 9:10 AM

my gripe is that is a lot of javascript which could be simply implemented with a swipedelegate, having less heavy javascript which is a serious problem when used in delegates.

also a component like that back then was chosen to not be added by purpose in part because gesture-wise conflicts with the navigate back of pagerow and in part because every component added in kirigami needs to work as is on the desktop as well, modifying itself as much as needed.
(in this case it would get fixed buttons for the actions at the edges i guess)

mart requested changes to this revision.Jan 7 2020, 9:23 AM
This revision now requires changes to proceed.Jan 7 2020, 9:23 AM
In D26354#589352, @mart wrote:

also a component like that back then was chosen to not be added by purpose in part because gesture-wise conflicts with the navigate back of pagerow

Personally I don't find Kirigami's swipe-left-and-right-to-navigate-through-the-stack gestures to be very useful. You generally only ever use a swipe to go backwards, because to navigate forward you just tap the item. And having these swipes bound to pagerow navigation prevents the use of more useful gestures like these. I find these kinds of gesture-actions super useful in iOS and Android apps (particularly email apps where I use it to delete emails quickly).

every component added in kirigami needs to work as is on the desktop as well, modifying itself as much as needed.

(in this case it would get fixed buttons for the actions at the edges i guess)

This would suggest to me that we need to add these gestures to an even higher level component, or to add this to a BasicLictItem with leftSwipeAction: and rightSwipeAction properties or something, kind of like how SwipeListItem shows buttons on desktop. That way it the component would have buttons on desktop, and use the specified swipe actions on mobile automatically.

mart added a comment.Jan 9 2020, 1:12 PM
In D26354#589352, @mart wrote:

also a component like that back then was chosen to not be added by purpose in part because gesture-wise conflicts with the navigate back of pagerow

Personally I don't find Kirigami's swipe-left-and-right-to-navigate-through-the-stack gestures to be very useful. You generally only ever use a swipe to go

I would really not want to have to have an explicit back button. I find both going back by gesture and having a non destructive back action so that you can undo it a very central thing, to which i'll never renounce.

This would suggest to me that we need to add these gestures to an even higher level component, or to add this to a BasicLictItem with leftSwipeAction: and rightSwipeAction properties or something, kind of like how SwipeListItem shows buttons on desktop. That way it the component would have buttons on desktop, and use the specified swipe actions on mobile automatically.

SwipeListItem should just trigger when there is only one action, really (and that one doesn't conflict because the swipe is from the screen edge)

In D26354#590815, @mart wrote:

SwipeListItem should just trigger when there is only one action, really (and that one doesn't conflict because the swipe is from the screen edge)

Hey yeah, that could work.

mart added a comment.Jan 10 2020, 11:20 AM
In D26354#590815, @mart wrote:

SwipeListItem should just trigger when there is only one action, really (and that one doesn't conflict because the swipe is from the screen edge)

Hey yeah, that could work.

needed probably a graphical way to make it obvious that this will trigger on release rather than just showing the action

In D26354#591264, @mart wrote:

needed probably a graphical way to make it obvious that this will trigger on release rather than just showing the action

Yes, exactly

cblack abandoned this revision.Mar 14 2020, 6:55 PM