[sdk] PullToRefreshStyle label text animates poorly

Bug #1375799 reported by Michael Terry
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Ubuntu UI Toolkit
Triaged
Low
Unassigned
Ubuntu UX
Fix Committed
Low
Femma
ubuntu-ui-toolkit (Ubuntu)
Triaged
Low
Unassigned

Bug Description

PullToRefreshStyle has two text options: "Pull to refresh" and "Release to refresh". It tries to animate between them, using an opacity fade in/out. But unfortunately, the text itself changes immediately before the fade out. So it looks very unsightly.

Maybe some code like the following, that I've used as a workaround in unity8. Note the PropertyAction between the two NumberAnimations.

        states: [
            State {
                name: "pulling"
                when: styledItem.target.dragging && !releaseToRefresh
                PropertyChanges { target: pullLabel; text: i18n.tr("Pull to refresh…") }
            },
            State {
                name: "releasable"
                when: styledItem.target.dragging && releaseToRefresh
                PropertyChanges { target: pullLabel; text: i18n.tr("Release to refresh…") }
            }
        ]
        transitions: Transition {
            SequentialAnimation {
                UbuntuNumberAnimation {
                    target: pullLabel
                    property: "opacity"
                    to: 0.0
                }
                PropertyAction {
                    target: pullLabel
                    property: "text"
                }
                UbuntuNumberAnimation {
                    target: pullLabel
                    property: "opacity"
                    to: 1.0
                }
            }
        }

UX Solution:
We should get rid of the text 'pull to refresh and release to refresh'. Mobile users should now be accustomed to the affordance of pulling and releasing to refresh. Instead we should use an indeterminate indicator to provide feedback to the user when they have pulled to refresh (such as the one in the UITK spec: https://docs.google.com/document/edit?hgd=1&id=1nFm8xiYhKXXuEO_IvMXoD0lASbYzYXva1BWMVanU3iw#heading=h.37zlmvphdoig)

This functionality will be added to the UITK document for the pull to refresh component.

Revision history for this message
Zsombor Egri (zsombi) wrote :

You are welcome to patch it :)

However remember that we need some state where we stop showing the label and show the activity indicator before we rebound the Flickable.

Changed in ubuntu-ui-toolkit:
importance: Undecided → Low
status: New → Triaged
Revision history for this message
Michael Terry (mterry) wrote :

Yeah my code is from an instance where we don't even want the ActivityIndicator.

Zoltan Balogh (bzoltan)
Changed in ubuntu-ui-toolkit (Ubuntu):
importance: Undecided → Low
status: New → Triaged
Changed in ubuntu-ux:
status: New → Triaged
summary: - PullToRefreshStyle label text animates poorly
+ [sdk] PullToRefreshStyle label text animates poorly
Changed in ubuntu-ux:
importance: Undecided → Low
assignee: nobody → Femma (femma)
Femma (femma)
Changed in ubuntu-ux:
status: Triaged → In Progress
Femma (femma)
description: updated
Changed in ubuntu-ux:
status: In Progress → Fix Committed
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

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