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

Refine QML UI, layout and new/downlaoded indicators

Browse source
This commit is contained in:
Thomas Perl 2014-05-09 20:41:04 +02:00
parent c1d65e3572
commit baa8db0861
5 changed files with 63 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

5
common/constants.js
View file

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

8
touch/EpisodeDetail.qml
View file

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

54
touch/EpisodeItem.qml
View file

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

27
touch/PodcastItem.qml
View file

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

6
touch/PodcastsPage.qml
View file

@ -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 () {