Color and layout refinements

common/constants.js

@@ -25,17 +25,27 @@ var layout = {
 };
 
 var colors = {
-    download: '#8ae234', /* download green */
+    download: '#7ac224', /* download green */
     select: '#7f5785', /* gpodder dark purple */
     fresh: '#815c86', /* gpodder purple */
     playback: '#729fcf', /* playback blue */
+    destructive: '#cf424f', /* destructive actions */
 
+    page: '#dddddd',
     text: '#333333', /* text color */
-    placeholder: '#666666',
     highlight: '#433b67',
     secondaryHighlight: '#605885',
-    background: '#948db3',
     area: '#cccccc',
+    placeholder: '#666666',
+
+    //page: '#000000',
+    //text: '#ffffff', /* text color */
+    //highlight: Qt.lighter('#433b67', 1.2),
+    //secondaryHighlight: Qt.lighter('#605885', 1.2),
+    //area: '#333333',
+    //placeholder: '#aaaaaa',
+
+    background: '#948db3',
     secondaryBackground: '#d0cce1',
 };
 

touch/EpisodeItem.qml

@@ -48,7 +48,7 @@ Item {
 
             IconMenuItem {
                 text: episodeItem.isPlaying ? 'Pause' : 'Play'
-                color: titleLabel.color
+                color: (episodeItem.isPlaying || progress > 0) ? titleLabel.color : Constants.colors.playback
                 icon: episodeItem.isPlaying ? Icons.pause : Icons.play
                 onClicked: {
                     if (episodeItem.isPlaying) {
@@ -61,7 +61,7 @@ Item {
 
             IconMenuItem {
                 text: 'Download'
-                color: titleLabel.color
+                color: (episodeItem.isPlaying || progress > 0) ? titleLabel.color : Constants.colors.download
                 icon: Icons.cloud_download
                 visible: downloadState != Constants.state.downloaded
                 onClicked: {
@@ -72,7 +72,7 @@ Item {
 
             IconMenuItem {
                 text: 'Delete'
-                color: titleLabel.color
+                color: (episodeItem.isPlaying || progress > 0) ? titleLabel.color : Constants.colors.destructive
                 icon: Icons.trash
                 visible: downloadState != Constants.state.deleted
                 onClicked: py.call('main.delete_episode', [id]);
@@ -80,7 +80,7 @@ Item {
 
             IconMenuItem {
                 id: toggleNew
-                color: titleLabel.color
+                color: (episodeItem.isPlaying || isNew || progress > 0) ? titleLabel.color : Constants.colors.text
                 text: 'Toggle New'
                 icon: Icons.star
                 onClicked: Util.disableUntilReturn(toggleNew, py, 'main.toggle_new', [id]);
@@ -170,8 +170,8 @@ Item {
                     return Constants.colors.download;
                 } else if (episodeItem.opened) {
                     return Constants.colors.highlight;
-                } else if (isNew && downloadState != Constants.state.downloaded) {
+                } else if (isNew) {
-                    return Constants.colors.fresh;
+                    return Constants.colors.highlight;
                 } else {
                     return Constants.colors.text;
                 }

touch/EpisodesPage.qml

@@ -22,6 +22,7 @@ import QtQuick 2.0
 
 import 'common'
 import 'common/util.js' as Util
+import 'common/constants.js' as Constants
 import 'icons/icons.js' as Icons
 
 SlidePage {
@@ -41,6 +42,7 @@ SlidePage {
         PullMenuItem {
             text: 'Now Playing'
             icon: Icons.play
+            color: Constants.colors.playback
             onClicked: {
                 pgst.loadPage('PlayerPage.qml');
                 episodesPage.unPull();
@@ -50,6 +52,7 @@ SlidePage {
         PullMenuItem {
             text: 'Unsubscribe'
             icon: Icons.trash
+            color: Constants.colors.destructive
             onClicked: {
                 py.call('main.unsubscribe', [episodesPage.podcast_id]);
                 episodesPage.closePage();

touch/IconMenuItem.qml

@@ -28,6 +28,7 @@ ButtonArea {
     property alias text: label.text
     property color color: Constants.colors.secondaryHighlight
     property alias icon: icon.icon
+    property alias size: icon.size
     property bool alwaysShowText: false
 
     transparent: true

touch/PBusyIndicator.qml

@@ -21,6 +21,7 @@
 import QtQuick 2.0
 
 import 'icons/icons.js' as Icons
+import 'common/constants.js' as Constants
 
 Item {
     height: 64 * pgst.scalef
@@ -30,6 +31,7 @@ Item {
         anchors.centerIn: parent
         icon: Icons.aperture
         rotation: 180 * parent.phase
+        color: Constants.colors.highlight
     }
 
     property real phase: 0

touch/PIcon.qml

@@ -27,10 +27,10 @@ import 'icons/icons.js' as Icons
 PLabel {
     id: picon
 
-    property int size: 48 * pgst.scalef
+    property int size: 48
     property string icon
 
     text: icon
-    font.pixelSize: picon.size
+    font.pixelSize: picon.size * pgst.scalef
     font.family: Icons.font
 }

touch/PodcastsPage.qml

@@ -23,6 +23,7 @@ import QtQuick 2.0
 import 'common'
 import 'common/util.js' as Util
 import 'icons/icons.js' as Icons
+import 'common/constants.js' as Constants
 
 SlidePage {
     id: podcastsPage
@@ -31,6 +32,7 @@ SlidePage {
     PullMenu {
         PullMenuItem {
             text: 'Now Playing'
+            color: Constants.colors.playback
             icon: Icons.play
             onClicked: {
                 pgst.loadPage('PlayerPage.qml');
@@ -50,6 +52,7 @@ SlidePage {
         PullMenuItem {
             text: 'Subscribe'
             icon: Icons.plus
+            color: Constants.colors.download
             onClicked: {
                 pgst.loadPage('Subscribe.qml');
                 podcastsPage.unPull();

touch/PullMenuItem.qml

@@ -24,7 +24,7 @@ import 'common/constants.js' as Constants
 
 IconMenuItem {
     id: pullMenuItem
-    alwaysShowText: true
+    size: 80
 
     width: parent.width
     height: width

touch/SlidePage.qml

@@ -20,9 +20,11 @@
 
 import QtQuick 2.0
 
+import 'common/constants.js' as Constants
+
 Rectangle {
     id: page
-    color: 'white'
+    color: Constants.colors.page
 
     default property alias children: dragging.children
     property alias hasPull: dragging.hasPull
@@ -52,7 +54,7 @@ Rectangle {
     }
 
     Rectangle {
-        color: '#ffffff'
+        color: Constants.colors.page
         anchors.fill: parent
 
         opacity: page.pullPhase * 0.9

touch/StartPage.qml

@@ -21,6 +21,7 @@
 import QtQuick 2.0
 
 import 'icons/icons.js' as Icons
+import 'common/constants.js' as Constants
 
 SlidePage {
     id: startPage
@@ -102,6 +103,7 @@ SlidePage {
                     PIcon {
                         id: subscriptions
                         icon: Icons.plus
+                        color: Constants.colors.download
 
                         anchors {
                             bottom: parent.bottom
@@ -164,6 +166,7 @@ SlidePage {
                     PIcon {
                         id: refresher
                         icon: Icons.reload
+                        color: Constants.colors.highlight
 
                         anchors {
                             bottom: parent.bottom

touch/Subscribe.qml

@@ -20,10 +20,15 @@
 
 import QtQuick 2.0
 
+import 'common/constants.js' as Constants
+
 SlidePage {
     id: subscribe
 
-    SlidePageHeader { title: 'Add subscription' }
+    SlidePageHeader {
+        title: 'Add subscription'
+        color: Constants.colors.download
+    }
 
     Column {
         anchors.centerIn: parent

touch/gpodder.qml

@@ -19,8 +19,10 @@
 
 import QtQuick 2.0
 
+import 'common/constants.js' as Constants
+
 Rectangle {
-    color: 'white'
+    color: Constants.colors.page
 
     width: 480
     height: 800