Adopt the VDG mockups for the old CategoryPage

Now it's been split into the BrowsingPage and the CategoryPage as they look
different.

12 files changed, 225 insertions, 128 deletions

diff --git a/discover/qml/ApplicationsListPage.qml b/discover/qml/ApplicationsListPage.qml
index 6dfaedd..e6a9212 100644
--- a/discover/qml/ApplicationsListPage.qml
+++ b/discover/qml/ApplicationsListPage.qml
@@ -169,11 +169,11 @@ Item {
     
     Component {
         id: categoryHeaderComponent
-        CategoryHeader {
+        CategoryDisplay {
             id: categoryHeader
             category: page.category
-            height: 100
             width: app.actualWidth
+            height: implicitHeight
             x: viewLoader.sourceComponent == listComponent ? page.proposedMargin : 0
         }
     }
diff --git a/discover/qml/ApplicationsTop.qml b/discover/qml/ApplicationsTop.qml
index cef0e3f..765c596 100644
--- a/discover/qml/ApplicationsTop.qml
+++ b/discover/qml/ApplicationsTop.qml
@@ -31,9 +31,11 @@ Column {
     property alias filteredCategory: appsModel.filteredCategory
     property Component roleDelegate: null
     property string title: ""
+    readonly property var delegateHeight: title.paintedHeight*2.5
 
-    Layout.preferredHeight: childrenRect.height
+    Layout.preferredHeight: (rep.count*(topView.spacing+topView.delegateHeight) + title.paintedHeight)
     Layout.preferredWidth: 250
+
     Label {
         id: title
         text: topView.title
@@ -44,6 +46,7 @@ Column {
     }
     spacing: 5
     Repeater {
+        id: rep
         model: PaginateModel {
             pageSize: 5
             sourceModel: ApplicationProxyModel {
@@ -54,7 +57,7 @@ Column {
         }
         delegate: GridItem {
                     width: topView.width
-                    height: title.paintedHeight*2.5
+                    height: topView.delegateHeight
 
                     RowLayout {
                         anchors.fill: parent
diff --git a/discover/qml/AwesomeGrid.qml b/discover/qml/AwesomeGrid.qml
index aae2c88..17f0b9d 100644
--- a/discover/qml/AwesomeGrid.qml
+++ b/discover/qml/AwesomeGrid.qml
@@ -28,6 +28,7 @@ Flickable {
     property alias footer: footerLoader.sourceComponent
     property alias delegate: dataRepeater.delegate
     property alias model: dataRepeater.model
+    property alias count: dataRepeater.count
     contentHeight: conts.height
     
     Column {
diff --git a/discover/qml/BrowsingPage.qml b/discover/qml/BrowsingPage.qml
index 85eb351..a6c1bfa 100644
--- a/discover/qml/BrowsingPage.qml
+++ b/discover/qml/BrowsingPage.qml
@@ -1,5 +1,5 @@
 /*
- *   Copyright (C) 2012 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
+ *   Copyright (C) 2015 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU Library/Lesser General Public License
@@ -17,5 +17,32 @@
  *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-CategoryPage
-{}
+import QtQuick 2.1
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+import org.kde.muon 1.0
+import org.kde.kquickcontrolsaddons 2.0
+
+Item {
+    readonly property string title: ""
+    readonly property string icon: "go-home"
+    ColumnLayout
+    {
+        width: app.actualWidth
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        FeaturedBanner {
+            Layout.fillWidth: true
+            height: 310
+        }
+
+        CategoryDisplay {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+    }
+}
diff --git a/discover/qml/CategoryDelegate.qml b/discover/qml/CategoryDelegate.qml
new file mode 100644
index 0000000..6687592
--- /dev/null
+++ b/discover/qml/CategoryDelegate.qml
@@ -0,0 +1,64 @@
+/*
+ *   Copyright (C) 2012 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library/Lesser General Public License
+ *   version 2, or (at your option) any later version, as published by the
+ *   Free Software Foundation
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library/Lesser General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.1
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+import org.kde.muon 1.0
+import org.kde.kquickcontrolsaddons 2.0
+import "navigation.js" as Navigation
+
+GridItem {
+    id: categoryItem
+    property bool horizontal: false
+    height: horizontal ? nameLabel.paintedHeight*2.5 : layout.height+10
+    enabled: true
+
+    GridLayout {
+        id: layout
+        rows: categoryItem.horizontal ? 1 : 2
+        columns: categoryItem.horizontal ? 2 : 1
+
+        anchors.centerIn: parent
+        width: parent.width
+        columnSpacing: 10
+        rowSpacing: 5
+        Item {
+            Layout.fillWidth: !categoryItem.horizontal
+            Layout.fillHeight: categoryItem.horizontal
+            Layout.preferredWidth: categoryItem.horizontal ? nameLabel.paintedHeight*2 : 40
+            Layout.preferredHeight: Layout.preferredWidth
+            QIconItem {
+                icon: decoration
+                width: Math.min(parent.width, parent.height)
+                height: width
+                anchors.centerIn: parent
+            }
+        }
+        Label {
+            id: nameLabel
+            text: display
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.WordWrap
+        }
+    }
+    onClicked: Navigation.openCategory(category)
+}
diff --git a/discover/qml/CategoryHeader.qml b/discover/qml/CategoryDisplay.qml
index bcaaaae..ac31fbb 100644
--- a/discover/qml/CategoryHeader.qml
+++ b/discover/qml/CategoryDisplay.qml
@@ -1,5 +1,5 @@
 /*
- *   Copyright (C) 2012 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
+ *   Copyright (C) 2015 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU Library/Lesser General Public License
@@ -19,34 +19,45 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+import org.kde.muon 1.0
 import org.kde.kquickcontrolsaddons 2.0
 
-Item {
-    property QtObject category: null
-    
-    QIconItem {
-        id: iconItem
-        icon: category.icon
+Item
+{
+    clip: true
+    implicitHeight: categories.height
+
+    property alias category: categoryModel.displayedCategory
+    CategoryTop {
+        id: categories
+        category: parent.category
         anchors {
             top: parent.top
+            right: parent.horizontalCenter
             bottom: parent.bottom
             left: parent.left
-            margins: 15
+            rightMargin: 5
         }
-        width: height
     }
-    
-    Label {
+
+    GridView {
+        id: grid
         anchors {
-            verticalCenter: parent.verticalCenter
-            left: iconItem.right
+            top: parent.top
+            left: parent.horizontalCenter
+            bottom: parent.bottom
             right: parent.right
-            leftMargin: 50
         }
-        elide: Text.ElideRight
-        verticalAlignment: Text.AlignVCenter
-        fontSizeMode: Text.Fit
-        font.pointSize: parent.height
-        text: category.name
+
+        model: CategoryModel {
+            id: categoryModel
+            displayedCategory: null
+        }
+
+        delegate: CategoryDelegate {
+            horizontal: app.isCompact
+            width: grid.cellWidth
+        }
     }
 }
diff --git a/discover/qml/CategoryPage.qml b/discover/qml/CategoryPage.qml
index 67f5b03..ea8da1d 100644
--- a/discover/qml/CategoryPage.qml
+++ b/discover/qml/CategoryPage.qml
@@ -22,15 +22,14 @@ import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 import org.kde.muon 1.0
 import org.kde.kquickcontrolsaddons 2.0
-import QtQuick.Window 2.2
 import "navigation.js" as Navigation
 
 Item {
     id: page
     property QtObject category
-    property alias categories: categoryModel
-    property var icon: category ? category.icon : "go-home"
-    property string title: category ? category.name : ""
+    readonly property alias categories: categoryModel
+    readonly property var icon: category.icon
+    readonly property string title: category.name
     
     function searchFor(text) {
         if(text == "")
@@ -41,104 +40,15 @@ Item {
             Navigation.openApplicationList("edit-find", i18n("Search..."), category, text)
     }
 
-    Component {
-        id: categoryDelegate
-        GridItem {
-            id: categoryItem
-            property bool horizontal: flick.columnCount==1
-            width: flick.cellWidth
-            height: horizontal ? nameLabel.paintedHeight*2.5 : layout.height+10
-            enabled: true
+    ApplicationList {
 
-            GridLayout {
-                id: layout
-                rows: categoryItem.horizontal ? 1 : 2
-                columns: categoryItem.horizontal ? 2 : 1
-
-                anchors.centerIn: parent
-                width: parent.width
-                columnSpacing: 10
-                rowSpacing: 5
-                Item {
-                    Layout.fillWidth: !categoryItem.horizontal
-                    Layout.fillHeight: categoryItem.horizontal
-                    Layout.preferredWidth: categoryItem.horizontal ? nameLabel.paintedHeight*2 : 40
-                    Layout.preferredHeight: Layout.preferredWidth
-                    QIconItem {
-                        icon: decoration
-                        width: Math.min(parent.width, parent.height)
-                        height: width
-                        anchors.centerIn: parent
-                    }
-                }
-                Label {
-                    id: nameLabel
-                    text: display
-                    Layout.fillWidth: true
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    wrapMode: Text.WordWrap
-                }
-            }
-            onClicked: Navigation.openCategory(category)
-        }
     }
-    
-    Component {
-        id: categoryHeader
-        CategoryHeader {
+
+    ColumnLayout {
+        CategoryDisplay {
             category: page.category
             height: 128
         }
-    }
-    
-    Component {
-        id: featured
-        FeaturedBanner {
-            height: 310
-            clip: true
-        }
-    }
-    ScrolledAwesomeGrid {
-        id: flick
-        anchors.fill: parent
-
-        model: CategoryModel {
-            id: categoryModel
-            displayedCategory: page.category
-        }
-        delegate: categoryDelegate
-        header: category==null ? featured : categoryHeader
-        footer: RowLayout {
-                    height: top.Layout.preferredHeight+5
-                    width: parent.width
-                    ApplicationsTop {
-                        id: top
-                        Layout.fillHeight: true
-                        Layout.fillWidth: true
-                        sortRole: "sortableRating"
-                        filteredCategory: page.category
-                        title: i18n("Popularity")
-                        roleDelegate: Label {
-                            property variant model
-                            text: i18n("points: %1", model.sortableRating.toFixed(2))
-                            verticalAlignment: Text.AlignVCenter
-                        }
-                    }
-                    ApplicationsTop {
-                        id: top2
-                        Layout.fillHeight: true
-                        Layout.fillWidth: true
-                        visible: !app.isCompact
-                        sortRole: "ratingPoints"
-                        filteredCategory: page.category
-                        title: i18n("Rating")
-                        roleDelegate: Rating {
-                            property variant model
-                            rating: model.rating
-                            height: 12
-                        }
-                    }
-                }
+        CategoryDisplay {}
     }
 }
diff --git a/discover/qml/CategoryTop.qml b/discover/qml/CategoryTop.qml
new file mode 100644
index 0000000..2bfa12d
--- /dev/null
+++ b/discover/qml/CategoryTop.qml
@@ -0,0 +1,57 @@
+/*
+ *   Copyright (C) 2015 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library/Lesser General Public License
+ *   version 2, or (at your option) any later version, as published by the
+ *   Free Software Foundation
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library/Lesser General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.1
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+
+RowLayout {
+    id: page
+    property QtObject category: null
+    implicitHeight: top.Layout.preferredHeight+5
+    height: top.Layout.preferredHeight+5
+
+    ApplicationsTop {
+        id: top
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        sortRole: "sortableRating"
+        filteredCategory: page.category
+        title: i18n("Popularity")
+        roleDelegate: Label {
+            property variant model
+            text: i18n("points: %1", model.sortableRating.toFixed(2))
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+    ApplicationsTop {
+        id: top2
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        visible: !app.isCompact
+        sortRole: "ratingPoints"
+        filteredCategory: page.category
+        title: i18n("Rating")
+        roleDelegate: Rating {
+            property variant model
+            rating: model.rating
+            height: 12
+        }
+    }
+}
diff --git a/discover/qml/FeaturedBanner.qml b/discover/qml/FeaturedBanner.qml
index 88c5c94..90f261a 100644
--- a/discover/qml/FeaturedBanner.qml
+++ b/discover/qml/FeaturedBanner.qml
@@ -1,3 +1,22 @@
+/*
+ *   Copyright (C) 2012 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library/Lesser General Public License
+ *   version 2, or (at your option) any later version, as published by the
+ *   Free Software Foundation
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library/Lesser General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
 import QtQuick 2.1
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
@@ -6,12 +25,13 @@ import "navigation.js" as Navigation
 
 Information {
     id: info
+
     model: FeaturedModel {}
     
     delegate: MouseArea {
             property QtObject modelData: model
             enabled: modelData.package!=""
-            width: Math.min(flick.width, parent.width)
+            width: Math.min(flick.width, info.width)
             height: parent.height
             
             onClicked: {
diff --git a/discover/qml/FeaturedModel.qml b/discover/qml/FeaturedModel.qml
index c165009..c745ba2 100644
--- a/discover/qml/FeaturedModel.qml
+++ b/discover/qml/FeaturedModel.qml
@@ -22,7 +22,11 @@ ListModel
         xhr.open("GET", source);
         xhr.onreadystatechange = function() {
             if (xhr.readyState == XMLHttpRequest.DONE) {
-                getFeatured(JSON.parse(xhr.responseText))
+                try {
+                    getFeatured(JSON.parse(xhr.responseText))
+                } catch (e) {
+                    console.log("json error", e, xhr.responseText)
+                }
             }
         }
         xhr.send();
diff --git a/discover/qml/Main.qml b/discover/qml/Main.qml
index 12bad4e..9ca5e44 100644
--- a/discover/qml/Main.qml
+++ b/discover/qml/Main.qml
@@ -31,7 +31,7 @@ Rectangle
     id: window
     property Component applicationListComp: Qt.createComponent("qrc:/qml/ApplicationsListPage.qml")
     property Component applicationComp: Qt.createComponent("qrc:/qml/ApplicationPage.qml")
-    property Component categoryComp: Qt.createComponent("qrc:/qml/CategoryPage.qml")
+    property Component categoryComp: Qt.createComponent("qrc:/qml/ApplicationsListPage.qml")
     property Component reviewsComp: Qt.createComponent("qrc:/qml/ReviewsPage.qml")
 
     //toplevels
diff --git a/discover/qml/ScrolledAwesomeGrid.qml b/discover/qml/ScrolledAwesomeGrid.qml
index 38db933..0507e77 100644
--- a/discover/qml/ScrolledAwesomeGrid.qml
+++ b/discover/qml/ScrolledAwesomeGrid.qml
@@ -21,6 +21,7 @@ import QtQuick 2.1
 import QtQuick.Controls 1.1
 
 ScrollView {
+    property alias count: gridRepeater.count
     property alias header: gridRepeater.header
     property alias footer: gridRepeater.footer
     property alias delegate: gridRepeater.delegate
@@ -31,6 +32,5 @@ ScrollView {
     
     AwesomeGrid {
         id: gridRepeater
-        header: parentItem.header
     }
 }