Refine QML UI, layout and new/downlaoded indicators

common/constants.js

@@ -22,6 +22,11 @@ var layout = {
     header: {
         height: 100, /* page header height */
     },
+    item: {
+        height: 80, /* podcast/episode item height */
+    },
+    coverart: 80, /* cover art size */
+    padding: 10, /* padding of items left/right */
 };
 
 var colors = {

touch/EpisodeDetail.qml

@@ -65,14 +65,14 @@ SlidePage {
             id: detailColumn
 
             width: detailPage.width
-            spacing: 10 * pgst.scalef
+            spacing: Constants.layout.padding * pgst.scalef
 
-            Item { height: 20 * pgst.scalef; width: parent.width }
+            Item { height: Constants.layout.padding * pgst.scalef; width: parent.width }
 
             Column {
-                width: parent.width - 2 * 30 * pgst.scalef
+                width: parent.width - 2 * Constants.layout.padding * pgst.scalef
                 anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 10 * pgst.scalef
+                spacing: Constants.layout.padding * pgst.scalef
 
                 PLabel {
                     text: detailPage.title

touch/EpisodeItem.qml

@@ -30,7 +30,7 @@ Item {
     property bool isPlaying: ((player.episode == id) && player.isPlaying)
 
     width: parent.width
-    height: (opened ? 160 : 80) * pgst.scalef
+    height: (opened ? 2 : 1) * Constants.layout.item.height * pgst.scalef
     Behavior on height { PropertyAnimation { duration: 100 } }
 
     Item {
@@ -127,43 +127,59 @@ Item {
         Rectangle {
             anchors {
                 top: parent.top
-                left: parent.left
+                left: downloadIndicator.right
             }
 
-            height: parent.height * .2
+            height: Constants.layout.padding
-            width: parent.width * progress
+            width: (parent.width - downloadIndicator.width) * progress
             color: Constants.colors.download
-            opacity: .4
         }
 
         Rectangle {
             anchors {
                 bottom: parent.bottom
-                left: parent.left
+                left: downloadIndicator.right
             }
 
-            height: parent.height * .2
+            height: Constants.layout.padding
-            width: parent.width * playbackProgress
+            width: (parent.width - downloadIndicator.width) * playbackProgress
             color: titleLabel.color
-            opacity: episodeItem.isPlaying ? .6 : .2
+            opacity: episodeItem.isPlaying ? 1 : .2
         }
 
         transparent: true
-        height: 80 * pgst.scalef
+        height: Constants.layout.item.height * pgst.scalef
 
         anchors {
             left: parent.left
             right: parent.right
         }
 
+        Rectangle {
+            id: downloadIndicator
+
+            width: Constants.layout.padding * (downloadState == Constants.state.downloaded)
+
+            Behavior on width { PropertyAnimation { } }
+
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                left: parent.left
+            }
+
+            color: titleLabel.color
+        }
+
         PLabel {
             id: titleLabel
 
             anchors {
                 left: parent.left
-                right: downloadedIcon.visible ? downloadedIcon.left : parent.right
+                leftMargin: 2 * Constants.layout.padding * pgst.scalef
+                right: parent.right
+                rightMargin: Constants.layout.padding * pgst.scalef
                 verticalCenter: parent.verticalCenter
-                margins: 30 * pgst.scalef
             }
 
             elide: Text.ElideRight
@@ -193,19 +209,5 @@ Item {
                 }
             }
         }
-
-        PIcon {
-            id: downloadedIcon
-            color: titleLabel.color
-
-            anchors {
-                right: parent.right
-                margins: 30 * pgst.scalef
-                verticalCenter: parent.verticalCenter
-            }
-
-            visible: downloadState == Constants.state.downloaded
-            icon: Icons.folder
-        }
     }
 }

touch/PodcastItem.qml

@@ -27,24 +27,37 @@ ButtonArea {
 
     transparent: true
 
-    height: 100 * pgst.scalef
+    height: Constants.layout.item.height * pgst.scalef
     anchors {
         left: parent.left
         right: parent.right
     }
 
+    Rectangle {
+        width: Constants.layout.padding * (newEpisodes > 0)
+        Behavior on width { PropertyAnimation { } }
+
+        anchors {
+            top: cover.top
+            bottom: cover.bottom
+            left: parent.left
+        }
+
+        color: Constants.colors.fresh
+    }
+
     CoverArt {
         id: cover
         visible: !updating
 
         anchors {
             left: parent.left
-            leftMargin: 10 * pgst.scalef
+            leftMargin: Constants.layout.padding * pgst.scalef
             verticalCenter: parent.verticalCenter
         }
 
-        width: 80 * pgst.scalef
+        width: Constants.layout.coverart * pgst.scalef
-        height: 80 * pgst.scalef
+        height: Constants.layout.coverart * pgst.scalef
 
         source: coverart
         text: title
@@ -58,8 +71,8 @@ ButtonArea {
     PLabel {
         anchors {
             left: cover.right
-            leftMargin: 10 * pgst.scalef
+            leftMargin: Constants.layout.padding * pgst.scalef
-            rightMargin: 10 * pgst.scalef
+            rightMargin: Constants.layout.padding * pgst.scalef
             right: downloadsLabel.left
             verticalCenter: parent.verticalCenter
         }
@@ -73,7 +86,7 @@ ButtonArea {
         id: downloadsLabel
         anchors {
             right: parent.right
-            rightMargin: 10 * pgst.scalef
+            rightMargin: Constants.layout.padding * pgst.scalef
             verticalCenter: parent.verticalCenter
         }
 

touch/PodcastsPage.qml

@@ -114,6 +114,12 @@ SlidePage {
                             });
                         }
                     },
+                    {
+                        label: 'Mark episodes as old',
+                        callback: function () {
+                            py.call('main.mark_episodes_as_old', [id]);
+                        },
+                    },
                     {
                         label: 'Change section',
                         callback: function () {