jeena/gpodder-ui-qml
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

New confirmation dialog

Browse source
This commit is contained in:
Thomas Perl 2014-03-18 20:59:13 +01:00
parent 56c9139dd2
commit e84b6f8738
7 changed files with 121 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

90
touch/Confirmation.qml
View file

@ -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 {
id: header
color: Constants.colors.destructive
title: 'Confirmation'
}
Column {
id: contentColumn
width: parent.width
PIcon {
id: icon
size: 200
anchors.centerIn: parent
color: header.color
SlidePageHeader {
id: header
color: Constants.colors.destructive
title: 'Confirmation'
}
MouseArea {
anchors.fill: parent
onClicked: {
if (confirmation.callback !== undefined) {
confirmation.callback();
PLabel {
id: description
width: parent.width - 30 * pgst.scalef
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 {
id: confirmLabel
anchors {
horizontalCenter: parent.horizontalCenter
top: icon.bottom
margins: 30 * pgst.scalef
}
text: 'Tap to confirm'
color: header.color
Item { width: parent.width; height: 30 * pgst.scalef }
}
}

48
touch/ConfirmationButton.qml Normal file
View file

@ -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
}
}
}

5
touch/Dialog.qml
View file

@ -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

2
touch/EpisodeItem.qml
View file

@ -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]);
});
}

2
touch/EpisodesPage.qml
View file

@ -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();
});

5
touch/Main.qml
View file

@ -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,
});

2
touch/PodcastsPage.qml
View file

@ -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]);
});
} },