Merge lp:~rpadovani/reminders-app/bottomEdge into lp:reminders-app

[Riccardo Padovani]

Implemented bottomEdge

Added bottomEdge in phone mode: to avoid an annoying flickering when users open a notebook, the bottomEdge is loaded only after notes are loaded (only for notebooks page).

The bottomEdge component has been modified for our purpose

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:196
http://91.189.93.70:8080/job/reminders-app-ci/481/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1578/console
    FAILURE: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-ci/177/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/481/rebuild

review: Needs Fixing (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:197
http://91.189.93.70:8080/job/reminders-app-ci/482/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1579
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1579/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-ci/178

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/482/rebuild

review: Approve (continuous-integration)

[Michael Zanetti (mzanetti)]

small nitpick inline (2 comments). Works reasonably well.

[Riccardo Padovani (rpadovani)]

Thanks, improved

[Michael Zanetti (mzanetti)]

ack

review: Approve

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Autolanding.
More details in the following jenkins job:
http://91.189.93.70:8080/job/reminders-app-autolanding/246/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1808/console
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1808/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-autolanding/138

review: Needs Fixing (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:198
http://91.189.93.70:8080/job/reminders-app-ci/494/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1809/console
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1809/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-ci/190

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/494/rebuild

review: Needs Fixing (continuous-integration)

[Alan Pope 🍺🐧🐱 🦄 (popey)]

E: Release 'utopic' for 'qtdeclarative5-nemo-qml-plugin-folderlistmodel' was not found
E: Release 'utopic' for 'qtdeclarative5-pamauthentication0.1' was not found
E: Release 'utopic' for 'qtdeclarative5-placesmodel0.1' was not found
E: Release 'utopic' for 'ubuntu-filemanager-app' was not found
E: Release 'utopic' for 'ubuntu-filemanager-app-autopilot' was not found

Looks oddly broken?

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:198
http://91.189.93.70:8080/job/reminders-app-ci/499/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1892
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1892/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-ci/195

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/499/rebuild

review: Approve (continuous-integration)

[Francis Ginther (fginther)]

> E: Release 'utopic' for 'qtdeclarative5-nemo-qml-plugin-folderlistmodel' was
> not found
> E: Release 'utopic' for 'qtdeclarative5-pamauthentication0.1' was not found
> E: Release 'utopic' for 'qtdeclarative5-placesmodel0.1' was not found
> E: Release 'utopic' for 'ubuntu-filemanager-app' was not found
> E: Release 'utopic' for 'ubuntu-filemanager-app-autopilot' was not found
>
> Looks oddly broken?

This appears to be fallout from the recent testing issues.

=== added file 'src/app/qml/components/PageWithBottomEdge.qml'
--- src/app/qml/components/PageWithBottomEdge.qml	1970-01-01 00:00:00 +0000
+++ src/app/qml/components/PageWithBottomEdge.qml	2014-09-03 16:57:24 +0000
@@ -0,0 +1,376 @@
+/*
+ * Copyright (C) 2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+    Example:
+
+    MainView {
+        objectName: "mainView"
+
+        applicationName: "com.ubuntu.developer.boiko.bottomedge"
+
+        width: units.gu(100)
+        height: units.gu(75)
+
+        Component {
+            id: pageComponent
+
+            PageWithBottomEdge {
+                id: mainPage
+                title: i18n.tr("Main Page")
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: "white"
+                }
+
+                bottomEdgePageComponent: Page {
+                    title: "Contents"
+                    anchors.fill: parent
+                    //anchors.topMargin: contentsPage.flickable.contentY
+
+                    ListView {
+                        anchors.fill: parent
+                        model: 50
+                        delegate: ListItems.Standard {
+                            text: "One Content Item: " + index
+                        }
+                    }
+                }
+                bottomEdgeTitle: i18n.tr("Bottom edge action")
+            }
+        }
+
+        PageStack {
+            id: stack
+            Component.onCompleted: stack.push(pageComponent)
+        }
+    }
+
+*/
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Evernote 0.1
+
+Page {
+    id: page
+
+    property alias bottomEdgePageComponent: edgeLoader.sourceComponent
+    property alias bottomEdgePageSource: edgeLoader.source
+    property alias bottomEdgeTitle: tipLabel.text
+    property alias bottomEdgeEnabled: bottomEdge.visible
+    property int bottomEdgeExpandThreshold: page.height * 0.2
+    property int bottomEdgeExposedArea: bottomEdge.state !== "expanded" ? (page.height - bottomEdge.y - bottomEdge.tipHeight) : _areaWhenExpanded
+    property bool reloadBottomEdgePage: true
+
+    readonly property alias bottomEdgePage: edgeLoader.item
+    readonly property bool isReady: (tip.opacity === 0.0)
+    readonly property bool isCollapsed: (tip.opacity === 1.0)
+    readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)
+    property var temporaryProperties: null
+
+    property bool bottomEdgeLabelVisible: true
+
+    property bool _showEdgePageWhenReady: false
+    property int _areaWhenExpanded: 0
+
+    signal bottomEdgeReleased()
+    signal bottomEdgeDismissed()
+
+
+    function showBottomEdgePage(source, properties)
+    {
+        edgeLoader.setSource(source, properties)
+        temporaryProperties = properties
+        _showEdgePageWhenReady = true
+    }
+
+    function setBottomEdgePage(source, properties)
+    {
+        edgeLoader.setSource(source, properties)
+    }
+
+    function _pushPage()
+    {
+        if (edgeLoader.status === Loader.Ready) {
+            edgeLoader.item.active = true
+
+            NotesStore.createNote("Untitled", filter);
+
+            if (edgeLoader.item.flickable) {
+                edgeLoader.item.flickable.contentY = -page.header.height
+                edgeLoader.item.flickable.returnToBounds()
+            }
+            if (edgeLoader.item.ready)
+                edgeLoader.item.ready()
+        }
+    }
+
+
+    Component.onCompleted: {
+        // avoid a binding on the expanded height value
+        var expandedHeight = height;
+        _areaWhenExpanded = expandedHeight;
+    }
+
+    onActiveChanged: {
+        if (active) {
+            bottomEdge.state = "collapsed"
+        }
+    }
+
+    onBottomEdgePageLoadedChanged: {
+        if (_showEdgePageWhenReady && bottomEdgePageLoaded) {
+            bottomEdge.state = "expanded"
+            _showEdgePageWhenReady = false
+        }
+    }
+
+    Rectangle {
+        id: bgVisual
+
+        visible: bottomEdgeLabelVisible
+
+        color: "black"
+        anchors.fill: page
+        opacity: 0.7 * ((page.height - bottomEdge.y) / page.height)
+        z: 1
+    }
+
+    Rectangle {
+        id: bottomEdge
+        objectName: "bottomEdge"
+
+        readonly property int tipHeight: units.gu(3)
+        readonly property int pageStartY: 0
+
+        visible: bottomEdgeLabelVisible
+
+        z: 1
+        color: Theme.palette.normal.background
+        parent: page
+        anchors {
+            left: parent.left
+            right: parent.right
+        }
+        height: page.height
+        y: height
+
+        Rectangle {
+            id: shadow
+
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            height: units.gu(1)
+            y: -height
+            opacity: 0.0
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "transparent" }
+                GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
+            }
+        }
+
+        Item {
+            id: tipContainer
+            objectName: "bottomEdgeTip"
+
+            width: childrenRect.width
+            height: bottomEdge.tipHeight
+            clip: true
+            y: -bottomEdge.tipHeight
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            UbuntuShape {
+                id: tip
+
+                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
+                }
+            }
+        }
+
+        MouseArea {
+            preventStealing: true
+            drag.axis: Drag.YAxis
+            drag.target: bottomEdge
+            drag.minimumY: bottomEdge.pageStartY
+            drag.maximumY: page.height
+
+            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
+                }
+            }
+
+            onPressed: {
+                bottomEdge.state = "floating"
+                bottomEdge.y -= bottomEdge.tipHeight
+            }
+        }
+
+        Behavior on y {
+            UbuntuNumberAnimation {}
+        }
+
+        state: "collapsed"
+        states: [
+            State {
+                name: "collapsed"
+                PropertyChanges {
+                    target: bottomEdge
+                    y: bottomEdge.height
+                }
+                PropertyChanges {
+                    target: tip
+                    opacity: 1.0
+                }
+            },
+            State {
+                name: "expanded"
+                PropertyChanges {
+                    target: bottomEdge
+                    y: bottomEdge.pageStartY
+                }
+                PropertyChanges {
+                    target: tip
+                    opacity: 0.0
+                }
+            },
+            State {
+                name: "floating"
+                PropertyChanges {
+                    target: shadow
+                    opacity: 1.0
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "expanded"
+                SequentialAnimation {
+                    UbuntuNumberAnimation {
+                        targets: [bottomEdge,tip]
+                        properties: "y,opacity"
+                        duration: UbuntuAnimation.SlowDuration
+                    }
+                    ScriptAction {
+                        script: page._pushPage()
+                    }
+                }
+            },
+            Transition {
+                from: "expanded"
+                to: "collapsed"
+                SequentialAnimation {
+                    ScriptAction {
+                        script: {
+                            edgeLoader.item.parent = edgeLoader
+                            edgeLoader.item.anchors.fill = edgeLoader
+                            edgeLoader.item.active = false
+                        }
+                    }
+                    UbuntuNumberAnimation {
+                        targets: [bottomEdge,tip]
+                        properties: "y,opacity"
+                        duration: UbuntuAnimation.SlowDuration
+                    }
+                    ScriptAction {
+                        script: {
+                            // destroy current bottom page
+                            if (page.reloadBottomEdgePage) {
+                                edgeLoader.active = false
+                                // remove properties from old instance
+                                if (edgeLoader.source !== "") {
+                                    var properties = {}
+                                    if (temporaryProperties !== null) {
+                                        properties = temporaryProperties
+                                        temporaryProperties = null
+                                    }
+
+                                    edgeLoader.setSource(edgeLoader.source, properties)
+                                }
+                            }
+
+                            // notify
+                            page.bottomEdgeDismissed()
+
+                            // load a new bottom page in memory
+                            edgeLoader.active = true
+                        }
+                    }
+                }
+            },
+            Transition {
+                from: "floating"
+                to: "collapsed"
+                UbuntuNumberAnimation {
+                    targets: [bottomEdge,tip]
+                    properties: "y,opacity"
+                }
+            }
+        ]
+
+        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
+                property: "anchors.topMargin"
+                value: edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
+                when: (edgeLoader.status === Loader.Ready && !page.isReady)
+            }
+
+            onLoaded: {
+                if (page.isReady && edgeLoader.item.active != true) {
+                    page._pushPage()
+                }
+            }
+        }
+    }
+}

=== modified file 'src/app/qml/reminders.qml'
--- src/app/qml/reminders.qml	2014-08-06 09:44:18 +0000
+++ src/app/qml/reminders.qml	2014-09-03 16:57:24 +0000
@@ -207,6 +207,8 @@
                 page: NotesPage {
                     id: notesPage
 
+                    narrowMode: root.narrowMode
+
                     onEditNote: {
                         root.switchToEditMode(note)
                     }
@@ -236,11 +238,13 @@
                 page: NotebooksPage {
                     id: notebooksPage
 
+                    narrowMode: root.narrowMode
+
                     onOpenNotebook: {
                         var component = Qt.createComponent(Qt.resolvedUrl("ui/NotesPage.qml"))
                         var page = component.createObject();
                         print("opening note page for notebook", notebookGuid)
-                        pagestack.push(page, {title: title, filter: notebookGuid});
+                        pagestack.push(page, {title: title, filter: notebookGuid, narrowMode: narrowMode});
                         page.selectedNoteChanged.connect(function() {
                             print("foo", page.selectedNote);
                             if (page.selectedNote) {

=== modified file 'src/app/qml/ui/EditNotePage.qml'
--- src/app/qml/ui/EditNotePage.qml	2014-05-07 16:34:06 +0000
+++ src/app/qml/ui/EditNotePage.qml	2014-09-03 16:57:24 +0000
@@ -25,6 +25,7 @@
 Page {
     id: root
     property alias note: editNoteView.note
+    property alias isBottomEdge: editNoteView.isBottomEdge
 
     signal exitEditMode(var note)
 

=== modified file 'src/app/qml/ui/EditNoteView.qml'
--- src/app/qml/ui/EditNoteView.qml	2014-07-14 13:40:24 +0000
+++ src/app/qml/ui/EditNoteView.qml	2014-09-03 16:57:24 +0000
@@ -26,6 +26,7 @@
 Item {
     id: root
     property var note
+    property bool isBottomEdge: false
 
     onNoteChanged: {
         for (var i = 0; i < notebookSelector.model.count; i++) {
@@ -74,6 +75,7 @@
         spacing: units.gu(1)
 
         Row {
+            visible: !root.isBottomEdge
             anchors { left: parent.left; right: parent.right }
             height: units.gu(5)
             spacing: units.gu(2)
@@ -126,6 +128,7 @@
         }
 
         Divider {
+            visible: !root.isBottomEdge
             anchors { leftMargin: -units.gu(2); rightMargin: -units.gu(2) }
             height: units.gu(2)
         }

=== modified file 'src/app/qml/ui/NotebooksPage.qml'
--- src/app/qml/ui/NotebooksPage.qml	2014-06-24 00:01:51 +0000
+++ src/app/qml/ui/NotebooksPage.qml	2014-09-03 16:57:24 +0000
@@ -26,7 +26,9 @@
     id: root
     objectName: 'notebooksPage'
 
-    signal openNotebook(string title, string notebookGuid)
+    property bool narrowMode
+
+    signal openNotebook(string title, string notebookGuid, bool narrowMode)
 
     onActiveChanged: {
         if (active) {
@@ -135,7 +137,7 @@
             delegate: NotebooksDelegate {
                 onClicked: {
                     print("selected notebook:", model.guid)
-                    root.openNotebook(name, model.guid)
+                    root.openNotebook(name, model.guid, narrowMode)
                 }
             }
 

=== modified file 'src/app/qml/ui/NotesPage.qml'
--- src/app/qml/ui/NotesPage.qml	2014-08-14 17:17:05 +0000
+++ src/app/qml/ui/NotesPage.qml	2014-09-03 16:57:24 +0000
@@ -23,13 +23,24 @@
 import Evernote 0.1
 import "../components"
 
-Page {
+PageWithBottomEdge {
     id: root
 
     property var selectedNote: null
+    property bool narrowMode
 
     property alias filter: notes.filterNotebookGuid
 
+    // We enable bottomEdge only in narrowMode.
+    // To avoid flashing when a notebook is loaded, we wait to have all notes
+    // loaded, but only in notebook view (when a filter is set), not in notes
+    // page, because there isn't he flashing.
+    bottomEdgeLabelVisible: narrowMode && (!notes.filterNotebookGuid || !notes.loading)
+    bottomEdgeTitle: i18n.tr("Add note")
+    bottomEdgePageComponent: EditNotePage {
+        isBottomEdge: true;
+    }
+
     signal openSearch()
     signal editNote(var note)
 
@@ -42,11 +53,12 @@
     tools: ToolbarItems {
         ToolbarButton {
             action: Action {
+                visible: !narrowMode
                 text: i18n.tr("Add note")
                 iconName: "add"
                 onTriggered: {
                     NotesStore.createNote(i18n.tr("Untitled"), filter);
-                }   
+                }
             }
         }
 
@@ -118,7 +130,7 @@
                 }
             }
         }
-   }
+    }
 
     Notes {
         id: notes