New confirmation dialog

touch/Confirmation.qml

@@ -27,45 +27,77 @@ Dialog {
     id: confirmation
 
     property alias title: header.title
-    property alias icon: icon.icon
+    property alias description: description.text
+    property alias affirmativeAction: affirmativeButton.text
+    property alias negativeAction: negativeButton.text
+
+    property string icon
     property alias color: header.color
     property var callback: undefined
 
-    contentHeight: icon.height + header.height + confirmLabel.height + 50 * pgst.scalef
+    contentHeight: contentColumn.height
 
-    SlidePageHeader {
+    Column {
-        id: header
+        id: contentColumn
-        color: Constants.colors.destructive
+        width: parent.width
-        title: 'Confirmation'
-    }
 
-    PIcon {
+        SlidePageHeader {
-        id: icon
+            id: header
-        size: 200
+            color: Constants.colors.destructive
-        anchors.centerIn: parent
+            title: 'Confirmation'
-        color: header.color
+        }
 
-        MouseArea {
+        PLabel {
-            anchors.fill: parent
+            id: description
-            onClicked: {
+
-                if (confirmation.callback !== undefined) {
+            width: parent.width - 30 * pgst.scalef
-                    confirmation.callback();
+            anchors.horizontalCenter: parent.horizontalCenter
+            wrapMode: Text.WordWrap
+
+            visible: text
+        }
+
+        Item { width: parent.width; height: 10 * pgst.scalef }
+
+        Row {
+            width: parent.width - 30 * pgst.scalef
+            height: 80 * pgst.scalef
+            spacing: 30 * pgst.scalef
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            ConfirmationButton {
+                id: affirmativeButton
+
+                width: (parent.width - parent.spacing) * 2 / 3
+                height: parent.height
+
+                text: 'Yes'
+                icon: confirmation.icon
+                contentColor: header.color
+
+                onClicked: {
+                    if (confirmation.callback !== undefined) {
+                        confirmation.callback();
+                        confirmation.closePage();
+                    }
+                }
+            }
+
+            ConfirmationButton {
+                id: negativeButton
+
+                width: (parent.width - parent.spacing) * 1 / 3
+                height: parent.height
+
+                text: 'Cancel'
+                contentColor: Constants.colors.placeholder
+
+                onClicked: {
                     confirmation.closePage();
                 }
             }
         }
-    }
 
-    PLabel {
+        Item { width: parent.width; height: 30 * pgst.scalef }
-        id: confirmLabel
-
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            top: icon.bottom
-            margins: 30 * pgst.scalef
-        }
-
-        text: 'Tap to confirm'
-        color: header.color
     }
 }

touch/ConfirmationButton.qml

@@ -0,0 +1,48 @@
+
+/**
+ *
+ * gPodder QML UI Reference Implementation
+ * Copyright (c) 2014, Thomas Perl <m@thp.io>
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+ * OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ *
+ */
+
+import QtQuick 2.0
+
+import 'common/constants.js' as Constants
+
+ButtonArea {
+    id: confirmationButton
+
+    property alias text: label.text
+    property alias icon: icon.icon
+    property color contentColor: Constants.colors.highlight
+
+    Row {
+        anchors.centerIn: parent
+        spacing: 5 * pgst.scalef
+
+        PIcon {
+            id: icon
+            anchors.verticalCenter: parent.verticalCenter
+            color: confirmationButton.contentColor
+        }
+
+        PLabel {
+            id: label
+            anchors.verticalCenter: parent.verticalCenter
+            color: confirmationButton.contentColor
+        }
+    }
+}

touch/Dialog.qml

@@ -52,6 +52,11 @@ Rectangle {
         onClicked: page.closePage();
     }
 
+    MouseArea {
+        // Tapping on the dialog contents should do nothing
+        anchors.fill: contents
+    }
+
     Rectangle {
         id: contents
         property int border: parent.width * 0.1

touch/EpisodeItem.qml

@@ -77,7 +77,7 @@ Item {
                 enabled: downloadState != Constants.state.deleted
                 onClicked: {
                     var ctx = { py: py, id: id };
-                    pgst.showConfirmation('Delete episode', Icons.trash, function () {
+                    pgst.showConfirmation('Delete episode', 'Delete', 'Cancel', 'Delete this episode?', Icons.trash, function () {
                         ctx.py.call('main.delete_episode', [ctx.id]);
                     });
                 }

touch/EpisodesPage.qml

@@ -51,7 +51,7 @@ SlidePage {
                 label: 'Unsubscribe',
                 callback: function () {
                     var ctx = { py: py, id: episodesPage.podcast_id, page: episodesPage };
-                    pgst.showConfirmation('Unsubscribe', Icons.trash, function () {
+                    pgst.showConfirmation('Unsubscribe', 'Unsubscribe', 'Cancel', 'Remove this podcast and all downloaded episodes?', Icons.trash, function () {
                         ctx.py.call('main.unsubscribe', [ctx.id]);
                         ctx.page.closePage();
                     });

touch/Main.qml

@@ -83,9 +83,12 @@ Item {
         }
     }
 
-    function showConfirmation(title, icon, callback) {
+    function showConfirmation(title, affirmative, negative, description, icon, callback) {
         loadPage('Confirmation.qml', {
             title: title,
+            affirmativeAction: affirmative,
+            negativeAction: negative,
+            description: description,
             icon: icon,
             callback: callback,
         });

touch/PodcastsPage.qml

@@ -95,7 +95,7 @@ SlidePage {
                         label: 'Unsubscribe',
                         callback: function () {
                             var ctx = { py: py, id: id };
-                            pgst.showConfirmation('Unsubscribe', Icons.trash, function () {
+                            pgst.showConfirmation('Unsubscribe', 'Unsubscribe', 'Cancel', 'Remove this podcast and all downloaded episodes?', Icons.trash, function () {
                                 ctx.py.call('main.unsubscribe', [ctx.id]);
                             });
                         } },