From baa8db08613f3551b8a9054f7ad7c59df09e962b Mon Sep 17 00:00:00 2001 From: Thomas Perl Date: Fri, 9 May 2014 20:41:04 +0200 Subject: [PATCH] Refine QML UI, layout and new/downlaoded indicators --- common/constants.js | 5 ++++ touch/EpisodeDetail.qml | 8 +++--- touch/EpisodeItem.qml | 54 +++++++++++++++++++++-------------------- touch/PodcastItem.qml | 27 +++++++++++++++------ touch/PodcastsPage.qml | 6 +++++ 5 files changed, 63 insertions(+), 37 deletions(-) diff --git a/common/constants.js b/common/constants.js index 52ae8b3..7d72444 100644 --- a/common/constants.js +++ b/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 = { diff --git a/touch/EpisodeDetail.qml b/touch/EpisodeDetail.qml index 0881562..24a709e 100644 --- a/touch/EpisodeDetail.qml +++ b/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 diff --git a/touch/EpisodeItem.qml b/touch/EpisodeItem.qml index a0b6e74..03512f1 100644 --- a/touch/EpisodeItem.qml +++ b/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 - width: parent.width * progress + height: Constants.layout.padding + 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 - width: parent.width * playbackProgress + height: Constants.layout.padding + 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 - } } } diff --git a/touch/PodcastItem.qml b/touch/PodcastItem.qml index ba614db..fd2dc6f 100644 --- a/touch/PodcastItem.qml +++ b/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 - height: 80 * pgst.scalef + width: Constants.layout.coverart * 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 - rightMargin: 10 * pgst.scalef + leftMargin: Constants.layout.padding * 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 } diff --git a/touch/PodcastsPage.qml b/touch/PodcastsPage.qml index 8f1a425..7a087c9 100644 --- a/touch/PodcastsPage.qml +++ b/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 () {