Merge lp:~doflah/ubuntu-clock-app/empty_alarm_page into lp:ubuntu-clock-app

[Dennis O'Flaherty]

Added an empty alarm state to indicate that there are no saved alarms.

Show "No alarms have been saved" on an empty alarm page to fix #1364555

[Victor Thompson (vthompson)]

The code looks OK, I'm just not a fan of the design.

Could we implement Nik's proposal?

"No stored alarms
Tap the plus symbol to add an alarm."

review: Needs Fixing

[Victor Thompson (vthompson)]

Proposal: https://launchpadlibrarian.net/184039250/empty-state.png

[lp:~doflah/ubuntu-clock-app/empty_alarm_page]

88. By Dennis O'Flaherty on 2014-09-06

Reposition items based on feedback

89. By Dennis O'Flaherty on 2014-09-06

Updated translation template

90. By Dennis O'Flaherty on 2014-09-06

Fix spacing

[Dennis O'Flaherty (doflah)]

Is that better?

[lp:~doflah/ubuntu-clock-app/empty_alarm_page]

91. By Dennis O'Flaherty on 2014-09-06

Fix spacing again

[Victor Thompson (vthompson)]

Looks much better, IMO. But still needs a design review.

"UbuntuColors.warmGrey" seems to have been phased out from the API [1]--also "UbuntuColors.lightGrey" (in the API) looks better IMO.

[1] http://developer.ubuntu.com/api/qml/sdk-14.10/Ubuntu.Components.UbuntuColors/

review: Needs Information

[Dennis O'Flaherty (doflah)]

Yeah. I went with warmGrey since that was what the Icon docs (http://developer.ubuntu.com/api/qml/sdk-14.10/Ubuntu.Components.Icon/) had - should that get updated?

How does the design review process work?

[Nekhelesh Ramananthan (nik90)]

Thanks a lot for your code contributions Dennis. The way the design process usually works is that, when a bug is reported which requires a design decision, the designers think it over and see the best way to fix the bug while maintaining consistency among the other applications. After that they propose a solution in the bug report which we developers then implement.

In this case, I suggested a solution which other 3rd party apps use and one that I liked as well. However a designer would still need to approve it. I will be in contact with the designers on monday where I will bring this up and update this MP with the design solution that they came up with. Meanwhile we need to wait.

Also I tried your branch and tweaked the font size and color a little bit to make it look like https://imgur.com/DfDx1yL for the fun of it :D.

[Nekhelesh Ramananthan (nik90)]

#blocked on design (waiting on a resolution from Michal). Will update MP with appropriate status when I hear back from him.

[Nekhelesh Ramananthan (nik90)]

#unblocked

[Nekhelesh Ramananthan (nik90)]

So after showing it to another designer, they suggested some fixes after which we are good to go :)

1. Change the icon color to "#BBBBBB" and increase its height to 10 grid units.

2. Increase the padding between the icon and the "No Saved alarms" by 5 grid units.

3. Change the text to "Tap the + icon to add an alarm"

4. The font size of "No Saved alarms" should be "large" while the "Tap the + icon...." text should "medium". By default the SDK uses font size medium. So just remove the fontSize declaration for that label.

review: Needs Fixing

[Nekhelesh Ramananthan (nik90)]

From a developer's perspective, please move the following code into a new file called "EmptyState.qml" in the components folder. This way we can reuse this code in other places if required.

15 + Item {
16 + visible: alarmModel.count === 0
17 + anchors.verticalCenter: parent.verticalCenter
18 + width: parent.width
19 + height: childrenRect.height
20 +
21 + Icon {
22 + id: noAlarmIcon
23 + name: "alarm-clock"
24 + anchors.horizontalCenter: parent.horizontalCenter
25 + height: units.gu(10)
26 + width: height
27 + color: UbuntuColors.warmGrey
28 + }
29 +
30 + Label {
31 + id: noAlarmLabel
32 + text: i18n.tr("No saved alarms")
33 + anchors.top: noAlarmIcon.bottom
34 + anchors.horizontalCenter: parent.horizontalCenter
35 + fontSize: "x-large"
36 + font.bold: true
37 + }
38 +
39 + Label {
40 + text: i18n.tr("Tap the plus icon to add an alarm.")
41 + anchors.top: noAlarmLabel.bottom
42 + anchors.horizontalCenter: parent.horizontalCenter
43 + fontSize: "large"
44 + }
45 + }

You will be obviously define some public properties like icon, title, subtitle etc to adjust these properties from outside.

So it should be used like,

EmptyState {
   id: alarmEmptyState

   visible: alarmModel.count === 0
   anchors.verticalCenter: parent.verticalCenter

   iconName: "alarm-clock"
   title: i18n.tr("No saved alarms")
   subtitle: i18n.tr("Tap the + icon to add an alarm.")
}

review: Needs Fixing

[lp:~doflah/ubuntu-clock-app/empty_alarm_page]

92. By Dennis O'Flaherty on 2014-09-12

Implement design feedback

93. By Dennis O'Flaherty on 2014-09-12

Updated translation template

[Nekhelesh Ramananthan (nik90)]

Code looks good :).. However there seems to be a conflict in your pot file according to jenkins. "Text conflict in po/com.ubuntu.clock.pot". Can you fix that and we are good to go.

[Nekhelesh Ramananthan (nik90)]

if you want you can leave out the pot file update if you are unable to solve the conflict since I will be doing a pot file update tomorrow.

[lp:~doflah/ubuntu-clock-app/empty_alarm_page]

94. By Dennis O'Flaherty on 2014-09-12

* Fixed clock mode animations being too slow (LP: #1365440)
* Added alarm snooze settings (LP: #1354400)
* Fixed default alarm label not being translatable (LP: #1365012)

95. By Dennis O'Flaherty on 2014-09-12

Updated translation template

96. By Dennis O'Flaherty on 2014-09-12

Updated changelog

[Nekhelesh Ramananthan (nik90)]

lgtm! Thanks for the contribution!

review: Approve

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'app/alarm/AlarmPage.qml'
--- app/alarm/AlarmPage.qml	2014-08-24 12:47:50 +0000
+++ app/alarm/AlarmPage.qml	2014-09-12 19:29:13 +0000
@@ -18,6 +18,8 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
+
+import "../components"
 import "../components/Utils.js" as Utils
 
 Page {
@@ -96,9 +98,18 @@
         }
     ]
 
-    AlarmList{
+    AlarmList {
         id: alarmListView
         listModel: alarmModel
         anchors.fill: parent
     }
+
+    EmptyState {
+        visible: alarmModel.count === 0
+        anchors.verticalCenter: parent.verticalCenter
+
+        iconName: "alarm-clock"
+        title: i18n.tr("No saved alarms")
+        subTitle: i18n.tr("Tap the + icon to add an alarm")
+    }
 }

=== added file 'app/components/EmptyState.qml'
--- app/components/EmptyState.qml	1970-01-01 00:00:00 +0000
+++ app/components/EmptyState.qml	2014-09-12 19:29:13 +0000
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2014 Canonical Ltd
+ *
+ * This file is part of Ubuntu Clock App
+ *
+ * Ubuntu Clock 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 Clock 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.3
+import Ubuntu.Components 1.1
+
+Item {
+
+    property alias iconName: emptyIcon.name
+    property alias title: emptyLabel.text
+    property alias subTitle: emptySublabel.text
+
+    height: childrenRect.height
+    width: parent.width
+
+    Icon {
+        id: emptyIcon
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: units.gu(10)
+        width: height
+        color: "#BBBBBB"
+    }
+
+    Label {
+        id: emptyLabel
+        anchors.top: emptyIcon.bottom
+        anchors.topMargin: units.gu(5)
+        anchors.horizontalCenter: parent.horizontalCenter
+        fontSize: "large"
+        font.bold: true
+    }
+
+    Label {
+        id: emptySublabel
+        anchors.top: emptyLabel.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+}

=== modified file 'debian/changelog'
--- debian/changelog	2014-09-09 10:23:07 +0000
+++ debian/changelog	2014-09-12 19:29:13 +0000
@@ -44,6 +44,9 @@
   * Removed 'Today/Tomorow/Yesterday' text string from world clock, replaced
     'No time difference' with 'Same time' (LP: #1362093)
 
+  [Dennis O'Flaherty]
+  * Show a message to the user when the alarm list is empty (LP: #1364555)
+
  -- Nekhelesh Ramananthan <[e-mail]>  Wed, 13 Aug 2014 15:46:12 +0200
 
 ubuntu-clock-app (3.0-0ubuntu1) utopic; urgency=medium

=== modified file 'po/com.ubuntu.clock.pot'
--- po/com.ubuntu.clock.pot	2014-09-08 22:22:09 +0000
+++ po/com.ubuntu.clock.pot	2014-09-12 19:29:13 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2014-09-09 00:21+0200\n"
+"POT-Creation-Date: 2014-09-12 15:22-0400\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -33,33 +33,41 @@
 msgstr ""
 
 #: ../app/alarm/AlarmLabel.qml:30 ../app/alarm/AlarmLabel.qml:52
-#: ../app/alarm/EditAlarmPage.qml:303
+#: ../app/alarm/EditAlarmPage.qml:308
 msgid "Label"
 msgstr ""
 
-#: ../app/alarm/AlarmList.qml:81 ../app/alarm/AlarmPage.qml:78
+#: ../app/alarm/AlarmList.qml:81 ../app/alarm/AlarmPage.qml:80
 #: ../app/worldclock/UserWorldCityList.qml:103
 msgid "Delete"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:26 ../app/ubuntu-clock-app.qml:103
+#: ../app/alarm/AlarmPage.qml:28 ../app/ubuntu-clock-app.qml:103
 msgid "Alarms"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:42 ../app/alarm/EditAlarmPage.qml:55
-#: ../app/alarm/EditAlarmPage.qml:178
+#: ../app/alarm/AlarmPage.qml:44 ../app/alarm/EditAlarmPage.qml:55
+#: ../app/alarm/EditAlarmPage.qml:183
 msgid "Alarm"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:55
+#: ../app/alarm/AlarmPage.qml:57
 msgid "Cancel selection"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:64 ../app/alarm/AlarmRepeat.qml:35
+#: ../app/alarm/AlarmPage.qml:66 ../app/alarm/AlarmRepeat.qml:35
 msgid "Select All"
 msgstr ""
 
-#: ../app/alarm/AlarmRepeat.qml:31 ../app/alarm/EditAlarmPage.qml:293
+#: ../app/alarm/AlarmPage.qml:112
+msgid "No saved alarms"
+msgstr ""
+
+#: ../app/alarm/AlarmPage.qml:113
+msgid "Tap the + icon to add an alarm"
+msgstr ""
+
+#: ../app/alarm/AlarmRepeat.qml:31 ../app/alarm/EditAlarmPage.qml:298
 msgid "Repeat"
 msgstr ""
 
@@ -97,7 +105,7 @@
 msgid "Change time and date"
 msgstr ""
 
-#: ../app/alarm/AlarmSound.qml:27 ../app/alarm/EditAlarmPage.qml:316
+#: ../app/alarm/AlarmSound.qml:27 ../app/alarm/EditAlarmPage.qml:321
 msgid "Sound"
 msgstr ""
 
@@ -125,7 +133,7 @@
 msgid "Edit alarm"
 msgstr ""
 
-#: ../app/alarm/EditAlarmPage.qml:340
+#: ../app/alarm/EditAlarmPage.qml:345
 msgid "Delete alarm"
 msgstr ""