3 files changed, 87 insertions, 15 deletions
diff --git a/sowatchui/qml/GroupHeader.qml b/sowatchui/qml/GroupHeader.qml
new file mode 100644
index 0000000..0350ee0
--- /dev/null
+++ b/sowatchui/qml/GroupHeader.qml
@@ -0,0 +1,26 @@
+import QtQuick 1.1
+import com.nokia.meego 1.1
+
+Item {
+	id: header
+	height: 40
+
+	property alias text: headerLabel.text
+
+	Text {
+		id: headerLabel
+		anchors.right: parent.right
+		anchors.bottom: parent.bottom
+		anchors.rightMargin: 8
+		anchors.bottomMargin: 2
+		font: UiConstants.GroupHeaderFont
+		color: theme.inverted ? "#4D4D4D" : "#3C3C3C";
+	}
+	Image {
+		anchors.right: headerLabel.left
+		anchors.left: parent.left
+		anchors.verticalCenter: headerLabel.verticalCenter
+		anchors.rightMargin: 24
+		source: "image://theme/meegotouch-groupheader" + (theme.inverted ? "-inverted" : "") + "-background"
+	}
+}
diff --git a/sowatchui/qml/MainPage.qml b/sowatchui/qml/MainPage.qml
index d722b3d..339b1a6 100644
--- a/sowatchui/qml/MainPage.qml
+++ b/sowatchui/qml/MainPage.qml
@@ -32,10 +32,9 @@ Page {
                 anchors.verticalCenter: parent.verticalCenter
             }
 
-			onClicked: {
-				var page = Qt.createComponent("WatchPage.qml");
-				pageStack.push(page);
-			}
+			onClicked: pageStack.push(Qt.resolvedUrl("WatchPage.qml"),
+									  {configKey: model.configKey,
+			                           configQmlUrl: model.configQmlUrl});
 		}
 	}
 	ScrollDecorator {
diff --git a/sowatchui/qml/WatchPage.qml b/sowatchui/qml/WatchPage.qml
index 8159834..83932eb 100644
--- a/sowatchui/qml/WatchPage.qml
+++ b/sowatchui/qml/WatchPage.qml
@@ -1,6 +1,7 @@
 import QtQuick 1.1
 import com.nokia.meego 1.1
 import com.nokia.extras 1.1
+import com.javispedro.sowatch 1.0
 
 Page {
 	id: watchPage
@@ -8,6 +9,9 @@ Page {
 	anchors.rightMargin: UiConstants.DefaultMargin
 	orientationLock: PageOrientation.LockPortrait
 
+	property string configKey;
+	property url configQmlUrl;
+
 	tools: ToolBarLayout {
 		ToolIcon {
 			platformIconId: "toolbar-back"
@@ -16,22 +20,65 @@ Page {
 		}
 	}
 
-	ListView {
-		id: emptyListView
+	GConfKey {
+		id: nameKey
+		key: configKey + "/name"
+	}
+
+	Flickable {
+		id: mainFlickable
 		anchors.fill: parent
-		model: ListModel {
+		contentHeight: mainColumn.height
 
-		}
+		Column {
+			id: mainColumn
+			width: parent.width
+
+			Item {
+				id: enableItem
+				width: parent.width
+				height: UiConstants.ListItemHeightDefault
+
+				Label {
+					text: qsTr("Enabled")
+					font: UiConstants.TitleFont
+					anchors.verticalCenter: parent.verticalCenter
+					anchors.left: parent.left
+				}
+				Switch {
+					anchors.verticalCenter: parent.verticalCenter
+					anchors.right: parent.right
+					checked: true
+				}
+			}
+
+			GroupHeader {
+				width: parent.width
+				text: "Watch settings"
+				visible: configQmlLoader.status === Loader.Ready
+			}
+
+			Loader {
+				id: configQmlLoader
+				source: configQmlUrl
+				width: parent.width
+				onLoaded: item.configKey = configKey;
+			}
+
+			GroupHeader {
+				width: parent.width
+				text: "Watchlets"
+				visible: configQmlLoader.status === Loader.Ready
+			}
 
-		delegate: ListDelegate {
-			Image {
-                source: "image://theme/icon-m-common-drilldown-arrow" + (theme.inverted ? "-inverse" : "")
-                anchors.right: parent.right;
-                anchors.verticalCenter: parent.verticalCenter
-            }
+			GroupHeader {
+				width: parent.width
+				text: "Notification sources"
+				visible: configQmlLoader.status === Loader.Ready
+			}
 		}
 	}
 	ScrollDecorator {
-		flickableItem: watchesListView
+		flickableItem: mainFlickable
 	}
 }