Merge lp:~ubuntu-clock-dev/ubuntu-clock-app/night-mode into lp:ubuntu-clock-app

[Victor Thompson]

Introduce Night mode user setting

This MP is just to get a diff of the this WIP prototype

[lp:~ubuntu-clock-dev/ubuntu-clock-app/night-mode]

203. By Victor Thompson on 2015-07-17

Merge of trunk

[Bartosz Kosiorek (gang65)]

Wow. Awensome work.
I wish I could approve that MR. Could you please ask ~raecontreras, if he has spare time to approve UX design for that?

review: Needs Information

[lp:~ubuntu-clock-dev/ubuntu-clock-app/night-mode]

204. By Victor Thompson on 2015-07-17

Update some colors, update new component to QTQ 2.4 and UC 1.2.

205. By Victor Thompson on 2015-07-17

Merge of trunk

Unmerged revisions

205. By Victor Thompson on 2015-07-17

Merge of trunk

204. By Victor Thompson on 2015-07-17

Update some colors, update new component to QTQ 2.4 and UC 1.2.

203. By Victor Thompson on 2015-07-17

Merge of trunk

202. By Victor Thompson on 2015-02-22

* Prototype initial Night mode

=== modified file 'app/alarm/AlarmPage.qml'
--- app/alarm/AlarmPage.qml	2015-07-16 21:02:18 +0000
+++ app/alarm/AlarmPage.qml	2015-07-17 21:47:41 +0000
@@ -139,6 +139,8 @@
         }
     }
 
+    LightBackground {}
+
     AlarmList {
         id: alarmListView
         listModel: alarmModel
 
=== modified file 'app/alarm/AlarmSettingsPage.qml'
--- app/alarm/AlarmSettingsPage.qml	2015-07-15 22:31:52 +0000
+++ app/alarm/AlarmSettingsPage.qml	2015-07-17 21:47:41 +0000
@@ -45,6 +45,8 @@
         id: alarmSettings
     }
 
+    LightBackground {}
+
     ListModel {
         id: durationModel
         Component.onCompleted: initialise()
@@ -209,6 +211,48 @@
                 }
             }
 
+            ListItem.Empty {
+                Label {
+                    text: i18n.tr("Night mode")
+                    color: UbuntuColors.midAubergine
+                    anchors {
+                        left: parent.left
+                        leftMargin: units.gu(2)
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+
+                Switch {
+                    id: nightModeSwitch
+
+                    anchors {
+                        right: parent.right
+                        rightMargin: units.gu(2)
+                        verticalCenter: parent.verticalCenter
+                    }
+
+                    checked: isNightMode === true
+
+                    onCheckedChanged: {
+                        isNightMode = checked
+                        checked: isNightMode === true
+                        var appSettings = JSON.parse
+                                (JSON.stringify(clockModeDocument.contents))
+                        appSettings.nightMode = isNightMode
+
+                        if(checked) {
+                            clockModeDocument.contents = appSettings
+                        } else {
+                            clockModeDocument.contents = appSettings
+                        }
+                    }
+                }
+
+                onClicked: {
+                    nightModeSwitch.checked = !nightModeSwitch.checked
+                }
+            }
+
             SubtitledListItem {
                 text: i18n.tr("Change time and date")
                 subText: {
 
=== modified file 'app/alarm/EditAlarmPage.qml'
--- app/alarm/EditAlarmPage.qml	2015-05-27 16:03:23 +0000
+++ app/alarm/EditAlarmPage.qml	2015-07-17 21:47:41 +0000
@@ -153,6 +153,8 @@
         }
     }
 
+    LightBackground {}
+
     Alarm {
         id: _alarm
 
 
=== modified file 'app/clock/ClockPage.qml'
--- app/clock/ClockPage.qml	2015-05-27 16:03:23 +0000
+++ app/clock/ClockPage.qml	2015-07-17 21:47:41 +0000
@@ -244,7 +244,7 @@
 
             text: clock.analogTime.toLocaleDateString()
             opacity: settingsIcon.opacity
-            color: locationRow.visible ? Theme.palette.baseText : UbuntuColors.midAubergine
+            color: isNightMode ? UbuntuColors.warmGrey : (locationRow.visible ? Theme.palette.baseText : UbuntuColors.midAubergine)
             fontSize: "medium"
         }
 
@@ -275,7 +275,7 @@
 
                 fontSize: "medium"
                 anchors.verticalCenter: locationIcon.verticalCenter
-                color: UbuntuColors.midAubergine
+                color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.midAubergine
 
                 text: {
                     if (userLocationDocument.contents.location === "Null"
 
=== modified file 'app/components/Background.qml'
--- app/components/Background.qml	2015-05-27 16:03:23 +0000
+++ app/components/Background.qml	2015-07-17 21:47:41 +0000
@@ -28,5 +28,5 @@
 
     asynchronous: true
     anchors.fill: parent
-    source: "../graphics/Background_Texture.jpg"
+    source: isNightMode ? "../graphics/Background_Texture_Dark.jpg" : "../graphics/Background_Texture.jpg"
 }
 
=== modified file 'app/components/Clock.qml'
--- app/components/Clock.qml	2015-05-27 16:03:23 +0000
+++ app/components/Clock.qml	2015-07-17 21:47:41 +0000
@@ -243,10 +243,10 @@
                 analogShadow.source = digitalShadow.source = ""
 
                 if(isMainClock) {
-                    var isDigitalSetting = JSON.parse
+                    var appSettings = JSON.parse
                             (JSON.stringify(clockModeDocument.contents))
-                    isDigitalSetting.digitalMode = isDigital
-                    clockModeDocument.contents = isDigitalSetting
+                    appSettings.digitalMode = isDigital
+                    clockModeDocument.contents = appSettings
                 }
             }
         }
 
=== modified file 'app/components/ClockCircle.qml'
--- app/components/ClockCircle.qml	2015-05-27 16:03:23 +0000
+++ app/components/ClockCircle.qml	2015-07-17 21:47:41 +0000
@@ -89,7 +89,7 @@
         Image {
             smooth: false
             fillMode: Image.PreserveAspectFit
-            source: "../graphics/Inner_Clock_Texture.png"
+            source: isNightMode ? "../graphics/Inner_Clock_Texture_Dark.png" : "../graphics/Inner_Clock_Texture.png"
         }
     }
 
 
=== modified file 'app/components/DigitalMode.qml'
--- app/components/DigitalMode.qml	2015-05-27 16:03:23 +0000
+++ app/components/DigitalMode.qml	2015-07-17 21:47:41 +0000
@@ -53,7 +53,7 @@
 
         anchors.centerIn: parent
 
-        color: UbuntuColors.midAubergine
+        color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.midAubergine
         font.pixelSize: units.dp(1)
         text: {
             if (time.search(Qt.locale().amText) !== -1) {
@@ -77,7 +77,7 @@
         anchors.top: _digitalTime.bottom
         anchors.horizontalCenter: parent.horizontalCenter
 
-        color: UbuntuColors.midAubergine
+        color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.midAubergine
         font.pixelSize: units.dp(1)
         visible: text !== ""
         text: {
 
=== added file 'app/components/LightBackground.qml'
--- app/components/LightBackground.qml	1970-01-01 00:00:00 +0000
+++ app/components/LightBackground.qml	2015-07-17 21:47:41 +0000
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2014-2015 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.4
+import Ubuntu.Components 1.2
+
+/*
+  Component to set the background of the app
+  */
+
+Image {
+    id: _background
+
+    asynchronous: true
+    anchors.fill: parent
+    source: "../graphics/Background_Texture.jpg"
+}
 
=== added file 'app/graphics/Background_Texture_Dark.jpg'
 Binary files app/graphics/Background_Texture_Dark.jpg	1970-01-01 00:00:00 +0000 and app/graphics/Background_Texture_Dark.jpg	2015-07-17 21:47:41 +0000 differ
=== added file 'app/graphics/Inner_Clock_Texture_Dark.png'
 Binary files app/graphics/Inner_Clock_Texture_Dark.png	1970-01-01 00:00:00 +0000 and app/graphics/Inner_Clock_Texture_Dark.png	2015-07-17 21:47:41 +0000 differ
=== modified file 'app/ubuntu-clock-app.qml'
--- app/ubuntu-clock-app.qml	2015-07-15 22:31:52 +0000
+++ app/ubuntu-clock-app.qml	2015-07-17 21:47:41 +0000
@@ -42,6 +42,8 @@
     */
     automaticOrientation: false
 
+    property bool isNightMode: clockModeDocument.contents.nightMode
+
     /*
       The width and height defined below are the same dimension used by the
       designers in the clock visual spec.
@@ -67,7 +69,7 @@
         create: true
         database: clockDB
         docId: "clockModeDocument"
-        defaults: { "digitalMode": false }
+        defaults: { "digitalMode": false, "nightMode": false }
     }
 
     U1db.Document {
 
=== modified file 'app/upstreamcomponents/PageWithBottomEdge.qml'
--- app/upstreamcomponents/PageWithBottomEdge.qml	2015-05-27 16:03:23 +0000
+++ app/upstreamcomponents/PageWithBottomEdge.qml	2015-07-17 21:47:41 +0000
@@ -175,7 +175,7 @@
         z: 1
         width: tipLabel.paintedWidth + units.gu(6)
         height: bottomEdge.tipHeight + units.gu(1)
-        color: Theme.palette.normal.overlay
+        color: isNightMode ? "black" : Theme.palette.normal.overlay // CUSTOM
         Label {
             id: tipLabel
 
@@ -184,6 +184,7 @@
                 left: parent.left
                 right: parent.right
             }
+            color: isNightMode ? UbuntuColors.warmGrey : "black" // CUSTOM
             height: bottomEdge.tipHeight
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
 
=== modified file 'app/worldclock/AddWorldCityButton.qml'
--- app/worldclock/AddWorldCityButton.qml	2015-05-27 16:03:23 +0000
+++ app/worldclock/AddWorldCityButton.qml	2015-07-17 21:47:41 +0000
@@ -28,7 +28,7 @@
 
     Label {
         text: i18n.tr("Add")
-        color: UbuntuColors.midAubergine
+        color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.midAubergine
         anchors {
             right: _addButton.left
             rightMargin: units.gu(1)
@@ -49,7 +49,7 @@
 
             Icon {
                 anchors.centerIn: parent
-                color: UbuntuColors.coolGrey
+                color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.coolGrey
                 name: "add"
                 height: units.gu(2)
                 width: height
@@ -59,7 +59,7 @@
 
     Label {
         text: i18n.tr("City")
-        color: UbuntuColors.midAubergine
+        color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.midAubergine
         anchors {
             left: _addButton.right
             leftMargin: units.gu(1)
 
=== modified file 'app/worldclock/UserWorldCityDelegate.qml'
--- app/worldclock/UserWorldCityDelegate.qml	2015-05-27 16:03:23 +0000
+++ app/worldclock/UserWorldCityDelegate.qml	2015-07-17 21:47:41 +0000
@@ -56,7 +56,7 @@
                 objectName: "userCityNameText"
                 width: parent.width
                 elide: Text.ElideRight
-                color: UbuntuColors.midAubergine
+                color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.midAubergine
             }
 
             Label {
@@ -65,6 +65,7 @@
                 fontSize: "xx-small"
                 width: parent.width
                 elide: Text.ElideRight
+                color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.coolGrey
             }
         }
 
@@ -138,6 +139,7 @@
             maximumLineCount: 2
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignRight
+            color: isNightMode ? UbuntuColors.warmGrey : UbuntuColors.coolGrey
             text: {
                 var day;
 
 
=== modified file 'app/worldclock/WorldCityList.qml'
--- app/worldclock/WorldCityList.qml	2015-06-18 22:57:49 +0000
+++ app/worldclock/WorldCityList.qml	2015-07-17 21:47:41 +0000
@@ -152,6 +152,8 @@
         }
     }
 
+    LightBackground {}
+
     /*
      Loader to allow for dynamic loading/unloading of the json model only when
      necessary.
 
=== modified file 'po/com.ubuntu.clock.pot'
--- po/com.ubuntu.clock.pot	2015-07-15 23:50:07 +0000
+++ po/com.ubuntu.clock.pot	2015-07-17 21:47:41 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-07-16 01:36+0200\n"
+"POT-Creation-Date: 2015-07-17 16:44-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -19,7 +19,7 @@
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
 #: ../app/alarm/AlarmLabel.qml:30 ../app/alarm/AlarmLabel.qml:56
-#: ../app/alarm/EditAlarmPage.qml:291
+#: ../app/alarm/EditAlarmPage.qml:293
 msgid "Label"
 msgstr ""
 
@@ -38,7 +38,7 @@
 msgstr ""
 
 #: ../app/alarm/AlarmPage.qml:51 ../app/alarm/EditAlarmPage.qml:44
-#: ../app/alarm/EditAlarmPage.qml:166
+#: ../app/alarm/EditAlarmPage.qml:168
 msgid "Alarm"
 msgstr ""
 
@@ -50,15 +50,15 @@
 msgid "Select All"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:162
+#: ../app/alarm/AlarmPage.qml:164
 msgid "No saved alarms"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:163
+#: ../app/alarm/AlarmPage.qml:165
 msgid "Tap the + icon to add an alarm"
 msgstr ""
 
-#: ../app/alarm/AlarmRepeat.qml:34 ../app/alarm/EditAlarmPage.qml:281
+#: ../app/alarm/AlarmRepeat.qml:34 ../app/alarm/EditAlarmPage.qml:283
 msgid "Repeat"
 msgstr ""
 
@@ -68,39 +68,43 @@
 
 #. TRANSLATORS: Silence after
 #. TRANSLATORS: Snooze for
-#: ../app/alarm/AlarmSettingsPage.qml:54 ../app/alarm/AlarmSettingsPage.qml:55
 #: ../app/alarm/AlarmSettingsPage.qml:56 ../app/alarm/AlarmSettingsPage.qml:57
-#: ../app/alarm/AlarmSettingsPage.qml:67 ../app/alarm/AlarmSettingsPage.qml:68
+#: ../app/alarm/AlarmSettingsPage.qml:58 ../app/alarm/AlarmSettingsPage.qml:59
 #: ../app/alarm/AlarmSettingsPage.qml:69 ../app/alarm/AlarmSettingsPage.qml:70
-#: ../app/alarm/AlarmSettingsPage.qml:126
-#: ../app/alarm/AlarmSettingsPage.qml:154
+#: ../app/alarm/AlarmSettingsPage.qml:71 ../app/alarm/AlarmSettingsPage.qml:72
+#: ../app/alarm/AlarmSettingsPage.qml:128
+#: ../app/alarm/AlarmSettingsPage.qml:156
 #, qt-format
 msgid "%1 minute"
 msgid_plural "%1 minutes"
 msgstr[0] ""
 msgstr[1] ""
 
-#: ../app/alarm/AlarmSettingsPage.qml:94
+#: ../app/alarm/AlarmSettingsPage.qml:96
 msgid "Alarm volume"
 msgstr ""
 
-#: ../app/alarm/AlarmSettingsPage.qml:125
+#: ../app/alarm/AlarmSettingsPage.qml:127
 msgid "Silence after"
 msgstr ""
 
-#: ../app/alarm/AlarmSettingsPage.qml:153
+#: ../app/alarm/AlarmSettingsPage.qml:155
 msgid "Snooze for"
 msgstr ""
 
-#: ../app/alarm/AlarmSettingsPage.qml:179
+#: ../app/alarm/AlarmSettingsPage.qml:181
 msgid "Vibration"
 msgstr ""
 
-#: ../app/alarm/AlarmSettingsPage.qml:213
+#: ../app/alarm/AlarmSettingsPage.qml:216
+msgid "Night mode"
+msgstr ""
+
+#: ../app/alarm/AlarmSettingsPage.qml:257
 msgid "Change time and date"
 msgstr ""
 
-#: ../app/alarm/AlarmSound.qml:28 ../app/alarm/EditAlarmPage.qml:304
+#: ../app/alarm/AlarmSound.qml:28 ../app/alarm/EditAlarmPage.qml:306
 msgid "Sound"
 msgstr ""
 
@@ -156,7 +160,7 @@
 msgid "Edit alarm"
 msgstr ""
 
-#: ../app/alarm/EditAlarmPage.qml:325
+#: ../app/alarm/EditAlarmPage.qml:327
 msgid "Delete alarm"
 msgstr ""
 
@@ -175,37 +179,37 @@
 
 #. TRANSLATORS: this indicates if the time in a world clock
 #. is behind or ahead of the time at the current location
-#: ../app/worldclock/UserWorldCityDelegate.qml:146
+#: ../app/worldclock/UserWorldCityDelegate.qml:148
 msgid "behind"
 msgstr ""
 
-#: ../app/worldclock/UserWorldCityDelegate.qml:147
+#: ../app/worldclock/UserWorldCityDelegate.qml:149
 msgid "ahead"
 msgstr ""
 
 #. TRANSLATORS: the first argument is hour, followed by
 #. minute, and the translation for either 'behind' or
 #. 'ahead'
-#: ../app/worldclock/UserWorldCityDelegate.qml:157
+#: ../app/worldclock/UserWorldCityDelegate.qml:159
 #, qt-format
 msgid "%1h %2m %3"
 msgstr ""
 
 #. TRANSLATORS: the first argument is hour, followed by the
 #. translation for either 'behind' or 'ahead'
-#: ../app/worldclock/UserWorldCityDelegate.qml:166
+#: ../app/worldclock/UserWorldCityDelegate.qml:168
 #, qt-format
 msgid "%1h %2"
 msgstr ""
 
 #. TRANSLATORS: the first argument is minute, followed by the
 #. translation for either 'behind' or 'ahead'
-#: ../app/worldclock/UserWorldCityDelegate.qml:174
+#: ../app/worldclock/UserWorldCityDelegate.qml:176
 #, qt-format
 msgid "%1m %2"
 msgstr ""
 
-#: ../app/worldclock/UserWorldCityDelegate.qml:180
+#: ../app/worldclock/UserWorldCityDelegate.qml:182
 msgid "Same time"
 msgstr ""
 
@@ -217,19 +221,19 @@
 msgid "Search..."
 msgstr ""
 
-#: ../app/worldclock/WorldCityList.qml:213
+#: ../app/worldclock/WorldCityList.qml:215
 msgid "Searching for a city"
 msgstr ""
 
-#: ../app/worldclock/WorldCityList.qml:218
+#: ../app/worldclock/WorldCityList.qml:220
 msgid "No City Found"
 msgstr ""
 
-#: ../app/worldclock/WorldCityList.qml:224
+#: ../app/worldclock/WorldCityList.qml:226
 msgid "Unable to connect."
 msgstr ""
 
-#: ../app/worldclock/WorldCityList.qml:225
+#: ../app/worldclock/WorldCityList.qml:227
 msgid "Please check your network connection and try again"
 msgstr ""