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: { header: {
height: 100, /* page header height */ 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 = { var colors = {

8
touch/EpisodeDetail.qml
View file

@ -65,14 +65,14 @@ SlidePage {
id: detailColumn id: detailColumn
width: detailPage.width 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 { Column {
width: parent.width - 2 * 30 * pgst.scalef width: parent.width - 2 * Constants.layout.padding * pgst.scalef
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: 10 * pgst.scalef spacing: Constants.layout.padding * pgst.scalef
PLabel { PLabel {
text: detailPage.title text: detailPage.title

54
touch/EpisodeItem.qml
View file

@ -30,7 +30,7 @@ Item {
property bool isPlaying: ((player.episode == id) && player.isPlaying) property bool isPlaying: ((player.episode == id) && player.isPlaying)
width: parent.width 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 } } Behavior on height { PropertyAnimation { duration: 100 } }
Item { Item {
@ -127,43 +127,59 @@ Item {
Rectangle { Rectangle {
anchors { anchors {
top: parent.top 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 color: Constants.colors.download
opacity: .4
} }
Rectangle { Rectangle {
anchors { anchors {
bottom: parent.bottom 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 color: titleLabel.color
opacity: episodeItem.isPlaying ? .6 : .2 opacity: episodeItem.isPlaying ? 1 : .2
} }
transparent: true transparent: true
height: 80 * pgst.scalef height: Constants.layout.item.height * pgst.scalef
anchors { anchors {
left: parent.left left: parent.left
right: parent.right 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 { PLabel {
id: titleLabel id: titleLabel
anchors { anchors {
left: parent.left 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 verticalCenter: parent.verticalCenter
margins: 30 * pgst.scalef
} }
elide: Text.ElideRight 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 transparent: true
height: 100 * pgst.scalef height: Constants.layout.item.height * pgst.scalef
anchors { anchors {
left: parent.left left: parent.left
right: parent.right 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 { CoverArt {
id: cover id: cover
visible: !updating visible: !updating
anchors { anchors {
left: parent.left left: parent.left
leftMargin: 10 * pgst.scalef leftMargin: Constants.layout.padding * pgst.scalef
verticalCenter: parent.verticalCenter 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 source: coverart
text: title text: title
@ -58,8 +71,8 @@ ButtonArea {
PLabel { PLabel {
anchors { anchors {
left: cover.right 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 right: downloadsLabel.left
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
@ -73,7 +86,7 @@ ButtonArea {
id: downloadsLabel id: downloadsLabel
anchors { anchors {
right: parent.right right: parent.right
rightMargin: 10 * pgst.scalef rightMargin: Constants.layout.padding * pgst.scalef
verticalCenter: parent.verticalCenter 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', label: 'Change section',
callback: function () { callback: function () {