Ubuntu
ubuntu-ui-toolkit package

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

Bug #1486008 reported by Nekhelesh Ramananthan on 2015-08-18

108

This bug affects 20 people

	Status	Importance	Assigned to	Milestone
Canonical System Image	Fix Released	High	Zoltan Balogh	Canonical System Image ww40-2015 "ota7"
Ubuntu UX	Fix Released	Medium	Jamie Young
ubuntu-ui-toolkit (Ubuntu)	Fix Released	Critical	Zsombor Egri

Bug Description

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.

See original description

Related branches

lp:~zsombi/ubuntu-ui-toolkit/listitem_swipe

Merged into lp:ubuntu-ui-toolkit/staging at revision 1641

PS Jenkins bot: Approve (continuous-integration) on 2015-09-18

Cris Dywan: Approve on 2015-09-18

Zoltan Balogh: Approve on 2015-09-18

Revision history for this message

Jamie Young (jamiedawsonyoung) wrote on 2015-08-19:

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

Changed in ubuntu-ux:
status:	New → Incomplete

Magdalena Mirowicz (magdalena-mirowicz) on 2015-08-20

Changed in ubuntu-ux:
assignee:	nobody → Jamie Young (jamiedawsonyoung)
importance:	Undecided → Medium

Revision history for this message

Andrew Hayzen (ahayzen) wrote on 2015-08-20:

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

Changed in ubuntu-ui-toolkit (Ubuntu):
status:	New → Confirmed

Revision history for this message

Nekhelesh Ramananthan (nik90) wrote on 2015-08-20: Re: leading actions width is too small making it very difficult to press on Nexus 4 (mako)

bug.png Edit (100.6 KiB, image/png)

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.

summary:

- leading actions width is too small making it very difficult to press
+ leading actions width is too small making it very difficult to press on
+ Nexus 4 (mako)

Revision history for this message

Victor Thompson (vthompson) wrote on 2015-08-21:

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

Revision history for this message

Femma (femma) wrote on 2015-08-21:

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?

Revision history for this message

Nekhelesh Ramananthan (nik90) wrote on 2015-08-21:

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

Jamie Young (jamiedawsonyoung) on 2015-08-21

Changed in ubuntu-ux:
status:	Incomplete → Confirmed

Revision history for this message

Zsombor Egri (zsombi) wrote on 2015-08-22:

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.

Changed in ubuntu-ui-toolkit (Ubuntu):
assignee:	nobody → Zsombor Egri (zsombi)
importance:	Undecided → Critical
importance:	Critical → Medium

Revision history for this message

Michal Predotka (mpredotka) wrote on 2015-09-03:

leading-old-new.png Edit (319.8 KiB, image/png)

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.

Revision history for this message

Michal Predotka (mpredotka) wrote on 2015-09-03:

trailing-old-new.png Edit (304.1 KiB, image/png)

Revision history for this message

Alan Pope 🍺🐧🐱 🦄 (popey) wrote on 2015-09-03:

#10

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.

Revision history for this message

Zsombor Egri (zsombi) wrote on 2015-09-04:

#11

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.

Alan Pope 🍺🐧🐱 🦄 (popey) on 2015-09-04

summary:

- leading actions width is too small making it very difficult to press on
- Nexus 4 (mako)
+ leading actions width is too small making it very difficult to press

Revision history for this message

SB (emehntehtt) wrote on 2015-09-04: Re: leading actions width is too small making it very difficult to press

#12

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

Olga Kemmet (olga-kemmet) on 2015-09-08

summary:

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

Zsombor Egri (zsombi) on 2015-09-10

description:

updated

Revision history for this message

Michael Sheldon (michael-sheldon) wrote on 2015-09-11:

#13

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)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2015-09-16:

#14

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

Changed in ubuntu-ui-toolkit (Ubuntu):
importance:	Medium → High
importance:	High → Critical

Revision history for this message

Jamie Young (jamiedawsonyoung) wrote on 2015-09-16:

#15

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!

description:	updated
Changed in ubuntu-ux:
status:	Confirmed → Fix Committed

Revision history for this message

Andrea Bernabei (faenil) wrote on 2015-09-16:

#16

@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

Revision history for this message

Andrea Bernabei (faenil) wrote on 2015-09-16:

#17

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

Revision history for this message

Zsombor Egri (zsombi) wrote on 2015-09-17:

#18

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.

Bill Filler (bfiller) on 2015-09-18

Changed in canonical-devices-system-image:
milestone:	none → ww40-2015
assignee:	nobody → Zoltan Balogh (bzoltan)
importance:	Undecided → High

Revision history for this message

Chris Wayne (cwayne) wrote on 2015-09-25:

#19

This happens on MX4 as well (unsurprisingly)

Zsombor Egri (zsombi) on 2015-09-25

Changed in ubuntu-ui-toolkit (Ubuntu):
status:	Confirmed → Fix Released
Changed in canonical-devices-system-image:
status:	New → Fix Released

Pat McGowan (pat-mcgowan) on 2015-10-08

Changed in canonical-devices-system-image:
status:	Fix Released → Fix Committed

Pat McGowan (pat-mcgowan) on 2015-10-19

Changed in canonical-devices-system-image:
status:	Fix Committed → Fix Released

Jamie Young (jamiedawsonyoung) on 2015-11-06

Changed in ubuntu-ux:
status:	Fix Committed → Fix Released

Report a bug

This report contains Public information

Everyone can see this information.

Duplicates of this bug

You are

Subscribing...

Edit bug mail

Other bug subscribers

Bug attachments

Add attachment

Remote bug watches

Bug watches keep track of this bug in other bug trackers.

Ubuntuubuntu-ui-toolkit package

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

Bug Description

Related branches

Duplicates of this bug

Other bug subscribers

Bug attachments

Remote bug watches

Ubuntu
ubuntu-ui-toolkit package