** Description changed:

  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
-                 }
-             }
-         }
+         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.

** Changed in: ubuntu-ux
       Status: In Progress => Fix Committed

-- 
You received this bug notification because you are a member of Ubuntu
Touch seeded packages, which is subscribed to ubuntu-ui-toolkit in
Ubuntu.
https://bugs.launchpad.net/bugs/1375799

Title:
  [sdk] PullToRefreshStyle label text animates poorly

Status in Ubuntu UI Toolkit:
  Triaged
Status in Ubuntu UX:
  Fix Committed
Status in ubuntu-ui-toolkit package in Ubuntu:
  Triaged

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.

To manage notifications about this bug go to:
https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1375799/+subscriptions

-- 
Mailing list: https://launchpad.net/~touch-packages
Post to     : touch-packages@lists.launchpad.net
Unsubscribe : https://launchpad.net/~touch-packages
More help   : https://help.launchpad.net/ListHelp

Reply via email to