Use icon-based context menu (like on Harmattan)

gpodder-ui-qml

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

qml/EpisodeItem.qml

@@ -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 {
+        IconContextMenu {
-            MenuItem {
+            IconMenuItem {
-                text: 'Download'
+                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'
+            IconMenuItem {
-                onClicked: player.playbackEpisode(id);
-            }
-            MenuItem {
                 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

qml/EpisodesPage.qml

@@ -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 {
+        delegate: EpisodeItem {}
-            onClicked: pgst.loadPage('EpisodeDetail.qml', {episode_id: id, title: title});
-        }
 
         ViewPlaceholder {
             enabled: episodeList.count == 0

qml/IconContextMenu.qml

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

qml/IconMenuItem.qml

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

qml/PodcastItem.qml

@@ -25,10 +25,12 @@ ListItem {
     id: podcastItem
 
     menu: Component {
-        ContextMenu {
+        IconContextMenu {
-            MenuItem {
+            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',