Merge lp:~nik90/ubuntu-clock-app/edit-alarm-feature into lp:ubuntu-clock-app

[Nekhelesh Ramananthan]

Added support for creating new alarms and made the pulltoadd component as a generic component since it is required in two places.

This MP adds the following,

- Added support for creating new alarms
- Made the pulltoadd component as a generic component since it is required in two places

I will add support to edit saved alarms in my next branch

[lp:~nik90/ubuntu-clock-app/edit-alarm-feature]

29. By Nekhelesh Ramananthan on 2014-06-27

merged trunk

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

FAILED: Continuous integration, rev:29
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/3/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/705/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/3/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/3/rebuild

review: Needs Fixing (continuous-integration)

[lp:~nik90/ubuntu-clock-app/edit-alarm-feature]

30. By Nekhelesh Ramananthan on 2014-07-03

merge master

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

FAILED: Continuous integration, rev:30
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/9/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/814/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/9/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/9/rebuild

review: Needs Fixing (continuous-integration)

[Victor Thompson (vthompson)]

Just a note that browsing the ringtones does not work on Trusty, conceivably because /usr/share/sounds/ubuntu/ringtones does not exist. This defaults to the current directory in this case. Perhaps you need some sort of fall back to show nothing when this directory does not exist. Otherwise the user can select random files in the current directory. Likewise, filtering on ogg and mp3 files might be a good idea.

Consider making the naming on the AlarmLabel.qml consistent. The page title is "Label", but the Label component on top of the text field is "Alarm Label". Consider getting rid of the Label "Alarm Label" since it is redundant information. Similarly, the word "Label" is poor terminology. I know it is what is in the design spec, but it is a poor term for a title or name of an alarm.

In my opinion there should not be a default "label" for a new alarm. The user should simply be required to add a label. No real person makes an alarm and lets it be labeled "Alarm #1".

The new alarm date picker should conform to the user's locale. In my locale I should see 7 AM, 12 PM, etc for 12 hour time.

When selecting multiple dates for an alarm, say Monday and Tuesday, when they are displayed in a comma separated fashion there is no space between them. Instead the days are displayed as "Monday,Tuesday". It'd be best to have a space in between.

There are numerous instances where "anchors" properties can be grouped. Consider doing so.

review: Needs Fixing

[lp:~nik90/ubuntu-clock-app/edit-alarm-feature]

31. By Nekhelesh Ramananthan on 2014-07-05

Ensured strings are translatable

32. By Nekhelesh Ramananthan on 2014-07-05

Corrected code style for anchor properties

33. By Nekhelesh Ramananthan on 2014-07-05

reported upstream bug about date picker ignoring time locale of user. Added fixme note for that

[Nekhelesh Ramananthan (nik90)]

> Consider making the naming on the AlarmLabel.qml consistent. The page title is
> "Label", but the Label component on top of the text field is "Alarm Label".
> Consider getting rid of the Label "Alarm Label" since it is redundant
> information. Similarly, the word "Label" is poor terminology. I know it is
> what is in the design spec, but it is a poor term for a title or name of an
> alarm.
>

I cannot change this without consulting with the with the designers about this. I would like to remove the "Alarm Label" as it is indeed redundant. Will see if I get a reply within 1-2 days. If not we should proceed to take care of this later as the current implementation does follow the design specs.

> In my opinion there should not be a default "label" for a new alarm. The user
> should simply be required to add a label. No real person makes an alarm and
> lets it be labeled "Alarm #1".
>
> The new alarm date picker should conform to the user's locale. In my locale I
> should see 7 AM, 12 PM, etc for 12 hour time.

This is a SDK bug. I have reported the issue and added a FIXME note in rev 33

>
> When selecting multiple dates for an alarm, say Monday and Tuesday, when they
> are displayed in a comma separated fashion there is no space between them.
> Instead the days are displayed as "Monday,Tuesday". It'd be best to have a
> space in between.

I am not sure how to fix this. In the output I have already added a empty string " " but it seems to be ignored. Got any ideas on how to fix this?

577 + else {
578 + return occurs + " "
579 + }

>
> There are numerous instances where "anchors" properties can be grouped.
> Consider doing so.

Fixed in rev 31

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

FAILED: Continuous integration, rev:33
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/11/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/899/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/11/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/11/rebuild

review: Needs Fixing (continuous-integration)

[Nekhelesh Ramananthan (nik90)]

> Just a note that browsing the ringtones does not work on Trusty, conceivably
> because /usr/share/sounds/ubuntu/ringtones does not exist. This defaults to
> the current directory in this case. Perhaps you need some sort of fall back to
> show nothing when this directory does not exist. Otherwise the user can select
> random files in the current directory. Likewise, filtering on ogg and mp3
> files might be a good idea.

From Ubuntu 14.04 onwards, you need a specific package to get the ubuntu touch ringtones on the desktop. I am unable to remember what that package is. I have it installed on my 14.04 setup and I can browse the ringtones properly. Once we get the packaging fixed, that package will be added as a dependency for the clock app. So this shouldn't be an issue then.

I am not sure how to detect the existance of a folder. The QML FolderListModel http://qt-project.org/doc/qt-5/qml-qt-labs-folderlistmodel-folderlistmodel.html does not provide to check that.

[Nekhelesh Ramananthan (nik90)]

Victor, you will need the package ubuntu-touch-sounds package installed on your system. I will add it to the debian control file once the debian packaging is done.

[Victor Thompson (vthompson)]

In order to fix the comma issue, I think you just need to do this:

bzr diff
=== modified file 'app/alarm/AlarmUtils.qml'
--- app/alarm/AlarmUtils.qml 2014-06-24 20:15:38 +0000
+++ app/alarm/AlarmUtils.qml 2014-07-07 03:34:57 +0000
@@ -129,6 +129,8 @@
             occurs.push(Qt.locale().standaloneDayName(0, Locale.LongFormat))
         }

+ occurs = occurs.join(', ');
+
         return occurs;
     }
 }

[Victor Thompson (vthompson)]

Nik, could you address this:

> In my opinion there should not be a default "label" for a new alarm. The user should simply be
> required to add a label. No real person makes an alarm and lets it be labeled "Alarm #1".

[Victor Thompson (vthompson)]

In terms of reacting to when the ringtones folder doesn't exist, perhaps you could do the following:

bzr diff
=== modified file 'app/alarm/AlarmSound.qml'
--- app/alarm/AlarmSound.qml 2014-06-24 20:15:38 +0000
+++ app/alarm/AlarmSound.qml 2014-07-07 04:02:07 +0000
@@ -31,6 +31,8 @@

     FolderListModel {
         id: _soundModel
+ showDirs: false
+ nameFilters: [ "*.ogg", "*.mp3" ]
         folder: "/usr/share/sounds/ubuntu/ringtones"
     }

This would 1) prevent directories from being shown in the model, and 2) filter the files allowable to just mp3 and ogg. I think you should do #1 because a directory can never be selected. I think it would be a good idea to do #2 as an additional safe guard, but one could argue that it would add extra maintenance work if the ringtones include additional filetypes in the future. As of right now they are all ogg files.

[lp:~nik90/ubuntu-clock-app/edit-alarm-feature]

34. By Nekhelesh Ramananthan on 2014-07-07

Fixed alarm days spacing

35. By Nekhelesh Ramananthan on 2014-07-07

Ensured directories are never shown in the alarm sounds list. Also filtered the type of files that are shown.

36. By Nekhelesh Ramananthan on 2014-07-07

Set the default alarm name to Alarm

[Nekhelesh Ramananthan (nik90)]

> In order to fix the comma issue, I think you just need to do this:
>
> bzr diff
> === modified file 'app/alarm/AlarmUtils.qml'
> --- app/alarm/AlarmUtils.qml 2014-06-24 20:15:38 +0000
> +++ app/alarm/AlarmUtils.qml 2014-07-07 03:34:57 +0000
> @@ -129,6 +129,8 @@
> occurs.push(Qt.locale().standaloneDayName(0, Locale.LongFormat))
> }
>
> + occurs = occurs.join(', ');
> +
> return occurs;
> }
> }

Thnx. That did the trick. Fixed in rev 34

[Nekhelesh Ramananthan (nik90)]

> In terms of reacting to when the ringtones folder doesn't exist, perhaps you
> could do the following:
>
> bzr diff
> === modified file 'app/alarm/AlarmSound.qml'
> --- app/alarm/AlarmSound.qml 2014-06-24 20:15:38 +0000
> +++ app/alarm/AlarmSound.qml 2014-07-07 04:02:07 +0000
> @@ -31,6 +31,8 @@
>
> FolderListModel {
> id: _soundModel
> + showDirs: false
> + nameFilters: [ "*.ogg", "*.mp3" ]
> folder: "/usr/share/sounds/ubuntu/ringtones"
> }
>

Fixed in rev 35
>
> This would 1) prevent directories from being shown in the model, and 2) filter
> the files allowable to just mp3 and ogg. I think you should do #1 because a
> directory can never be selected. I think it would be a good idea to do #2 as
> an additional safe guard, but one could argue that it would add extra
> maintenance work if the ringtones include additional filetypes in the future.
> As of right now they are all ogg files.

[Nekhelesh Ramananthan (nik90)]

> Nik, could you address this:
>
> > In my opinion there should not be a default "label" for a new alarm. The
> user should simply be
> > required to add a label. No real person makes an alarm and lets it be
> labeled "Alarm #1".

I changed the default "label" for new alarms to just "Alarm" as specified in visual mock up shown to us at Malta https://docs.google.com/presentation/d/1JvDyhsW17d1-Mz8OY1YMBKwfRI2z9qgyRjbujEsxEMk/edit#slide=id.g34303b1ce_2_11.

I compared our solution with iOS and Android and noticed they do it as well.

The reason I don't want to keep it empty is because it increases the amount of steps the user needs to do before saving an alarm. As of now, the user needs to only adjust the time to create the alarm. Every other field has a sensible default value defined.

[Victor Thompson (vthompson)]

Thanks for the explanation. lgtm now!

review: Approve

[Nekhelesh Ramananthan (nik90)]

Victor Thanks a lot for taking the time to review :)

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

FAILED: Continuous integration, rev:36
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/12/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/903/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/12/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/12/rebuild

review: Needs Fixing (continuous-integration)

=== added file 'app/alarm/AlarmLabel.qml'
--- app/alarm/AlarmLabel.qml	1970-01-01 00:00:00 +0000
+++ app/alarm/AlarmLabel.qml	2014-07-07 08:40:55 +0000
@@ -0,0 +1,61 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Page {
+    id: _alarmLabelPage
+
+    visible: false
+    title: i18n.tr("Label")
+
+    // Property to set the alarm label in the edit alarm page
+    property var alarmLabel
+
+    Column {
+        id: _labelColumn
+
+        spacing: units.gu(0.5)
+
+        anchors {
+            fill: parent
+            margins: units.gu(2)
+        }
+
+        Label {
+            text: i18n.tr("Label")
+        }
+
+        TextField {
+            id: _labelEntry
+            text: alarmLabel.subText
+            width: parent.width
+        }
+    }
+
+    tools: ToolbarItems {
+        back: Button {
+            action: Action {
+                iconName: "back"
+                onTriggered: {
+                    alarmLabel.subText = _labelEntry.text
+                    mainStack.pop()
+                }
+            }
+        }
+    }
+}

=== modified file 'app/alarm/AlarmList.qml'
--- app/alarm/AlarmList.qml	2014-06-19 15:31:18 +0000
+++ app/alarm/AlarmList.qml	2014-07-07 08:40:55 +0000
@@ -17,89 +17,134 @@
 import QtQuick 2.0
 import Ubuntu.Components 1.1
 import Ubuntu.Components.ListItems 1.0 as ListItem
+import "../components"
+import "../components/Utils.js" as Utils
 
-Column {
-    id: listAlarm
+Flickable {
+    id: alarmListFlickable
+    objectName: "alarmListFlickable"
 
     // Property to set the model of the saved alarm list
-    property alias model: listSavedAlarm.model
+    property var model
+
+    /*
+      Property to set the maximum drag distance before freezing the pull to add
+      button resize
+    */
+    property int _maxThreshold: -80
+
+    /*
+      Property to set the minimum drag distance before activating the add
+      alarm signal
+    */
+    property int _minThreshold: _maxThreshold + 10
+
+    clip: true
+    anchors.fill: parent
+    contentHeight: alarmList.height
 
     AlarmUtils {
         id: alarmUtils
     }
 
-    ListView {
-        id: listSavedAlarm
-        objectName: "listSavedAlarm"
-
-        clip: true
-        height: parent.height
-        anchors.left: parent.left
-        anchors.right: parent.right
-
-        currentIndex: -1
-
-        delegate: ListItem.Base {
-            objectName: "alarm" + index
-
-            Label {
-                id: alarmTime
-                objectName: "listAlarmTime" + index
-
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.leftMargin: units.gu(0)
-
-                fontSize: "medium"
-                text: Qt.formatTime(date)
-            }
-
-            Column {
-                id: alarmDetailsColumn
-
-                anchors {
-                    left: alarmTime.right
-                    right: alarmStatus.left
-                    verticalCenter: parent.verticalCenter
-                    margins: units.gu(1)
-                }
+    PullToAdd {
+        id: addAlarmButton
+
+        anchors {
+            top: parent.top
+            topMargin: -labelHeight - units.gu(6)
+            horizontalCenter: parent.horizontalCenter
+        }
+
+        leftLabel: i18n.tr("Add")
+        rightLabel: i18n.tr("Alarm")
+        maxThreshold: alarmListFlickable._maxThreshold
+    }
+
+    Column {
+        id: alarmList
+        anchors.fill: parent
+
+        Repeater {
+            model: alarmListFlickable.model
+            ListItem.Base {
+
+                height: units.gu(7)
 
                 Label {
-                    id: alarmLabel
-                    objectName: "listAlarmLabel" + index
-
-                    text: message
+                    id: alarmTime
+
+                    anchors {
+                        top: alarmDetailsColumn.top
+                        left: parent.left
+                        leftMargin: units.gu(0)
+                    }
+
                     fontSize: "medium"
-                    elide: Text.ElideRight
-                    color: UbuntuColors.midAubergine
-                }
-
-                Label {
-                    id: alarmSubtitle
-                    objectName: "listAlarmSubtitle" + index
-
-                    fontSize: "xx-small"
-                    text: alarmUtils.format_day_string(daysOfWeek, type)
-                }
-            }
-
-            Switch {
-                id: alarmStatus
-
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-
-                enabled: model.enabled
-            }
-
-            selected: listSavedAlarm.currentIndex == index
-            removable: true
-            confirmRemoval: true
-
-            onItemRemoved: {
-                var alarm = alarmModel.get(index)
-                alarm.cancel()
-            }
+                    text: Qt.formatTime(date)
+                }
+
+                Column {
+                    id: alarmDetailsColumn
+
+                    anchors {
+                        left: alarmTime.right
+                        right: alarmStatus.left
+                        verticalCenter: parent.verticalCenter
+                        margins: units.gu(1)
+                    }
+
+                    Label {
+                        id: alarmLabel
+
+                        text: message
+                        fontSize: "medium"
+                        elide: Text.ElideRight
+                        color: UbuntuColors.midAubergine
+                    }
+
+                    Label {
+                        id: alarmSubtitle
+
+                        fontSize: "xx-small"
+                        width: parent.width
+                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        text: alarmUtils.format_day_string(daysOfWeek)
+                    }
+                }
+
+                Switch {
+                    id: alarmStatus
+
+                    anchors {
+                        right: parent.right
+                        verticalCenter: parent.verticalCenter
+                    }
+
+                    checked: enabled
+                }
+
+                removable: true
+                confirmRemoval: true
+
+                onItemRemoved: {
+                    var alarm = alarmModel.get(index)
+                    alarm.cancel()
+                }
+            }
+        }
+    }
+
+    onDragEnded: {
+        if(contentY < _minThreshold)
+            mainStack.push(Qt.resolvedUrl("EditAlarmPage.qml"),
+                           {"alarmCount": alarmModel.count})
+    }
+
+    onContentYChanged: {
+        if(contentY < 0 && atYBeginning) {
+            addAlarmButton.dragPosition = contentY.toFixed(0)
         }
     }
 }
+

=== modified file 'app/alarm/AlarmPage.qml'
--- app/alarm/AlarmPage.qml	2014-06-16 14:09:12 +0000
+++ app/alarm/AlarmPage.qml	2014-07-07 08:40:55 +0000
@@ -16,10 +16,20 @@
 
 import QtQuick 2.0
 import Ubuntu.Components 1.1
+import "../components/Utils.js" as Utils
 
 Page {
     title: "Alarms"
 
+    flickable: null
+
+    Component.onCompleted: Utils.log(debugMode, "Alarm Page loaded")
+
+    AlarmModel {
+        id: alarmModel
+        Component.onCompleted: Utils.log(debugMode, "Alarm Database loaded")
+    }
+
     AlarmList{
         id: listAlarm
         model: alarmModel
@@ -39,6 +49,10 @@
         ToolbarButton {
             action: Action {
                 iconName: "add"
+                onTriggered: {
+                    mainStack.push(Qt.resolvedUrl("EditAlarmPage.qml"),
+                                   {"alarmCount": alarmModel.count})
+                }
             }
         }
     }

=== added file 'app/alarm/AlarmRepeat.qml'
--- app/alarm/AlarmRepeat.qml	1970-01-01 00:00:00 +0000
+++ app/alarm/AlarmRepeat.qml	2014-07-07 08:40:55 +0000
@@ -0,0 +1,108 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import Ubuntu.Components.ListItems 1.0 as ListItem
+
+Page {
+    id: _alarmRepeatPage
+
+    visible: false
+    title: i18n.tr("Repeat")
+
+    // Property to set the alarm days of the week in the edit alarm page
+    property var alarm
+
+    ListModel {
+        id: daysModel
+
+        ListElement {
+            day: "1"
+            flag: Alarm.Monday
+        }
+
+        ListElement {
+            day: "2"
+            flag: Alarm.Tuesday
+        }
+
+        ListElement {
+            day: "3"
+            flag: Alarm.Wednesday
+        }
+
+        ListElement {
+            day: "4"
+            flag: Alarm.Thursday
+        }
+
+        ListElement {
+            day: "5"
+            flag: Alarm.Friday
+        }
+
+        ListElement {
+            day: "6"
+            flag: Alarm.Saturday
+        }
+
+        ListElement {
+            day: "0"
+            flag: Alarm.Sunday
+        }
+    }
+
+    Column {
+        id: _alarmDayColumn
+
+        anchors.fill: parent
+
+        Repeater {
+            id: _alarmDays
+
+            model: daysModel
+
+            ListItem.Standard {
+                Label {
+                    id: _alarmDay
+
+                    anchors {
+                        left: parent.left
+                        leftMargin: units.gu(2)
+                        verticalCenter: parent.verticalCenter
+                    }
+
+                    color: UbuntuColors.midAubergine
+                    text: Qt.locale().standaloneDayName(day, Locale.LongFormat)
+                }
+
+                control: Switch {
+                    checked: (alarm.daysOfWeek & flag) == flag
+                    onCheckedChanged: {
+                        if (checked) {
+                            alarm.daysOfWeek |= flag
+                        }
+
+                        else {
+                            alarm.daysOfWeek &= ~flag
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

=== added file 'app/alarm/AlarmSound.qml'
--- app/alarm/AlarmSound.qml	1970-01-01 00:00:00 +0000
+++ app/alarm/AlarmSound.qml	2014-07-07 08:40:55 +0000
@@ -0,0 +1,115 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import Qt.labs.folderlistmodel 2.1
+import Ubuntu.Components.ListItems 1.0 as ListItem
+
+Page {
+    id: _alarmSoundPage
+
+    title: i18n.tr("Sound")
+    flickable: _pageFlickable
+    visible: false
+
+    // Property to set the alarm sound in the edit alarm page
+    property var alarmSound
+
+    FolderListModel {
+        id: _soundModel
+        showDirs: false
+        nameFilters: [ "*.ogg", "*.mp3" ]
+        folder: "/usr/share/sounds/ubuntu/ringtones"
+    }
+
+    Flickable {
+        id: _pageFlickable
+
+        clip: true
+        anchors.fill: parent
+        contentHeight: _soundModel.count * units.gu(7)
+
+        Column {
+            id: _alarmSoundColumn
+
+            anchors.fill: parent
+
+            Repeater {
+                id: _alarmSounds
+
+                model: _soundModel
+
+                ListItem.Base {
+                    id: _alarmSoundDelegate
+
+                    property alias isChecked: _soundStatus.checked
+
+                    height: units.gu(7)
+
+                    Label {
+                        id: _soundName
+
+                        anchors {
+                            left: parent.left
+                            verticalCenter: parent.verticalCenter
+                        }
+
+                        color: UbuntuColors.midAubergine
+                        fontSize: "medium"
+                        text: fileBaseName
+                    }
+
+                    CheckBox {
+                        id: _soundStatus
+
+                        anchors {
+                            right: parent.right
+                            verticalCenter: parent.verticalCenter
+                        }
+
+                        checked: alarmSound.subText === _soundName.text ? true :
+                                                                         false
+                        onClicked: {
+                            if (checked) {
+                                alarmSound.subText = _soundName.text
+
+                                // Ensures only one alarm sound is selected
+                                for(var i=0; i<_soundModel.count; i++) {
+                                    if(_alarmSounds.itemAt(i).isChecked &&
+                                            i !== index) {
+                                        _alarmSounds.itemAt(i).isChecked = false
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    tools: ToolbarItems {
+        back: Button {
+            action: Action {
+                iconName: "back"
+                onTriggered: {
+                    mainStack.pop()
+                }
+            }
+        }
+    }
+}

=== modified file 'app/alarm/AlarmUtils.qml'
--- app/alarm/AlarmUtils.qml	2014-06-19 15:31:18 +0000
+++ app/alarm/AlarmUtils.qml	2014-07-07 08:40:55 +0000
@@ -17,61 +17,120 @@
 import QtQuick 2.0
 import Ubuntu.Components 1.1
 
+/*
+  Qt Object containing a collection of useful alarm functions
+*/
 QtObject {
     id: alarmUtils
 
-    function format_day_string(value, type) {
-        var occurs = get_day(value, type);
-        var WeekDay = 0;
+    // Function to format the alarm days accordingly to their occurance
+    function format_day_string(value) {
+        var occurs = _get_day(value)
+
+        if (value === _get_weekdays()) {
+            return i18n.tr("Weekdays")
+        }
+
+        else if (value === _get_weekends()) {
+            return i18n.tr("Weekends")
+        }
+
+        else if (value === Alarm.Daily) {
+            return i18n.tr("Daily")
+        }
+
+        else {
+            return occurs
+        }
+    }
+
+    /*
+      INTERNAL FUNCTIONS
+    */
+
+    // Function to determine the locale's weekdays value
+    function _get_weekdays() {
+        var weekDays = 0
         for (var i = 0; i < Qt.locale().weekDays.length; ++i) {
             switch (Qt.locale().weekDays[i]) {
-            case Qt.Monday:
-                WeekDay |= Alarm.Monday
-                break;
-            case Qt.Tuesday:
-                WeekDay |= Alarm.Tuesday
-                break;
-            case Qt.Wednesday:
-                WeekDay |= Alarm.Wednesday
-                break;
-            case Qt.Thursday:
-                WeekDay |= Alarm.Thursday
-                break;
-            case Qt.Friday:
-                WeekDay |= Alarm.Friday
-                break;
-            case Qt.Saturday:
-                WeekDay |= Alarm.Saturday
-                break;
-            case Qt.Sunday:
-                WeekDay |= Alarm.Sunday
-                break;
-            }
-        }
-
-        if (value == WeekDay) {
-            return i18n.tr("Every weekday")
-        }
-        else if (value == Alarm.Daily) {
-            return i18n.tr("Daily")
-        }
-        else {
-            if (type === Alarm.Repeating)
-                return i18n.tr("Every ") + occurs
-            else
-                return i18n.tr("Once on ")  + occurs
-        }
-    }
-
-    function get_day(value, type) {
-        var occurs = [];
-        if (value & Alarm.Monday) occurs.push(Qt.locale().standaloneDayName(1, Locale.ShortFormat));
-        if (value & Alarm.Tuesday) occurs.push(Qt.locale().standaloneDayName(2, Locale.ShortFormat));
-        if (value & Alarm.Wednesday) occurs.push(Qt.locale().standaloneDayName(3, Locale.ShortFormat));
-        if (value & Alarm.Thursday) occurs.push(Qt.locale().standaloneDayName(4, Locale.ShortFormat));
-        if (value & Alarm.Friday) occurs.push(Qt.locale().standaloneDayName(5, Locale.ShortFormat));
-        if (value & Alarm.Saturday) occurs.push(Qt.locale().standaloneDayName(6, Locale.ShortFormat));
-        if (value & Alarm.Sunday) occurs.push(Qt.locale().standaloneDayName(7, Locale.ShortFormat));
+            case Qt.Monday: {
+                weekDays |= Alarm.Monday
+                break
+            }
+
+            case Qt.Tuesday: {
+                weekDays |= Alarm.Tuesday
+                break
+            }
+
+            case Qt.Wednesday: {
+                weekDays |= Alarm.Wednesday
+                break
+            }
+
+            case Qt.Thursday: {
+                weekDays |= Alarm.Thursday
+                break
+            }
+
+            case Qt.Friday: {
+                weekDays |= Alarm.Friday
+                break
+            }
+
+            case Qt.Saturday: {
+                weekDays |= Alarm.Saturday
+                break
+            }
+
+            case Qt.Sunday: {
+                weekDays |= Alarm.Sunday
+                break
+            }
+            }
+        }
+        return weekDays
+    }
+
+    // Function to determine the locale's weekends value
+    function _get_weekends() {
+        return (Alarm.Daily - _get_weekdays())
+    }
+
+    // Function to retrieve the days of the week in the locale system
+    function _get_day(value) {
+        var occurs = []
+
+        if (value & Alarm.Monday) {
+            occurs.push(Qt.locale().standaloneDayName(1, Locale.LongFormat))
+        }
+
+        if (value & Alarm.Tuesday) {
+            occurs.push(Qt.locale().standaloneDayName(2, Locale.LongFormat))
+        }
+
+        if (value & Alarm.Wednesday) {
+            occurs.push(Qt.locale().standaloneDayName(3, Locale.LongFormat))
+        }
+
+        if (value & Alarm.Thursday) {
+            occurs.push(Qt.locale().standaloneDayName(4, Locale.LongFormat))
+        }
+
+        if (value & Alarm.Friday) {
+            occurs.push(Qt.locale().standaloneDayName(5, Locale.LongFormat))
+        }
+
+        if (value & Alarm.Saturday) {
+            occurs.push(Qt.locale().standaloneDayName(6, Locale.LongFormat))
+        }
+
+        if (value & Alarm.Sunday) {
+            occurs.push(Qt.locale().standaloneDayName(0, Locale.LongFormat))
+        }
+
+        occurs = occurs.join(', ');
+
         return occurs;
     }
 }

=== added file 'app/alarm/EditAlarmPage.qml'
--- app/alarm/EditAlarmPage.qml	1970-01-01 00:00:00 +0000
+++ app/alarm/EditAlarmPage.qml	2014-07-07 08:40:55 +0000
@@ -0,0 +1,131 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Pickers 1.0
+import Ubuntu.Components.ListItems 1.0 as ListItem
+import "../components"
+import "../components/Utils.js" as Utils
+
+Page {
+    id: _addAlarmPage
+
+    title: i18n.tr("New Alarm")
+    visible: false
+
+    // Function to save a new alarm
+    function saveNewAlarm() {
+        var alarmTime = new Date()
+        alarmTime.setHours(_timePicker.hours, _timePicker.minutes, 0)
+
+        _alarm.message = _alarmLabel.subText
+        _alarm.date = alarmTime
+        _alarm.type = Alarm.Repeating
+        _alarm.enabled = true
+        _alarm.save()
+    }
+
+    Alarm {
+        id: _alarm
+        onStatusChanged: {
+            if (status !== Alarm.Ready)
+                return;
+            if ((operation > Alarm.NoOperation) &&
+                    (operation < Alarm.Reseting)) {
+                mainStack.pop();
+            }
+        }
+    }
+
+    AlarmUtils {
+        id: alarmUtils
+    }
+
+    Column {
+        id: _alarmColumn
+
+        anchors.fill: parent
+
+        DatePicker {
+            id: _timePicker
+
+            /*
+              #FIXME: DatePicker does not respect the user's locale. The bug
+              has been reported at http://pad.lv/1338138
+            */
+
+            anchors {
+                left: parent.left
+                right: parent.right
+                margins: units.gu(-2)
+            }
+
+            clip: true
+            mode: "Hours|Minutes"
+        }
+
+        SubtitledListItem {
+            id: _alarmRepeat
+
+            text: i18n.tr("Repeat")
+            subText: alarmUtils.format_day_string(_alarm.daysOfWeek)
+            onClicked: mainStack.push(Qt.resolvedUrl("AlarmRepeat.qml"),
+                                      {"alarm": _alarm})
+        }
+
+        SubtitledListItem {
+            id: _alarmLabel
+
+            text: i18n.tr("Label")
+            subText: i18n.tr("Alarm")
+            onClicked: mainStack.push(Qt.resolvedUrl("AlarmLabel.qml"),
+                                      {"alarmLabel": _alarmLabel})
+        }
+
+        SubtitledListItem {
+            id: _alarmSound
+            /*
+              #TODO: Add support for choosing new alarm sound when indicator-
+              datetime supports custom alarm sounds
+            */
+            text: i18n.tr("Sound (disabled)")
+            subText: "Suru arpeggio"
+            onClicked: mainStack.push(Qt.resolvedUrl("AlarmSound.qml"),
+                                      {"alarmSound": _alarmSound})
+        }
+    }
+
+    tools: ToolbarItems {
+        back: Button {
+            action: Action {
+                iconName: "close"
+                onTriggered: {
+                    mainStack.pop()
+                }
+            }
+        }
+
+        ToolbarButton {
+            action: Action {
+                iconName: "save"
+                onTriggered: {
+                    saveNewAlarm()
+                }
+            }
+        }
+    }
+}

=== modified file 'app/clock/ClockPage.qml'
--- app/clock/ClockPage.qml	2014-06-21 16:42:08 +0000
+++ app/clock/ClockPage.qml	2014-07-07 08:40:55 +0000
@@ -49,12 +49,16 @@
         contentWidth: parent.width
         contentHeight: clock.height + date.height + locationRow.height
 
-        AddCityButton {
+        PullToAdd {
             id: addCityButton
+
             anchors.top: parent.top
             anchors.topMargin: -labelHeight - units.gu(6)
             anchors.horizontalCenter: parent.horizontalCenter
-            maxThreshold: _maxThreshold
+
+            leftLabel: i18n.tr("Add")
+            rightLabel: i18n.tr("City")
+            maxThreshold: clockPage._maxThreshold
         }
 
         Clock {

=== added file 'app/components/PullToAdd.qml'
--- app/components/PullToAdd.qml	1970-01-01 00:00:00 +0000
+++ app/components/PullToAdd.qml	2014-07-07 08:40:55 +0000
@@ -0,0 +1,77 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Row {
+    id: _pullToAdd
+
+    // Property to get the position of the button from the top
+    property int dragPosition: 0
+
+    // Property to store the height of the label
+    property alias labelHeight: _leftLabel.height
+
+    // Property to set the label on the left side of the add button
+    property alias leftLabel: _leftLabel.text
+
+    // Property to set the label on the right side of the add button
+    property alias rightLabel: _rightLabel.text
+
+    // Property to set the maximum threshold beyond which the button shouldn't resize
+    property int maxThreshold
+
+    spacing: units.gu(1)
+
+    Label {
+        id: _leftLabel
+
+        text: "pull"
+        fontSize: "medium"
+        color: UbuntuColors.midAubergine
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    ClockCircle {
+        id: _addButton
+
+        isOuter: true
+        width: dragPosition >= maxThreshold ? dragPosition * units.gu(6.5)/maxThreshold : units.gu(6.5)
+
+        ClockCircle {
+            width: dragPosition >= maxThreshold ? dragPosition * units.gu(4.5)/maxThreshold : units.gu(4.5)
+            anchors.centerIn: parent
+
+            Label {
+                id: plusLabel
+
+                anchors.centerIn: parent
+                font.pixelSize: dragPosition >= maxThreshold ? dragPosition * units.dp(30)/maxThreshold : units.dp(30)
+                text: "+"
+            }
+        }
+    }
+
+    Label {
+        id: _rightLabel
+
+        text: "down"
+        fontSize: "medium"
+        color: UbuntuColors.midAubergine
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}

=== added file 'app/components/SubtitledListItem.qml'
--- app/components/SubtitledListItem.qml	1970-01-01 00:00:00 +0000
+++ app/components/SubtitledListItem.qml	2014-07-07 08:40:55 +0000
@@ -0,0 +1,55 @@
+/*
+ * 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 version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import Ubuntu.Components.ListItems 1.0 as ListItem
+
+/*
+  This component is almost an identical copy of the SDK's subtitled with the
+  exception of the font size and color required by the new clock app design.
+
+  #TODO: Revert to using the SDK Subtitled Component when they change the
+  design to match the new clock app design.
+ */
+ListItem.Base {
+    id: _subtitledContainer
+
+    // Property to set the main text label
+    property alias text: _mainText.text
+
+    // Property to set the subtitle label
+    property alias subText: _subText.text
+    
+    height: units.gu(7)
+    
+    Column {
+        id: _labelColumn
+        
+        anchors.verticalCenter: parent.verticalCenter
+        
+        Label {
+            id: _mainText
+            fontSize: "medium"
+            color: UbuntuColors.midAubergine
+        }
+        
+        Label {
+            id: _subText
+            fontSize: "xx-small"
+        }
+    }
+}

=== modified file 'app/ubuntu-clock-app.qml'
--- app/ubuntu-clock-app.qml	2014-06-17 18:06:24 +0000
+++ app/ubuntu-clock-app.qml	2014-07-07 08:40:55 +0000
@@ -74,11 +74,6 @@
         onTriggered: clockPage.updateTime()
     }
 
-    AlarmModel {
-        id: alarmModel
-        Component.onCompleted: Utils.log(debugMode, "Alarm Database loaded")
-    }
-
     PageStack {
         id: mainStack