Merge lp:~nik90/podbird/2-add-button-feedback into lp:podbird

[Nekhelesh Ramananthan]

this MP converts all actions buttons to use AbstractButton which will then provide haptic feedback when pressed. I also added a light button background which is shown when the button is pressed to make it visually pleasing.

this MP converts all actions buttons to use AbstractButton which will then provide haptic feedback when pressed. I also added a light button background which is shown when the button is pressed to make it visually pleasing.

[lp:~nik90/podbird/2-add-button-feedback]

43. By Nekhelesh Ramananthan on 2015-03-08

Fixed action icon left margin

44. By Nekhelesh Ramananthan on 2015-03-08

Merged prerequisite branch

45. By Nekhelesh Ramananthan on 2015-03-10

Merged prerequisite branch

46. By Nekhelesh Ramananthan on 2015-03-10

Merged prerequisite

47. By Nekhelesh Ramananthan on 2015-03-27

Merged prerequisite lp:~nik90/podbird/1-add-theming-support

[Michael Sheldon (michael-sheldon)]

Looks good :)

review: Approve

=== added file 'app/ui/ActionButton.qml'
--- app/ui/ActionButton.qml	1970-01-01 00:00:00 +0000
+++ app/ui/ActionButton.qml	2015-03-27 15:31:54 +0000
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2015 Podbird Team
+ *
+ * This file is part of Podbird.
+ *
+ * Podbird 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.
+ *
+ * Podbird 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
+
+AbstractButton {
+    id: abstractButton
+
+    property string iconName
+
+    Rectangle {
+        visible: abstractButton.pressed
+        anchors.fill: parent
+        color: podbird.theme.hightlightListView
+    }
+
+    Icon {
+        id: _icon
+        width: units.gu(2.5)
+        height: width
+        anchors.centerIn: parent
+        name: abstractButton.iconName
+        color: podbird.theme.baseIcon
+    }
+}

=== modified file 'app/ui/EpisodesPage.qml'
--- app/ui/EpisodesPage.qml	2015-03-27 15:31:54 +0000
+++ app/ui/EpisodesPage.qml	2015-03-27 15:31:54 +0000
@@ -386,12 +386,15 @@
                     Row {
                         id: actionRow
 
-                        spacing: units.gu(2)
                         anchors.left: parent.left
-
-                        MouseArea {
-                            width: units.gu(3.5)
-                            height: width
+                        anchors.leftMargin: units.gu(-1.5)
+
+                        ActionButton {
+                            width: units.gu(5)
+                            height: units.gu(4)
+
+                            iconName: player.playbackState === MediaPlayer.PlayingState && currentGuid === model.guid ? "media-playback-pause"
+                                                                                                                      : "media-playback-start"
 
                             onClicked: {
                                 var db = Podcasts.init();
@@ -415,23 +418,19 @@
                                     }
                                 });
                             }
-
-                            Icon {
-                                id: playButton
-                                name: player.playbackState === MediaPlayer.PlayingState && currentGuid === model.guid ? "media-playback-pause"
-                                                                                                                      : "media-playback-start"
-                                width: units.gu(2.5)
-                                color: podbird.theme.baseIcon
-                                height: width
-                                anchors.centerIn: parent
-                            }
                         }
 
-                        Item {
+                        ActionButton {
                             id: downloadButton
 
-                            width: units.gu(3.5)
-                            height: width
+                            width: units.gu(5)
+                            height: units.gu(4)
+
+                            property bool queued: false
+
+                            iconName: model.downloadedfile ? "delete" : (queued && downloader.downloadingGuid !== model.guid ? "history" : "save")
+                            opacity: downloader.downloadingGuid === model.guid ? 0.4 : 1.0
+                            enabled: downloader.downloadingGuid !== model.guid
 
                             ActivityIndicator {
                                 anchors.centerIn: parent
@@ -439,38 +438,23 @@
                                 running: visible
                             }
 
-                            Icon {
-                                id: downloadIcon
-                                property bool queued: false;
-                                name: model.downloadedfile ? "delete" : (queued && downloader.downloadingGuid !== model.guid ? "history" : "save")
-                                anchors.centerIn: parent
-                                width: units.gu(2.5)
-                                height: width
-                                color: podbird.theme.baseIcon
-                                opacity: downloader.downloadingGuid === model.guid ? 0.4 : 1.0
-                            }
-
-                            MouseArea {
-                                anchors.fill: parent
-                                enabled: downloader.downloadingGuid !== model.guid
-
-                                onClicked: {
-                                    if (model.downloadedfile) {
-                                        fileManager.deleteFile(model.downloadedfile);
-                                        var db = Podcasts.init();
-                                        db.transaction(function (tx) {
-                                            tx.executeSql("UPDATE Episode SET downloadedfile = NULL WHERE guid = ?", [model.guid]);
-                                        });
-                                        loadEpisodes(episodeModel.pid, episodeModel.artist, episodeModel.image);
-                                    } else {
-                                        downloadIcon.queued = true;
-                                        downloader.addDownload(model.guid, model.audiourl);
-                                    }
+                            onClicked: {
+                                if (model.downloadedfile) {
+                                    fileManager.deleteFile(model.downloadedfile);
+                                    var db = Podcasts.init();
+                                    db.transaction(function (tx) {
+                                        tx.executeSql("UPDATE Episode SET downloadedfile = NULL WHERE guid = ?", [model.guid]);
+                                    });
+                                    loadEpisodes(episodeModel.pid, episodeModel.artist, episodeModel.image);
+                                } else {
+                                    downloadButton.queued = true;
+                                    downloader.addDownload(model.guid, model.audiourl);
                                 }
                             }
                         }
                     }
 
+
                     ProgressBar {
                         visible: downloader.downloadingGuid === model.guid
                         minimumValue: 0

=== modified file 'app/ui/NowPlayingPage.qml'
--- app/ui/NowPlayingPage.qml	2015-03-27 15:31:54 +0000
+++ app/ui/NowPlayingPage.qml	2015-03-27 15:31:54 +0000
@@ -125,7 +125,7 @@
         anchors.horizontalCenter: parent.horizontalCenter
         spacing: units.gu(2)
 
-        MouseArea {
+        AbstractButton {
             id: skipBackwardButton
             width: units.gu(6)
             height: width
@@ -158,7 +158,7 @@
             }
         }
 
-        MouseArea {
+        AbstractButton {
             id: playButton
             width: units.gu(10)
             height: width
@@ -176,7 +176,7 @@
             }
         }
 
-        MouseArea {
+        AbstractButton {
             id: skipForwardButton
             width: units.gu(6)
             height: width

=== modified file 'app/ui/PlayerControls.qml'
--- app/ui/PlayerControls.qml	2015-03-27 15:31:54 +0000
+++ app/ui/PlayerControls.qml	2015-03-27 15:31:54 +0000
@@ -60,7 +60,7 @@
 
         Column {
             anchors.verticalCenter: parent.verticalCenter
-            anchors.right: playButtonBackground.left
+            anchors.right: playButton.left
             anchors.left: cover.right
             anchors.leftMargin: units.gu(2)
 
@@ -87,32 +87,36 @@
             }
         }
 
-        Rectangle {
-            id: playButtonBackground
+        AbstractButton {
+            id: playButton
+
             width: units.gu(7)
             height: cover.height
-            color: "#FFF"
-            opacity: play.pressed ? 0.1 : 0
-            visible: controlRect.height > 0
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
+            enabled: controlRect.height > 0
+            visible: enabled
 
-            MouseArea {
-                id: play
+            Rectangle {
+                id: playButtonBackground
                 anchors.fill: parent
-                onClicked: player.playbackState === MediaPlayer.PlayingState ? player.pause()
-                                                                             : player.play()
-            }
-        }
-
-        Icon {
-            color: "white"
-            width: units.gu(3)
-            height: width
-            anchors.centerIn: playButtonBackground
-            name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause"
-                                                                    : "media-playback-start"
-            opacity: play.pressed ? 0.4 : 1.0
+                color: "#FFF"
+                opacity: 0.1
+                visible: playButton.pressed
+            }
+
+            onClicked: player.playbackState === MediaPlayer.PlayingState ? player.pause()
+                                                                         : player.play()
+
+            Icon {
+                color: "white"
+                width: units.gu(3)
+                height: width
+                anchors.centerIn: playButtonBackground
+                name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause"
+                                                                        : "media-playback-start"
+                opacity: playButton.pressed ? 0.4 : 1.0
+            }
         }
     }
 }

=== modified file 'po/com.mikeasoft.podbird.pot'
--- po/com.mikeasoft.podbird.pot	2015-03-27 15:31:54 +0000
+++ po/com.mikeasoft.podbird.pot	2015-03-27 15:31:54 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-03-27 16:25+0100\n"
+"POT-Creation-Date: 2015-03-27 16:30+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -168,6 +168,6 @@
 msgid "Theme"
 msgstr ""
 
-#: /home/krnekhelesh/Documents/Ubuntu-Projects/MP-Reviews/builddir/build-1-add-theming-support-UbuntuSDK_for_armhf_GCC_ubuntu_sdk_14_10_utopic-Default/po/Podbird.desktop.in.h:1
+#: /home/krnekhelesh/Documents/Ubuntu-Projects/MP-Reviews/builddir/build-2-add-button-feedback-UbuntuSDK_for_armhf_GCC_ubuntu_sdk_14_10_utopic-Default/po/Podbird.desktop.in.h:1
 msgid "Podbird"
 msgstr ""