zebra list

PostListItem.qml

@@ -1,58 +1,69 @@
 import QtQuick 2.0
 
-Item {
+Component {
-    property ListView listView
+    id: component
+    Item {
+        id: item
+        height: column.height + 20
+        width: parent.parent.parent.width
 
-    height: column.height + 10
+        Rectangle {
-    width: parent.parent.parent.width
+            property variant colors: ["#AAFFFFFF", "transparent"]
-
+            anchors.fill: parent
-    Rectangle {
+            color: {
-        anchors.fill: parent
+                if(item.ListView.isCurrentItem) return "transparent"
-        anchors.leftMargin: 10
+                return colors[index % 2]
-        anchors.rightMargin: 10
-        anchors.topMargin: 5
-        anchors.bottomMargin: 5
-        color: "transparent"
-
-        Column {
-            id: column
-            width: parent.width
-
-            Row {
-                spacing: 10
-                Text {
-                    text: feedTitle
-                    font.pointSize: 9
-                    color: "gray"
-                    wrapMode: Text.Wrap
-                }
-                Text {
-                    text: date.toLocaleString(null)
-                    font.pointSize: 9
-                    color: "gray"
-                    wrapMode: Text.Wrap
-                }
             }
-            Text {
+
-                text: title
+            Rectangle {
-                font.pointSize: 12
+                anchors.fill: parent
-                wrapMode: Text.Wrap
+                anchors.leftMargin: 15
-                width: parent.width
+                anchors.rightMargin: 15
-            }
+                anchors.topMargin: 10
-            Text {
+                anchors.bottomMargin: 10
-                text: excerpt
+                color: "transparent"
-                font.pointSize: 9
+
-                color: "gray"
+                Column {
-                wrapMode: Text.Wrap
+                    id: column
-                width: parent.width
+                    width: parent.width
+
+                    Row {
+                        spacing: 10
+                        Text {
+                            text: feedTitle
+                            font.pointSize: 12
+                            color: "gray"
+                            wrapMode: Text.Wrap
+                        }
+                        Text {
+                            text: date.toLocaleString(null)
+                            font.pointSize: 12
+                            color: "gray"
+                            wrapMode: Text.Wrap
+                        }
+                    }
+                    Text {
+                        text: title
+                        font.pointSize: 16
+                        wrapMode: Text.Wrap
+                        width: parent.width
+                    }
+                    Text {
+                        text: excerpt
+                        font.pointSize: 12
+                        color: "gray"
+                        wrapMode: Text.Wrap
+                        width: parent.width
+                    }
+                }
             }
         }
-    }
 
-    MouseArea {
+        MouseArea {
-        anchors.fill: parent
+            anchors.fill: parent
-        onClicked: {
+            onClicked: {
-            parent.parent.parent.currentIndex = index
+                parent.parent.parent.currentIndex = index
+            }
         }
     }
 }

Sidebar.qml

@@ -31,13 +31,17 @@ ScrollView {
         spacing: 1
         model: item.server.posts
 
-        delegate: Component {
+        delegate: PostListItem {}
-            PostListItem {}
-        }
 
-        highlight: Rectangle {
+        highlightFollowsCurrentItem: false
-            color: "lightblue"
+        highlight: Component {
-            opacity: 0.5
+            Rectangle {
+                width: listView.currentItem.width
+                height: listView.currentItem.height
+                color: "lightblue"
+                opacity: 0.5
+                y: listView.currentItem.y
+            }
         }
 
         onCurrentItemChanged: {

content.css

@@ -1,37 +1,43 @@
 body {
-        font-family: "Ubuntu", "Lucida Grande", "Tahoma", sans-serif;
+        font-family: sans-serif;
-        padding: 1em 2em 1em 2em;
+        padding: 1em 1.5em;
-        background: transpatent;
+        font-weight: lighter;
-}
+        background: #eee;
-body.darwin {
-        font-family: "LucidaGrande", sans-serif;
 }
+
 h1 {
-        font-weight: normal;
+        font-weight: lighter;
         margin: 0;
         padding: 0;
 }
-header {
+
-        margin-bottom: 1em;
+#date:not(:empty) {
-        border-bottom: 1px solid #aaa;
+    border-bottom: 1px solid #aaa;
-        padding-bottom: 1em;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+    display: block;
 }
+
 .starred:after {
         content: "*";
 }
+
 header p {
         color: #aaa;
         margin: 0;
         padding: 0
 }
+
 a {
-        color: #772953;
+        color: #333;
         text-decoration: none;
 }
+
 img {
         max-width: 100%;
         height: auto;
 }
+
 article {
         line-height: 1.6;
 }

main.qml

@@ -24,6 +24,7 @@ ApplicationWindow {
     SplitView {
         anchors.fill: parent
         orientation: Qt.Horizontal
+        visible: serverLogin.loggedIn()
 
         Sidebar {
             id: sidebar
@@ -41,7 +42,7 @@ ApplicationWindow {
     Login {
         id: login
         anchors.fill: parent
-        visible: true
+        visible: !serverLogin.loggedIn()
 
         function login() {
             serverLogin.login(serverUrl, userName, password)