Unity 8

Merge lp:~cimi/unity8/fix-previewoverlay into lp:unity8

fix-previewoverlay
Merge into trunk

Proposed by Andrea Cimitan on 2015-03-04

Status:	Merged
Approved by:	Albert Astals Cid on 2015-03-10
Approved revision:	1629
Merged at revision:	1683
Proposed branch:	lp:~cimi/unity8/fix-previewoverlay
Merge into:	lp:unity8
Diff against target:	230 lines (+106/-36) 4 files modified qml/Dash/Previews/PreviewImageGallery.qml (+25/-6) qml/Dash/Previews/PreviewOverlay.qml (+77/-26) qml/Dash/Previews/PreviewZoomableImage.qml (+3/-3) tests/qmltests/Dash/Previews/tst_PreviewImageGallery.qml (+1/-1)
To merge this branch:	bzr merge lp:~cimi/unity8/fix-previewoverlay
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Needs Fixing on 2015-03-10
Albert Astals Cid (community)		2015-03-04	Approve on 2015-03-10
Review via email: mp+251728@code.launchpad.net

Commit Message

Refactor PreviewOverlay to fix weird zoom out/in animations when previewing images from the Previews

Description of the Change

* Are there any related MPs required for this MP to build/function as expected? Please list.
n
* Did you perform an exploratory manual test run of your code change and any related functionality?
y
* Did you make sure that your branch does not contain spurious tags?
y
* If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
n/a
* If you changed the UI, has there been a design review?
n/a

PS Jenkins bot (ps-jenkins) wrote on 2015-03-04:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/5388/rebuild

review: Needs Fixing (continuous-integration)

lp:~cimi/unity8/fix-previewoverlay updated on 2015-03-05

1626. By Andrea Cimitan on 2015-03-05: More fixes

PS Jenkins bot (ps-jenkins) wrote on 2015-03-05:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/5392/rebuild

review: Needs Fixing (continuous-integration)

lp:~cimi/unity8/fix-previewoverlay updated on 2015-03-09

1627. By Andrea Cimitan on 2015-03-09: Fix aspect ratio overlay

PS Jenkins bot (ps-jenkins) wrote on 2015-03-09:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/5401/rebuild

review: Needs Fixing (continuous-integration)

Albert Astals Cid (aacid) wrote on 2015-03-10:

It works better but there's still some rough edges. For example:

* Go to "Machines vs Machines" in the store scope
* Click on the first image
* Nice animation for opening
* While in preview, swipe to the second image
* Now close it
* Not nice animation
* Now open and close second image again
* Nice animation

So the code knows how to do the nice animation for the second image, but not if coming from the first one

Also if you close the second image fast after having scrolled to it, you can still see the bottom list moving, i guess we should make that animation/speed dependant on wheter the preview is open on top or not.

review: Needs Fixing

PS Jenkins bot (ps-jenkins) wrote on 2015-03-10:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/5403/rebuild

review: Needs Fixing (continuous-integration)

lp:~cimi/unity8/fix-previewoverlay updated on 2015-03-10

1628. By Andrea Cimitan on 2015-03-10: Fix as review
1629. By Andrea Cimitan on 2015-03-10: A couple of minor tweaks

PS Jenkins bot (ps-jenkins) wrote on 2015-03-10:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/5405/rebuild

review: Needs Fixing (continuous-integration)

Albert Astals Cid (aacid) wrote on 2015-03-10:

* Did you perform an exploratory manual test run of the code change and any related functionality?
Yes, works nicely

* Did CI run pass?
No, known tests to fail, elsewhere not related to changes here

* Did you make sure that the branch does not contain spurious tags?
Yes

review: Approve

PS Jenkins bot (ps-jenkins) wrote on 2015-03-10:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/5406/rebuild

review: Needs Fixing (continuous-integration)

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:

Andrea Cimitan

Mohammad Rakibul Hasan

Unity Team

 === modified file 'qml/Dash/Previews/PreviewImageGallery.qml'
 --- qml/Dash/Previews/PreviewImageGallery.qml	2014-10-29 13:52:58 +0000
 +++ qml/Dash/Previews/PreviewImageGallery.qml	2015-03-10 12:24:03 +0000
@@ -38,6 +38,8 @@
          model: root.widgetData["sources"]
          clip: true
++        onCurrentIndexChanged: overlay.updateInitialItem()
++
          LazyImage {
              objectName: "placeholderScreenshot"
              anchors {
@@ -65,9 +67,8 @@
                  id: mouseArea
                  anchors.fill: parent
                  onClicked: {
--                    overlay.delegateItem.currentIndex = index;
--                    overlay.initialX = rootItem.mapFromItem(parent, 0, 0).x;
--                    overlay.initialY = rootItem.mapFromItem(parent, 0, 0).y;
++                    previewImageListView.currentIndex = index;
++                    overlay.updateInitialItem();
                      overlay.show();
+                 }
+             }
@@ -78,9 +79,14 @@
          id: overlay
          objectName: "overlay"
          parent: rootItem
--        width: parent.width
--        height: parent.height
--        initialScale: previewImageListView.height / rootItem.height
++        anchors.fill: parent
++
++        function updateInitialItem() {
++            initialX = rootItem.mapFromItem(previewImageListView.currentItem, 0, 0).x;
++            initialY = rootItem.mapFromItem(previewImageListView.currentItem, 0, 0).y;
++            initialWidth = previewImageListView.currentItem.width;
++            initialHeight = previewImageListView.currentItem.height;
++        }
          delegate: ListView {
              id: overlayListView
@@ -92,6 +98,19 @@
              snapMode: ListView.SnapOneItem
              boundsBehavior: Flickable.DragAndOvershootBounds
              model: root.widgetData["sources"]
++            currentIndex: previewImageListView.currentIndex
++
++            onCurrentIndexChanged: {
++                // if the index changed while overlay is visible, it was from user interaction,
++                // let's update the index of the original listview
++                if (overlay.visible) {
++                    previewImageListView.highlightMoveDuration = 0;
++                    previewImageListView.highlightResizeDuration = 0;
++                    previewImageListView.currentIndex = currentIndex;
++                    previewImageListView.highlightMoveDuration = -1;
++                    previewImageListView.highlightResizeDuration = -1;
++                }
++            }
              delegate: Image {
                  id: screenshot
 === modified file 'qml/Dash/Previews/PreviewOverlay.qml'
 --- qml/Dash/Previews/PreviewOverlay.qml	2014-10-22 20:15:09 +0000
 +++ qml/Dash/Previews/PreviewOverlay.qml	2015-03-10 12:24:03 +0000
@@ -22,48 +22,99 @@
      id: overlay
      objectName: "overlay"
--    readonly property real scaleProgress: (scale - initialScale) / (1.0 - initialScale)
++    readonly property real aspectRatio: width / height
++    readonly property real initialAspectRatio: initialWidth / initialHeight
++    readonly property real initialXScale: initialWidth / width
++    readonly property real initialYScale: initialHeight / height
      property alias delegate: loader.sourceComponent
      property alias delegateItem: loader.item
      property alias headerShown: overlayHeader.shown
--    property bool shown: false
--    property bool opening: false
      property real initialX: 0
      property real initialY: 0
--    property real initialScale: 0
--
--    visible: scale > initialScale
--    clip: visible && scale < 1.0
--    scale: shown ? 1.0 : initialScale
++    property real initialWidth: 1
++    property real initialHeight: 1
++
++    property real xScale: initialXScale
++    property real yScale: initialYScale
++    property real progress: 0
++
++    implicitWidth: 1
++    implicitHeight: 1
++    visible: progress > 0
++    clip: progress > 0 && progress < 1
++    color: Qt.rgba(0, 0, 0, progress)
      transformOrigin: Item.TopLeft
--    transform: Translate {
--        x: overlay.initialX - overlay.initialX * overlay.scaleProgress
--        y: overlay.initialY - overlay.initialY * overlay.scaleProgress
--    }
--    color: Qt.rgba(0, 0, 0, scaleProgress)
--    radius: units.gu(1) - units.gu(1) * scaleProgress
++    transform: [
++        Scale {
++            origin.x: 0
++            origin.y: 0
++            xScale: overlay.xScale
++            yScale: overlay.yScale
++        },
++        Translate {
++            x: overlay.initialX - overlay.initialX * overlay.progress
++            y: overlay.initialY - overlay.initialY * overlay.progress
++        }
++    ]
++    state: "hidden"
++    states: [
++        State {
++            name: "shown"
++            PropertyChanges { target: overlay; progress: 1; xScale: 1; yScale: 1 }
++        },
++        State {
++            name: "hidden"
++            PropertyChanges { target: overlay; progress: 0; xScale: initialXScale; yScale: initialYScale }
++        }
++    ]
++    transitions: [
++        Transition {
++            from: "hidden"
++            to: "shown"
++            UbuntuNumberAnimation {
++                target: overlay
++                properties: "progress,xScale,yScale"
++                duration: UbuntuAnimation.FastDuration
++            }
++        },
++        Transition {
++            from: "shown"
++            to: "hidden"
++            UbuntuNumberAnimation {
++                target: overlay
++                properties: "progress,xScale,yScale"
++                duration: UbuntuAnimation.FastDuration / 2
++            }
++        }
++    ]
      function show() {
--        opening = true;
--        shown = true;
++        state = "shown"
+     }
      function hide() {
--        opening = false;
--        shown = false;
--    }
--
--    Behavior on scale {
--        UbuntuNumberAnimation {
--            duration: overlay.opening ? UbuntuAnimation.FastDuration :
--                                        UbuntuAnimation.FastDuration / 2
--        }
++        state = "hidden"
+     }
      Loader {
          id: loader
          anchors.fill: parent
++
++        readonly property bool verticalScaling: initialAspectRatio / aspectRatio >= 1
++        readonly property real initialXScale: verticalScaling ? 1 : aspectRatio / initialAspectRatio
++        readonly property real initialYScale: verticalScaling ? initialAspectRatio / aspectRatio : 1
++        readonly property real xScale: verticalScaling ? loader.initialXScale - loader.initialXScale * overlay.progress + overlay.progress :
++                                                         loader.yScale * overlay.yScale / overlay.xScale
++        readonly property real yScale: verticalScaling ? loader.xScale * overlay.xScale / overlay.yScale :
++                                                         loader.initialYScale - loader.initialYScale * overlay.progress + overlay.progress
++
++        transform: Scale {
++            origin.x: parent.width / 2
++            origin.y: parent.height / 2
++            xScale: loader.xScale
++            yScale: loader.yScale
++        }
+     }
      Rectangle {
@@ -77,7 +128,7 @@
+         }
          height: units.gu(7)
          visible: opacity > 0
--        opacity: overlay.scaleProgress > 0.6 && shown ? 0.8 : 0
++        opacity: overlay.state == "shown" && overlay.progress > 0.8 && shown ? 0.8 : 0
          color: "black"
          Behavior on opacity {
 === modified file 'qml/Dash/Previews/PreviewZoomableImage.qml'
 --- qml/Dash/Previews/PreviewZoomableImage.qml	2014-11-05 08:37:55 +0000
 +++ qml/Dash/Previews/PreviewZoomableImage.qml	2015-03-10 12:24:03 +0000
@@ -59,9 +59,9 @@
          id: overlay
          objectName: "overlay"
          parent: rootItem
--        width: parent.width
--        height: parent.height
--        initialScale: lazyImage.height / rootItem.height
++        anchors.fill: parent
++        initialWidth: lazyImage.width
++        initialHeight: lazyImage.height
          delegate: ZoomableImage {
              anchors.fill: parent
 === modified file 'tests/qmltests/Dash/Previews/tst_PreviewImageGallery.qml'
 --- tests/qmltests/Dash/Previews/tst_PreviewImageGallery.qml	2015-01-09 09:15:45 +0000
 +++ tests/qmltests/Dash/Previews/tst_PreviewImageGallery.qml	2015-03-10 12:24:03 +0000
@@ -22,7 +22,7 @@
  Rectangle {
      id: root
      width: units.gu(80)
--    height: units.gu(80)
++    height: units.gu(70)
      color: "lightgrey"
      property var sourcesModel0: {