Use icon-based context menu (like on Harmattan)

This commit is contained in:
Thomas Perl 2014-01-31 17:26:13 +01:00
parent 5defe76954
commit d51052fd1d
6 changed files with 137 additions and 21 deletions

@ -1 +1 @@
Subproject commit a271e6b7644244d63cc9dca83dcab6a461d9186c
Subproject commit a8170962d1fbf455f2f90a90b0dfd5bd05af8ac9

View file

@ -24,7 +24,8 @@ import Sailfish.Silica 1.0
import 'constants.js' as Constants
ListItem {
id: podcastItem
id: episodeItem
property bool isPlaying: ((player.episode == id) && player.isPlaying)
Rectangle {
anchors {
@ -37,31 +38,57 @@ ListItem {
opacity: .7
}
onClicked: showMenu()
menu: Component {
ContextMenu {
MenuItem {
text: 'Download'
IconContextMenu {
IconMenuItem {
text: episodeItem.isPlaying ? 'Pause' : 'Play'
icon.source: 'image://theme/icon-m-' + (episodeItem.isPlaying ? 'pause' : 'play')
onClicked: {
if (episodeItem.isPlaying) {
player.pause();
} else {
player.playbackEpisode(id);
}
}
}
IconMenuItem {
text: 'Download'
icon.source: 'image://theme/icon-m-download'
visible: downloadState != Constants.state.downloaded
onClicked: {
episodeItem.hideMenu();
py.call('main.download_episode', [id]);
}
}
MenuItem {
text: 'Play'
onClicked: player.playbackEpisode(id);
}
MenuItem {
IconMenuItem {
text: 'Delete'
icon.source: 'image://theme/icon-m-delete'
visible: downloadState != Constants.state.deleted
onClicked: {
episodeItem.hideMenu();
var ctx = { py: py, id: id };
podcastItem.remorseAction('Deleting', function () {
episodeItem.remorseAction('Deleting', function () {
ctx.py.call('main.delete_episode', [ctx.id]);
});
}
}
MenuItem {
IconMenuItem {
text: 'Toggle New'
icon.source: 'image://theme/icon-m-favorite' + (isNew ? '-selected' : '')
onClicked: py.call('main.toggle_new', [id]);
}
IconMenuItem {
text: 'Shownotes'
icon.source: 'image://theme/icon-m-message'
onClicked: {
py.call('main.toggle_new', [id]);
episodeItem.hideMenu();
pgst.loadPage('EpisodeDetail.qml', {episode_id: id, title: title});
}
}
}
@ -108,7 +135,7 @@ ListItem {
rightMargin: (20 * pgst.scalef) * (text != '')
}
font.pixelSize: podcastItem.contentHeight * 0.4
font.pixelSize: episodeItem.contentHeight * 0.4
font.bold: true
opacity: titleItem.opacity

View file

@ -60,6 +60,10 @@ Page {
Util.updateModelWith(episodeListModel, 'id', episode_id,
{'isNew': is_new});
}
onStateChanged: {
Util.updateModelWith(episodeListModel, 'id', episode_id,
{'downloadState': state});
}
}
SilicaListView {
@ -93,9 +97,7 @@ Page {
}
}
delegate: EpisodeItem {
onClicked: pgst.loadPage('EpisodeDetail.qml', {episode_id: id, title: title});
}
delegate: EpisodeItem {}
ViewPlaceholder {
enabled: episodeList.count == 0

37
qml/IconContextMenu.qml Normal file
View file

@ -0,0 +1,37 @@
/**
*
* gPodder QML UI Reference Implementation
* Copyright (c) 2013, 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 Sailfish.Silica 1.0
ContextMenu {
default property alias children: container.children
Item {
height: Theme.itemSizeLarge
width: parent.width
Row {
id: container
anchors.centerIn: parent
spacing: Theme.paddingLarge
}
}
}

43
qml/IconMenuItem.qml Normal file
View file

@ -0,0 +1,43 @@
/**
*
* gPodder QML UI Reference Implementation
* Copyright (c) 2013, 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 Sailfish.Silica 1.0
IconButton {
property alias text: lbl.text
Label {
id: lbl
opacity: parent.down
Behavior on opacity {
FadeAnimation {}
}
anchors {
verticalCenter: parent.top
horizontalCenter: parent.horizontalCenter
}
color: Theme.highlightColor
font.pixelSize: Theme.fontSizeTiny
}
}

View file

@ -25,10 +25,12 @@ ListItem {
id: podcastItem
menu: Component {
ContextMenu {
MenuItem {
IconContextMenu {
IconMenuItem {
text: 'Unsubscribe'
icon.source: 'image://theme/icon-m-delete'
onClicked: {
podcastItem.hideMenu();
var ctx = { py: py, id: id };
podcastItem.remorseAction('Unsubscribing', function () {
ctx.py.call('main.unsubscribe', [ctx.id]);
@ -36,9 +38,11 @@ ListItem {
}
}
MenuItem {
IconMenuItem {
text: 'Rename'
icon.source: 'image://theme/icon-m-edit'
onClicked: {
podcastItem.hideMenu();
var ctx = { py: py, id: id };
pageStack.push('RenameDialog.qml', {
activityName: 'Rename podcast',
@ -51,9 +55,12 @@ ListItem {
});
}
}
MenuItem {
IconMenuItem {
text: 'Change section'
icon.source: 'image://theme/icon-m-shuffle'
onClicked: {
podcastItem.hideMenu();
var ctx = { py: py, id: id };
pageStack.push('RenameDialog.qml', {
activityName: 'Change section',