[sdk] leading actions width is too small making it very difficult to press

[Nekhelesh Ramananthan]

Since a recent update to the ListItem leading actions in Ubuntu.Components 1.2, where the width of the action was clamped, the width is too small to press comfortably on a phone resulting in it missing 9 out of 10 tries. It affects the usability of the action and may be become a release blocker for apps that have recently switched over to the new list items.

Sample App

import QtQuick 2.4
import Ubuntu.Components 1.2

MainView {
    applicationName: "testdelete.nik90"
    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: "Swipe to Delete"
        ListItem {
            id: listItem
            anchors.top: parent.top

            Label {
                text: "Swipe me right to delete this listitem"
                wrapMode: Text.WordWrap
                anchors { left: parent.left; leftMargin: units.gu(2); right: parent.right; verticalCenter: parent.verticalCenter }
            }

            leadingActions: ListItemActions {
                actions: [
                    Action {
                        iconName: "delete"
                        onTriggered: listItem.destroy()
                    }
                ]
            }
        }
    }
}

With trailing actions, tapping the trailingActions first causes the ListItem to jump/scroll all the way to the left instead of actually activating the action. Only a second tap actually activates them.

---

Visual design: desired outcome:

Please expand the width of the leading and trailing actions to 6gu (they're currently 5gu). The 2gu icon will be centred in this.

[Jamie Young (jamiedawsonyoung)]

Hi, can we get a screenshot of this to see the issue. Thanks!

[Andrew Hayzen (ahayzen)]

I can confirm that when using the package uitk on ubuntu rc-proposed using the steps provided by Nekhelesh that I can reproduce the bug. Therefore I have set this bug to confirmed.

This bug is also now blocking the music-app from migrating to the new listitems.

$ system-image-cli -i
current build number: 94
device name: mako
channel: ubuntu-touch/rc-proposed/bq-aquaris.en
last update: 2015-08-20 12:50:24
version version: 94
version ubuntu: 20150819
version device: 20150819
version custom: mako-1.1

[Nekhelesh Ramananthan (nik90)]

I have attached the screenshot as requested. Visually the leading edge action width looks reasonable. However for some reason, this bug is only reproducible on a Nexus 4 (Mako). There were others who confirmed this wasn't an issue on their BQ devices.

[Victor Thompson (vthompson)]

On my mako device on rc-proposed I can reproduce this bug easily. However, on my flo device the action seems to trigger when I tap anywhere in the red (as one would expect)

system-image-cli -i
current build number: 221
device name: flo
channel: ubuntu-touch/rc-proposed/ubuntu
last update: 2015-08-19 15:53:45
version version: 221
version ubuntu: 20150819
version device: 20150819
version custom: 20150819

[Femma (femma)]

The touch area should be the region of the entire leading action (or red area).

If the width looks reasonable and this bug is only happening on the mako device, then could this be an implementation/environment issue?

[Nekhelesh Ramananthan (nik90)]

Indeed it is not a design issue, more a implementation/environment issue specific to Nexus 4.

[Zsombor Egri (zsombi)]

If it is a Nexus4 issue, then it is not really a UITK issue. The sensing area of the actions in leading/trailing are 5x7 GU, so the entire area of the slot, not only the icon, which is 2x2 GU.

[Michal Predotka (mpredotka)]

I use bq 4.5 Ubuntu Edition and after the latest OTA-6 I see the same issue. Also the trailing actions width is affected. Screenshots attached.

[Alan Pope 🍺🐧🐱 🦄 (popey)]

This is most certainly not only a Nexus 4 issue. I tried many times to hit the delete button on an alarm in the clock app today on a retail bq e4.5 running OTA-6 and latest clock.

[Zsombor Egri (zsombi)]

Jamie, look at the images from comments #8 and #9. There the action slot size is about 1 or 2 GU bigger than the one we have now. Just to help you with the size.

[SB (emehntehtt)]

After OTA-6 and latest clock update I also have this issue with deleting alarms.

[Michael Sheldon (michael-sheldon)]

I think I've tracked down the problem here, the size change is misleading, whether pressing a leading/trailing action is successful or not is actually determined by the speed with which you press and release it.

This is because the hiding animation starts when the area is pressed, but the action is only triggered on release. Due to a quirk in QML's mouse areas release event don't get emitted if the finger is no longer inside the relevant mouse area when the release happens (in this case caused to the mouse area having been moved by the hiding animation). So the release event is never emitted and the action isn't triggered.

The size only has an effect in that a larger area gives you a slightly longer duration in which you can release your finger and have it register.

I did a quick test to confirm this by triggering the action based on the pressed property changing and the leading/trailing action buttons became instantly much more usable. I think the correct solution however would be to have the hide animation start when the user releases their finger instead of on the initial press event (but I'm not familiar enough with the ListItemStyle implementation to do that quickly myself)

[Zsombor Egri (zsombi)]

Importance risen to critical as affects many apps out in the store.

[Jamie Young (jamiedawsonyoung)]

 I've updated the description with a proposal for the width of the leading / trailing actions. Can we address this as well as the issue from Michael (above) Cheers!

[Andrea Bernabei (faenil)]

@Jamie,

I'm not sure the width of the trailing actions is a problem here.

We made a decision that 4x4gu would be an appropriate touch region, I think we should stick to that unless we prove that's too small :)

if Michael is right, the width is not an issue here

[Andrea Bernabei (faenil)]

if you want the action container to be wider just because of its visual representation, then ignore my previous comment :)

[Zsombor Egri (zsombi)]

Andrea, there are two problems here:
1) the swiping grabs the moves when initiated over a leading/trailing item, which happens to jump the ListItem's content when touched on these actions
2) the size of the action is visually bad, this we have to increase a bit.

[Chris Wayne (cwayne18)]

This happens on MX4 as well (unsurprisingly)