ubuntu-touch-coreapps-reviewers team mailing list archive

[Nekhelesh Ramananthan <krnekhelesh@xxxxxxxxx>]

Nekhelesh Ramananthan has proposed merging lp:~nik90/ubuntu-clock-app/remove-async-bottom-edge into lp:ubuntu-clock-app.

Commit message:
Removed async loading of the Alarms Page in the bottom edge to prevent a transparent page from being shown.

Requested reviews:
  Jenkins Bot (ubuntu-core-apps-jenkins-bot): continuous-integration
  Ubuntu Clock Developers (ubuntu-clock-dev)

For more details, see:
https://code.launchpad.net/~nik90/ubuntu-clock-app/remove-async-bottom-edge/+merge/287298

The new implementation of the bottom edge in trunk has a visual bug where when you swipe up the bottom edge really fast, its content is transparent. This is due to the async loading of the alarms page. This looks bad visually.

This MP removes the async loading of the bottom edge page to solve that UI issue. This was suggested by Renato for the calendar app.
-- 
Your team Ubuntu Clock Developers is requested to review the proposed merge of lp:~nik90/ubuntu-clock-app/remove-async-bottom-edge into lp:ubuntu-clock-app.

=== modified file 'app/MainPage.qml'
--- app/MainPage.qml	2016-02-25 22:46:35 +0000
+++ app/MainPage.qml	2016-02-26 11:26:56 +0000
@@ -56,16 +56,11 @@
         onTriggered: bottomEdge.hint.status = BottomEdgeHint.Inactive
     }
 
-    BottomEdge {
+    AlarmBottomEdge {
         id: bottomEdge
         height: parent.height
-        hint.iconName: "alarm-clock"
-        hint.text: i18n.tr("Alarms")
-        hint.status: BottomEdgeHint.Active
-        contentComponent: AlarmPage {
-            width: bottomEdge.width
-            height: bottomEdge.height
-        }
+        pageStack: mainStack
+        alarmModel: _mainPage.alarmModel
         Component.onCompleted: hideBottomEdgeHintTimer.start()
     }
 

=== modified file 'app/alarm/AlarmPage.qml'
--- app/alarm/AlarmPage.qml	2016-02-25 22:16:54 +0000
+++ app/alarm/AlarmPage.qml	2016-02-26 11:26:56 +0000
@@ -21,12 +21,16 @@
 
 Page {
     id: alarmPage
-
-    readonly property bool isAlarmPage: true
-
     objectName: 'AlarmPage'
+
     header: standardHeader
 
+    property var model: null
+    property var pageStack: null
+    readonly property bool isAlarmPage: true
+
+    signal bottomEdgeClosed()
+
     Component.onCompleted: console.log("[LOG]: Alarm Page loaded")
 
     PageHeader {
@@ -37,7 +41,7 @@
                 text: "close"
                 iconName: "go-down"
                 onTriggered: {
-                    bottomEdge.collapse()
+                    bottomEdgeClosed()
                 }
             }
         ]
@@ -47,7 +51,7 @@
                 iconName: "add"
                 text: i18n.tr("Alarm")
                 onTriggered: {
-                    mainStack.push(Qt.resolvedUrl("EditAlarmPage.qml"))
+                    pageStack.push(Qt.resolvedUrl("EditAlarmPage.qml"))
                 }
             }
         ]
@@ -115,7 +119,7 @@
 
     AlarmList {
         id: alarmListView
-        model: alarmModel
+        model: alarmPage.model
         anchors {
             top: alarmPage.header.bottom
             left: parent.left
@@ -147,7 +151,7 @@
             margins: units.gu(2)
             verticalCenter: parent.verticalCenter
         }
-        active: alarmModel ? alarmModel.count === 0 : true
+        active: alarmPage.model ? alarmPage.model.count === 0 : true
         Component.onCompleted: {
             setSource(Qt.resolvedUrl("../components/EmptyState.qml"),
                       {

=== added file 'app/components/AlarmBottomEdge.qml'
--- app/components/AlarmBottomEdge.qml	1970-01-01 00:00:00 +0000
+++ app/components/AlarmBottomEdge.qml	2016-02-26 11:26:56 +0000
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2016 Canonical Ltd
+ *
+ * This file is part of Ubuntu Clock App
+ *
+ * Ubuntu Calendar App is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Ubuntu Calendar App 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/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import "../alarm"
+
+BottomEdge {
+    id: bottomEdge
+    objectName: "bottomEdge"
+
+    property var pageStack: null
+    property var alarmModel: null
+    // WORKAROUND: BottomEdge component loads the page async while draging it
+    // this cause a very bad visual.
+    // To avoid that we create it as soon as the component is ready and keep
+    // it invisible until the user start to drag it.
+    property var _realPage: null
+
+    hint {
+        visible: bottomEdge.enabled
+        enabled: visible
+        iconName: "alarm-clock"
+        text: i18n.tr("Alarms")
+        status: BottomEdgeHint.Active
+    }
+
+    contentComponent: Item {
+        id: pageContent
+
+        implicitWidth: bottomEdge.width
+        implicitHeight: bottomEdge.height
+        children: bottomEdge._realPage
+        Component.onDestruction: {
+            bottomEdge._realPage.destroy()
+            bottomEdge._realPage = null
+            _realPage = editorPageBottomEdge.createObject(null)
+        }
+    }
+
+    Component.onCompleted:  {
+        if (alarmModel)
+            _realPage = editorPageBottomEdge.createObject(null)
+    }
+
+    onAlarmModelChanged: {
+        if (alarmModel)
+            _realPage = editorPageBottomEdge.createObject(null)
+    }
+
+    Component {
+        id: editorPageBottomEdge
+        AlarmPage {
+            implicitWidth: bottomEdge.width
+            implicitHeight: bottomEdge.height
+            model: bottomEdge.alarmModel
+            pageStack: bottomEdge.pageStack
+            enabled: bottomEdge.status === BottomEdge.Committed
+            active: bottomEdge.status === BottomEdge.Committed
+            visible: (bottomEdge.status !== BottomEdge.Hidden)
+            onBottomEdgeClosed: bottomEdge.collapse()
+        }
+    }
+}

=== modified file 'app/components/CMakeLists.txt'
--- app/components/CMakeLists.txt	2016-02-16 17:33:36 +0000
+++ app/components/CMakeLists.txt	2016-02-26 11:26:56 +0000
@@ -1,4 +1,5 @@
 set(COMPONENTS_QML_JS_FILES
+    AlarmBottomEdge.qml
     ActionIcon.qml
     AnalogMode.qml
     AnalogShadow.qml