Merge lp:~acerisara/ubuntu-calendar-app/bottom-edge-autopilot into lp:ubuntu-calendar-app

[Andrea Cerisara]

New event autopilot tests: opening the page with bottom edge button.

The autopilot tests for the new event page are now using the bottom edge button. WIP, tests are currently failing: it seems that when opening the page with the bottom edge button the calendar is not always set to "Personal".

Unmerged revisions

561. By Andrea Cerisara on 2014-12-09

New event autopilot tests: opening the page with bottom edge button

=== modified file 'DayView.qml'
--- DayView.qml	2014-11-06 13:57:42 +0000
+++ DayView.qml	2014-12-09 21:47:26 +0000
@@ -21,12 +21,13 @@
 import "dateExt.js" as DateExt
 import "ViewType.js" as ViewType
 
-Page{
+PageWithBottomEdge {
     id: dayViewPage
     objectName: "dayViewPage"
 
     property var currentDay: new Date()
     property bool isCurrentPage: false
+    property var eventModel;
 
     signal dateSelected(var date);
 
@@ -60,6 +61,14 @@
         }
     }
 
+    reloadBottomEdgePage: true
+    bottomEdgeTitle : i18n.tr("New Event")
+    bottomEdgePageComponent : NewEvent {
+        model: eventModel
+        date: currentDay
+    }
+
+
     Column {
         anchors.fill: parent
         anchors.topMargin: units.gu(1)

=== modified file 'MonthView.qml'
--- MonthView.qml	2014-10-22 18:39:27 +0000
+++ MonthView.qml	2014-12-09 21:47:26 +0000
@@ -20,12 +20,12 @@
 import "dateExt.js" as DateExt
 import "colorUtils.js" as Color
 
-Page {
+PageWithBottomEdge {
     id: monthViewPage
     objectName: "monthViewPage"
 
     property var currentMonth: DateExt.today();
-
+    property var eventModel;
     signal dateSelected(var date);
 
     Keys.forwardTo: [monthViewPath]
@@ -58,6 +58,12 @@
         }
     }
 
+    bottomEdgeTitle : i18n.tr("New Event")
+    bottomEdgePageComponent : NewEvent{
+        model: eventModel
+        date : new Date()
+    }
+
     PathViewBase{
         id: monthViewPath
         objectName: "monthViewPath"

=== modified file 'NewEvent.qml'
--- NewEvent.qml	2014-11-27 17:46:47 +0000
+++ NewEvent.qml	2014-12-09 21:47:26 +0000
@@ -44,6 +44,11 @@
 
     signal eventAdded(var event);
 
+    onDateChanged: {
+        startDateTimeInput.dateTime = date;
+        adjustEndDateToStartDate();
+    }
+
     onStartDateChanged: {
         startDateTimeInput.dateTime = startDate;
         adjustEndDateToStartDate()
@@ -109,7 +114,7 @@
         event = Qt.createQmlObject("import QtOrganizer 5.0; Event { }", Qt.application,"NewEvent.qml");
         //Create fresh Recurrence Object.
         rule = Qt.createQmlObject("import QtOrganizer 5.0; RecurrenceRule {}", event.recurrence,"EventRepetition.qml");
-        selectCalendar(model.defaultCollection().collectionId);        
+        selectCalendar(model.defaultCollection().collectionId);
     }
 
     //Editing Event
@@ -277,8 +282,8 @@
         scrollAnimation.start()
     }
 
-    width: parent.width
-    height: parent.height
+    width: parent ? parent.width : 0
+    height: parent ? parent.height : 0
 
     title: isEdit ? i18n.tr("Edit Event"):i18n.tr("New Event")
 

=== added file 'PageWithBottomEdge.qml'
--- PageWithBottomEdge.qml	1970-01-01 00:00:00 +0000
+++ PageWithBottomEdge.qml	2014-12-09 21:47:26 +0000
@@ -0,0 +1,407 @@
+/*
+ * 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.2
+import Ubuntu.Components 1.1
+
+Page {
+    id: page
+
+    property alias bottomEdgePageComponent: edgeLoader.sourceComponent
+    property alias bottomEdgePageSource: edgeLoader.source
+    property alias bottomEdgeTitle: tipLabel.text
+    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
+
+    readonly property alias bottomEdgePage: edgeLoader.item
+    readonly property bool isReady: ((bottomEdge.y === 0) && bottomEdgePageLoaded && edgeLoader.item.active)
+    readonly property bool isCollapsed: (bottomEdge.y === page.height)
+    readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)
+
+    property bool _showEdgePageWhenReady: false
+    property int _areaWhenExpanded: 0
+
+    signal bottomEdgeReleased()
+    signal bottomEdgeDismissed()
+
+
+    function showBottomEdgePage(source, properties)
+    {
+        edgeLoader.setSource(source, properties)
+        _showEdgePageWhenReady = true
+    }
+
+    function setBottomEdgePage(source, properties)
+    {
+        edgeLoader.setSource(source, properties)
+    }
+
+    function _pushPage()
+    {
+        if (edgeLoader.status === Loader.Ready) {
+            edgeLoader.item.active = true
+            page.pageStack.push(edgeLoader.item)
+            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
+
+        color: "black"
+        anchors.fill: page
+        opacity: 0.7 * ((page.height - bottomEdge.y) / page.height)
+        z: 1
+    }
+
+    UbuntuShape {
+        id: tip
+        objectName: "bottomEdgeTip"
+
+        property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)
+
+        enabled: mouseArea.enabled
+        visible: page.bottomEdgeEnabled
+        anchors {
+            bottom: parent.bottom
+            horizontalCenter: bottomEdge.horizontalCenter
+            bottomMargin: hidden ? - height + units.gu(1) : -units.gu(1)
+            Behavior on bottomMargin {
+                SequentialAnimation {
+                    // wait some msecs in case of the focus change again, to avoid flickering
+                    PauseAnimation {
+                        duration: 300
+                    }
+                    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
+
+        property real previousY: -1
+        property string dragDirection: "None"
+
+        preventStealing: true
+        drag {
+            axis: Drag.YAxis
+            target: bottomEdge
+            minimumY: bottomEdge.pageStartY
+            maximumY: page.height
+        }
+        enabled: edgeLoader.status == Loader.Ready
+        visible: page.bottomEdgeEnabled
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+
+        }
+        height: bottomEdge.tipHeight
+        z: 1
+
+        onReleased: {
+            page.bottomEdgeReleased()
+            if ((dragDirection === "BottomToTop") &&
+                bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
+                bottomEdge.state = "expanded"
+            } else {
+                bottomEdge.state = "collapsed"
+            }
+            previousY = -1
+            dragDirection = "None"
+        }
+
+        onPressed: {
+            previousY = mouse.y
+            tip.forceActiveFocus()
+        }
+
+        onMouseYChanged: {
+            var yOffset = previousY - mouseY
+            // skip if was a small move
+            if (Math.abs(yOffset) <= units.gu(2)) {
+                return
+            }
+            previousY = mouseY
+            dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom"
+        }
+    }
+
+    Rectangle {
+        id: bottomEdge
+        objectName: "bottomEdge"
+
+        readonly property int tipHeight: units.gu(3)
+        readonly property int pageStartY: 0
+
+        z: 1
+        color: Theme.palette.normal.background
+        clip: true
+        anchors {
+            left: parent.left
+            right: parent.right
+        }
+        height: page.height
+        y: height
+        visible: !page.isCollapsed
+        state: "collapsed"
+        states: [
+            State {
+                name: "collapsed"
+                PropertyChanges {
+                    target: bottomEdge
+                    y: bottomEdge.height
+                }
+            },
+            State {
+                name: "expanded"
+                PropertyChanges {
+                    target: bottomEdge
+                    y: bottomEdge.pageStartY
+                }
+            },
+            State {
+                name: "floating"
+                when: mouseArea.drag.active
+                PropertyChanges {
+                    target: shadow
+                    opacity: 1.0
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "expanded"
+                SequentialAnimation {
+                    alwaysRunToEnd: true
+
+                    SmoothedAnimation {
+                        target: bottomEdge
+                        property: "y"
+                        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()
+                    }
+                }
+            },
+            Transition {
+                from: "expanded"
+                to: "collapsed"
+                SequentialAnimation {
+                    alwaysRunToEnd: true
+
+                    ScriptAction {
+                        script: {
+                            Qt.inputMethod.hide()
+                            edgeLoader.item.parent = edgeLoader
+                            edgeLoader.item.anchors.fill = edgeLoader
+                            edgeLoader.item.active = false
+                        }
+                    }
+                    SmoothedAnimation {
+                        target: bottomEdge
+                        property: "y"
+                        duration: UbuntuAnimation.SlowDuration
+                    }
+                    ScriptAction {
+                        script: {
+                            // 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
+                        }
+                    }
+                }
+            },
+            Transition {
+                from: "floating"
+                to: "collapsed"
+                SmoothedAnimation {
+                    target: bottomEdge
+                    property: "y"
+                    duration: UbuntuAnimation.FastDuration
+                }
+            }
+        ]
+
+        Loader {
+            id: edgeLoader
+
+            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: {
+                tip.forceActiveFocus()
+                if (page.isReady && edgeLoader.item.active !== true) {
+                    page._pushPage()
+                }
+            }
+        }
+    }
+}

=== modified file 'WeekView.qml'
--- WeekView.qml	2014-11-06 13:57:42 +0000
+++ WeekView.qml	2014-12-09 21:47:26 +0000
@@ -21,13 +21,14 @@
 import "dateExt.js" as DateExt
 import "ViewType.js" as ViewType
 
-Page{
+PageWithBottomEdge{
     id: weekViewPage
     objectName: "weekViewPage"
 
     property var dayStart: new Date();
     property var firstDay: dayStart.weekStart(Qt.locale().firstDayOfWeek);
     property bool isCurrentPage: false
+    property var eventModel;
 
     signal dateSelected(var date);
 
@@ -61,6 +62,13 @@
             font.capitalization: Font.Capitalize
         }
     }
+    reloadBottomEdgePage: true
+    bottomEdgeTitle : i18n.tr("New Event")
+
+    bottomEdgePageComponent : NewEvent {
+        model: eventModel
+        date: dayStart
+    }
 
     Column {
         anchors.fill: parent

=== modified file 'calendar.qml'
--- calendar.qml	2014-11-08 11:26:37 +0000
+++ calendar.qml	2014-12-09 21:47:26 +0000
@@ -95,7 +95,6 @@
     footerColor: "#ECECEC"
     anchorToKeyboard: true
 
-
     PageStack {
         id: pageStack
 
@@ -360,6 +359,7 @@
                     source: tabs.selectedTab == monthTab ? Qt.resolvedUrl("MonthView.qml"):""
                     onLoaded: {
                         item.currentMonth = tabs.currentDay.midnight();
+                        item.eventModel = eventModel
                     }
 
                     anchors{
@@ -374,6 +374,7 @@
                             tabs.currentDay = date;
                             tabs.selectedTabIndex = dayTab.index;
                         }
+
                     }
                 }
             }
@@ -389,6 +390,7 @@
                     onLoaded: {
                         item.isCurrentPage= Qt.binding(function() { return tabs.selectedTab == weekTab })
                         item.dayStart = tabs.currentDay;
+                        item.eventModel = eventModel
                     }
 
                     anchors{
@@ -402,7 +404,6 @@
                         onDayStartChanged: {
                             tabs.currentDay = weekViewLoader.item.dayStart;
                         }
-
                         onDateSelected: {
                             tabs.currentDay = date;
                             tabs.selectedTabIndex = dayTab.index;
@@ -422,6 +423,8 @@
                     onLoaded: {
                         item.isCurrentPage= Qt.binding(function() { return tabs.selectedTab == dayTab })
                         item.currentDay = tabs.currentDay;
+                        item.eventModel = eventModel
+
                     }
 
                     anchors{

=== modified file 'tests/autopilot/calendar_app/__init__.py'
--- tests/autopilot/calendar_app/__init__.py	2014-11-30 19:13:27 +0000
+++ tests/autopilot/calendar_app/__init__.py	2014-12-09 21:47:26 +0000
@@ -18,7 +18,7 @@
 
 import logging
 from time import sleep
-
+from autopilot.introspection import dbus
 import datetime
 import autopilot.logging
 import ubuntuuitoolkit
@@ -114,6 +114,27 @@
             logger.debug('The Day View page is already opened.')
         return self.get_day_view(day_tab)
 
+    def open_new_event_page(self):
+        """Bring the new event page to the screen"""
+        self.visible.wait_for(True)
+        try:
+            button = self.wait_select_single(objectName='bottomEdgeTip')
+            button.visible.wait_for(True)
+
+            start_x = (button.globalRect.x +
+                       (button.globalRect.width * 0.5))
+
+            start_y = (button.globalRect.y +
+                       (button.height * 0.2))
+
+            stop_y = start_y - (self.height * 0.7)
+            self.pointing_device.drag(start_x, start_y,
+                                      start_x, stop_y, rate=3)
+
+        except dbus.StateNotFoundError:
+            logger.error('BottomEdge element not found.')
+            raise
+
     @autopilot.logging.log_action(logger.info)
     def go_to_new_event(self):
         """Open the page to add a new event.
@@ -121,9 +142,11 @@
         :return: The New Event page.
 
         """
-        header = self.get_header()
-        header.click_action_button('neweventbutton')
-        return self.wait_select_single(NewEvent, objectName='newEventPage')
+
+        self.open_new_event_page()
+        page = self.wait_select_single(NewEvent, objectName='newEventPage')
+        page.visible.wait_for(True)
+        return page
 
     def set_picker(self, field, mode, value):
         # open picker