address-book-app

Merge lp:~renatofilho/address-book-app/fix-bottom-edge-animations into lp:~phablet-team/address-book-app/staging

fix-bottom-edge-animations
Merge into staging

Proposed by Renato Araujo Oliveira Filho on 2014-09-01

Status:

Merged

Approved by:

Renato Araujo Oliveira Filho on 2014-09-16

Approved revision:

298

Merged at revision:

299

Proposed branch:

lp:~renatofilho/address-book-app/fix-bottom-edge-animations

Merge into:

lp:~phablet-team/address-book-app/staging

Diff against target:

389 lines (+136/-147)

2 files modified

src/imports/Ubuntu/Contacts/PageWithBottomEdge.qml (+135/-147)
tests/autopilot/address_book_app/pages/_common.py (+1/-0)

To merge this branch:

bzr merge lp:~renatofilho/address-book-app/fix-bottom-edge-animations

Undecided

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Approve on 2014-09-16
Gustavo Pichorim Boiko (community)		2014-09-01	Approve on 2014-09-16
Nekhelesh Ramananthan (community)			Needs Fixing on 2014-09-16
Review via email: mp+232925@code.launchpad.net

Commit message

Fixed bottom edge tip to appear on mouse press instead of click.
Make sure that the animation runs completely to avoid problems on the app (partial run could cause the page to not be pushed to stack)
Added a final animation when bottom edge page get fully visible. (Based on designer transition doc)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-01:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/309/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-01:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/310/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-02:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/311/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-05:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/319/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-06:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/322/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-07:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/323/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Nekhelesh Ramananthan (nik90) wrote on 2014-09-08:

It would be recommended to take https://bugs.launchpad.net/ubuntu-clock-app/+bug/1357945 into consideration in this MP since it is involved around the bottom edge visibility and animations.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-08:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/324/rebuild

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-11:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/326/rebuild

review: Approve (continuous-integration)

Revision history for this message

Nekhelesh Ramananthan (nik90) wrote on 2014-09-14:

When I try to merge this into the clock app's code, I get an error about referencing to an component not defined at the line,

214 + visible: root.isCollapsed

I searched for "root" in PageWithBottomEdge.qml and couldn't find it. Which "root" component are you trying to access in that code?

review: Needs Information

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-15:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/327/rebuild

review: Approve (continuous-integration)

Revision history for this message

Nekhelesh Ramananthan (nik90) wrote on 2014-09-16:

In your rev 292, you added a final animation when the bottom edge page gets fully visible (based on designer trasition doc). Can you provide a link to that document and also enable sharing with me please since that animation is causing the listview in the bottom edge page to jump up 4 grid units and then come down which is unpleasant. I want to show the document to the clock app designer to get his input.

279 + SmoothedAnimation {
280 + target: edgeLoader
281 + property: "anchors.topMargin"
282 + to: - units.gu(4)
283 + duration: UbuntuAnimation.FastDuration
284 + easing.type: Easing.Linear
285 + }
286 + SmoothedAnimation {
287 + target: edgeLoader
288 + property: "anchors.topMargin"
289 + to: 0
290 + duration: UbuntuAnimation.FastDuration
291 + easing: UbuntuAnimation.StandardEasing
292 }

If you look at the bug report and also design doc at https://docs.google.com/presentation/d/1YuB3SW5UKI5t9ox4Gc9snsOnFAr1j0PTFjbtK-eLO8w/edit#slide=id.g386935507_0225, it says that the bottom edge hint must be visible on app startup and only disappear when the user starts interacting with the screen. In my testing, the bottom edge hint appears hidden on app start up. Only when I press it once, does it show up and stays shown.

Also the bottom edge should reveal itself automatically after 5 seconds when the user has stopped interacting with the screen. I don't see any timer which does this. Also in my testing, this behavior was not observed.

review: Needs Fixing

Revision history for this message

Renato Araujo Oliveira Filho (renatofilho) wrote on 2014-09-16:

@nik90

The bottom edge will be visible while it has focus.

If it is appearing invisible is because any other component in the UI is stoling the focus.

Revision history for this message

Renato Araujo Oliveira Filho (renatofilho) wrote on 2014-09-16:

@nick90

This is the video showing the bottom edge animation: https://www.youtube.com/watch?v=wFwQ98lRDw0

Revision history for this message

Gustavo Pichorim Boiko (boiko) on 2014-09-16:

review: Needs Fixing

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-16:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/phablet-team-address-book-app-staging-ci/328/rebuild

review: Approve (continuous-integration)

Revision history for this message

Gustavo Pichorim Boiko (boiko) wrote on 2014-09-16:

Code looks good and works as expected!

review: Approve

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-16:

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) on 2014-09-16:

review: Approve (continuous-integration)

Revision history for this message

Bill Filler (bfiller) wrote on 2014-09-18:

works well on address book app. on dialer app after you press the back button on the Recents page it's kind of weird as the tab seems a bit jumpy once it hits the bottom and is partially revealed and then fully revealed. I would think that when hitting the back button you would just leave the tab fully revealed.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Renato Araujo Oliveira Filho

Ubuntu Phablet Team

 === modified file 'src/imports/Ubuntu/Contacts/PageWithBottomEdge.qml'
 --- src/imports/Ubuntu/Contacts/PageWithBottomEdge.qml	2014-07-30 22:09:12 +0000
 +++ src/imports/Ubuntu/Contacts/PageWithBottomEdge.qml	2014-09-16 14:32:25 +0000
@@ -71,7 +71,7 @@
      property alias bottomEdgePageComponent: edgeLoader.sourceComponent
      property alias bottomEdgePageSource: edgeLoader.source
      property alias bottomEdgeTitle: tipLabel.text
--    property alias bottomEdgeEnabled: bottomEdge.visible
++    property bool bottomEdgeEnabled: true
      property int bottomEdgeExpandThreshold: page.height * 0.2
      property int bottomEdgeExposedArea: bottomEdge.state !== "expanded" ? (page.height - bottomEdge.y - bottomEdge.tipHeight) : _areaWhenExpanded
      property bool reloadBottomEdgePage: true
@@ -142,13 +142,97 @@
          z: 1
+     }
--    Timer {
--        id: hideIndicator
--
--        interval: 3000
--        running: true
--        repeat: false
--        onTriggered: tip.hiden = true
++    UbuntuShape {
++        id: tip
++        objectName: "bottomEdgeTip"
++
++        property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)
++
++        enabled: mouseArea.enabled
++        anchors {
++            bottom: parent.bottom
++            horizontalCenter: bottomEdge.horizontalCenter
++            bottomMargin: hidden ? - height + units.gu(1) : -units.gu(1)
++            Behavior on bottomMargin {
++                UbuntuNumberAnimation {
++                    duration: UbuntuAnimation.SnapDuration
++                }
++            }
++        }
++
++        z: 1
++        width: tipLabel.paintedWidth + units.gu(6)
++        height: bottomEdge.tipHeight + units.gu(1)
++        color: Theme.palette.normal.overlay
++        Label {
++            id: tipLabel
++
++            anchors {
++                top: parent.top
++                left: parent.left
++                right: parent.right
++            }
++            height: bottomEdge.tipHeight
++            verticalAlignment: Text.AlignVCenter
++            horizontalAlignment: Text.AlignHCenter
++            opacity: tip.hidden ? 0.0 : 1.0
++            Behavior on opacity {
++                UbuntuNumberAnimation {
++                    duration: UbuntuAnimation.SnapDuration
++                }
++            }
++        }
++    }
++
++    Rectangle {
++        id: shadow
++
++        anchors {
++            left: parent.left
++            right: parent.right
++            bottom: parent.bottom
++        }
++        height: units.gu(1)
++        z: 1
++        opacity: 0.0
++        gradient: Gradient {
++            GradientStop { position: 0.0; color: "transparent" }
++            GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
++        }
++    }
++
++    MouseArea {
++        id: mouseArea
++
++        preventStealing: true
++        drag {
++            axis: Drag.YAxis
++            target: bottomEdge
++            minimumY: bottomEdge.pageStartY
++            maximumY: page.height
++        }
++        enabled: edgeLoader.status == Loader.Ready
++
++        anchors {
++            left: parent.left
++            right: parent.right
++            bottom: parent.bottom
++
++        }
++        height: bottomEdge.tipHeight
++        z: 1
++
++        onReleased: {
++            page.bottomEdgeReleased()
++            if (bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
++                bottomEdge.state = "expanded"
++            } else {
++                bottomEdge.state = "collapsed"
++                bottomEdge.y = bottomEdge.height
++            }
++        }
++
++        onPressed: tip.forceActiveFocus()
+     }
      Rectangle {
@@ -160,107 +244,14 @@
          z: 1
          color: Theme.palette.normal.background
--        parent: page
++        clip: true
          anchors {
              left: parent.left
              right: parent.right
+         }
          height: page.height
          y: height
--
--        UbuntuShape {
--            id: tip
--            objectName: "bottomEdgeTip"
--
--            property bool hiden: false
--
--            readonly property double visiblePosition: (page.height - bottomEdge.y) < units.gu(1) ? -bottomEdge.tipHeight + (page.height - bottomEdge.y) : 0
--            readonly property double invisiblePosition: (page.height - bottomEdge.y) < units.gu(1) ? -units.gu(1) : 0
--
--            z: -1
--            anchors.horizontalCenter: parent.horizontalCenter
--            y: hiden ? invisiblePosition : visiblePosition
--
--            width: tipLabel.paintedWidth + units.gu(6)
--            height: bottomEdge.tipHeight + units.gu(1)
--            color: Theme.palette.normal.overlay
--            Label {
--                id: tipLabel
--
--                anchors {
--                    top: parent.top
--                    left: parent.left
--                    right: parent.right
--                }
--                height: bottomEdge.tipHeight
--                verticalAlignment: Text.AlignVCenter
--                horizontalAlignment: Text.AlignHCenter
--                opacity: tip.hiden ? 0.0 : 1.0
--                Behavior on opacity {
--                    UbuntuNumberAnimation {
--                        duration: UbuntuAnimation.SnapDuration
--                    }
--                }
--            }
--            Behavior on y {
--                UbuntuNumberAnimation {
--                    duration: UbuntuAnimation.SnapDuration
--                }
--            }
--        }
--
--        Rectangle {
--            id: shadow
--
--            anchors {
--                left: parent.left
--                right: parent.right
--            }
--            height: units.gu(1)
--            y: -height
--            z: -2
--            opacity: 0.0
--            gradient: Gradient {
--                GradientStop { position: 0.0; color: "transparent" }
--                GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
--            }
--        }
--
--        MouseArea {
--            id: mouseArea
--
--            preventStealing: true
--            drag {
--                axis: Drag.YAxis
--                target: bottomEdge
--                minimumY: bottomEdge.pageStartY
--                maximumY: page.height
--                threshold: 100
--            }
--
--            anchors {
--                left: parent.left
--                right: parent.right
--            }
--            height: bottomEdge.tipHeight
--            y: -height
--
--            onReleased: {
--                page.bottomEdgeReleased()
--                if (bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
--                    bottomEdge.state = "expanded"
--                } else {
--                    bottomEdge.state = "collapsed"
--                    bottomEdge.y = bottomEdge.height
--                }
--            }
--
--            onClicked: {
--                tip.hiden = false
--                hideIndicator.restart()
--            }
--        }
--
++        visible: page.bottomEdgeEnabled && !page.isCollapsed
          state: "collapsed"
          states: [
              State {
@@ -273,10 +264,6 @@
                      target: tip
                      opacity: 1.0
+                 }
--                PropertyChanges {
--                    target: hideIndicator
--                    running: true
--                }
              },
              State {
                  name: "expanded"
@@ -284,10 +271,6 @@
                      target: bottomEdge
                      y: bottomEdge.pageStartY
+                 }
--                PropertyChanges {
--                    target: hideIndicator
--                    running: false
--                }
              },
              State {
                  name: "floating"
@@ -296,14 +279,6 @@
                      target: shadow
                      opacity: 1.0
+                 }
--                PropertyChanges {
--                    target: hideIndicator
--                    running: false
--                }
--                PropertyChanges {
--                    target: tip
--                    hiden: false
--                }
+             }
+         ]
@@ -311,10 +286,27 @@
              Transition {
                  to: "expanded"
                  SequentialAnimation {
--                    UbuntuNumberAnimation {
++                    alwaysRunToEnd: true
++
++                    SmoothedAnimation {
                          target: bottomEdge
                          property: "y"
--                        duration: UbuntuAnimation.SlowDuration
++                        duration: UbuntuAnimation.FastDuration
++                        easing.type: Easing.Linear
++                    }
++                    SmoothedAnimation {
++                        target: edgeLoader
++                        property: "anchors.topMargin"
++                        to: - units.gu(4)
++                        duration: UbuntuAnimation.FastDuration
++                        easing.type: Easing.Linear
++                    }
++                    SmoothedAnimation {
++                        target: edgeLoader
++                        property: "anchors.topMargin"
++                        to: 0
++                        duration: UbuntuAnimation.FastDuration
++                        easing: UbuntuAnimation.StandardEasing
+                     }
                      ScriptAction {
                          script: page._pushPage()
@@ -325,6 +317,8 @@
                  from: "expanded"
                  to: "collapsed"
                  SequentialAnimation {
++                    alwaysRunToEnd: true
++
                      ScriptAction {
                          script: {
                              Qt.inputMethod.hide()
@@ -333,7 +327,7 @@
                              edgeLoader.item.active = false
+                         }
+                     }
--                    UbuntuNumberAnimation {
++                    SmoothedAnimation {
                          target: bottomEdge
                          property: "y"
                          duration: UbuntuAnimation.SlowDuration
@@ -343,14 +337,15 @@
                              // destroy current bottom page
                              if (page.reloadBottomEdgePage) {
                                  edgeLoader.active = false
++                                // tip will receive focus on page active true
++                            } else {
++                                tip.forceActiveFocus()
+                             }
                              // notify
                              page.bottomEdgeDismissed()
                              edgeLoader.active = true
--                            tip.hiden = false
--                            hideIndicator.restart()
+                         }
+                     }
+                 }
@@ -365,30 +360,23 @@
+             }
+         ]
--        Item {
++        Loader {
++            id: edgeLoader
++
++            asynchronous: true
              anchors.fill: parent
--            clip: true
--
--            Loader {
--                id: edgeLoader
--
--                z: 1
--                active: true
--                asynchronous: true
--                anchors.fill: parent
--
--                //WORKAROUND: The SDK move the page contents down to allocate space for the header we need to avoid that during the page dragging
--                Binding {
--                    target: edgeLoader.status === Loader.Ready ? edgeLoader : null
--                    property: "anchors.topMargin"
--                    value:  edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
--                    when: !page.isReady
--                }
--
--                onLoaded: {
--                    if (page.isReady && edgeLoader.item.active !== true) {
--                        page._pushPage()
--                    }
++            //WORKAROUND: The SDK move the page contents down to allocate space for the header we need to avoid that during the page dragging
++            Binding {
++                target: edgeLoader.status === Loader.Ready ? edgeLoader : null
++                property: "anchors.topMargin"
++                value:  edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
++                when: !page.isReady
++            }
++
++            onLoaded: {
++                tip.forceActiveFocus()
++                if (page.isReady && edgeLoader.item.active !== true) {
++                    page._pushPage()
+                 }
+             }
+         }
 === modified file 'tests/autopilot/address_book_app/pages/_common.py'
 --- tests/autopilot/address_book_app/pages/_common.py	2014-08-05 19:02:51 +0000
 +++ tests/autopilot/address_book_app/pages/_common.py	2014-09-16 14:32:25 +0000
@@ -39,6 +39,7 @@
          """Bring the bottom edge page to the screen"""
          try:
              action_item = self.wait_select_single(objectName='bottomEdgeTip')
++            action_item.enabled.wait_for(True)
              start_x = (action_item.globalRect.x +
                         (action_item.globalRect.width * 0.5))
              start_y = action_item.globalRect.y + (action_item.height * 0.2)

address-book-app

Merge lp:~renatofilho/address-book-app/fix-bottom-edge-animations into lp:~phablet-team/address-book-app/staging

Commit message

Description of the change

Preview Diff

Subscribers