Make it possible to show the CategoryDisplay for compact form factors

2 files changed, 125 insertions, 72 deletions

diff --git a/discover/qml/CategoryDisplay.qml b/discover/qml/CategoryDisplay.qml
index aa679a1..d048c50 100644
--- a/discover/qml/CategoryDisplay.qml
+++ b/discover/qml/CategoryDisplay.qml
@@ -22,72 +22,136 @@ 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
 
-RowLayout
+ConditionalLoader
 {
     id: page
-    property alias category: view.category
-    readonly property bool extended: !app.isCompact && view.count>5
+    property QtObject category: null
 
-    spacing: 3
+    CategoryModel {
+        id: categoryModel
+        displayedCategory: page.category
+    }
+
+    condition: !app.isCompact
+    componentTrue: RowLayout {
+            id: gridRow
+            readonly property bool extended: !app.isCompact && view.count>5
+            spacing: 3
 
-    ApplicationsTop {
-        id: top
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-        sortRole: "sortableRating"
-        filteredCategory: page.category
-        title: i18n("Popularity")
-        extended: page.extended
-        roleDelegate: Item {
-            width: bg.width
-            property variant model
-            LabelBackground {
-                id: bg
-                anchors.centerIn: parent
-                text: model.sortableRating.toFixed(2)
+            ApplicationsTop {
+                id: top
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                sortRole: "sortableRating"
+                filteredCategory: categoryModel.displayedCategory
+                title: i18n("Popularity")
+                extended: gridRow.extended
+                roleDelegate: Item {
+                    width: bg.width
+                    property variant model
+                    LabelBackground {
+                        id: bg
+                        anchors.centerIn: parent
+                        text: model.sortableRating.toFixed(2)
+                    }
+                }
+            }
+            ApplicationsTop {
+                id: top2
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                sortRole: "ratingPoints"
+                filteredCategory: categoryModel.displayedCategory
+                title: i18n("Rating")
+                extended: gridRow.extended
+                roleDelegate: Rating {
+                    property variant model
+                    rating: model.rating
+                    height: 12
+                }
             }
-        }
-    }
-    ApplicationsTop {
-        id: top2
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-        visible: !app.isCompact
-        sortRole: "ratingPoints"
-        filteredCategory: page.category
-        title: i18n("Rating")
-        extended: page.extended
-        roleDelegate: Rating {
-            property variant model
-            rating: model.rating
-            height: 12
-        }
-    }
 
-    Item {
-        width: 4
-    }
+            Item {
+                width: 4
+            }
 
-    ColumnLayout {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        Layout.preferredWidth: page.width/2
-        Layout.maximumHeight: top.height
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.preferredWidth: page.width/2
+                Layout.maximumHeight: top.height
 
-        spacing: -2
+                spacing: -2
 
-        Label {
-            text: i18n("Categories")
-            Layout.fillWidth: true
-            font.weight: Font.Bold
-            Layout.minimumHeight: paintedHeight*1.5
-        }
+                Label {
+                    text: i18n("Categories")
+                    Layout.fillWidth: true
+                    font.weight: Font.Bold
+                    Layout.minimumHeight: paintedHeight*1.5
+                }
 
-        CategoryView {
-            id: view
-            Layout.fillWidth: true
-            Layout.fillHeight: true
+                CategoryView {
+                    id: view
+                    model: categoryModel
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+            }
         }
+
+    componentFalse: ColumnLayout {
+            Layout.minimumHeight: 5000
+
+            ApplicationsTop {
+                id: top
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                sortRole: "sortableRating"
+                filteredCategory: categoryModel.displayedCategory
+                title: i18n("Popularity")
+                roleDelegate: Item {
+                    width: bg.width
+                    property variant model
+                    LabelBackground {
+                        id: bg
+                        anchors.centerIn: parent
+                        text: model.sortableRating.toFixed(2)
+                    }
+                }
+            }
+            Label {
+                text: i18n("Categories")
+                Layout.fillWidth: true
+                font.weight: Font.Bold
+                Layout.minimumHeight: paintedHeight*1.5
+            }
+
+            Repeater {
+                id: view
+                Layout.fillWidth: true
+                model: categoryModel
+
+                delegate: GridItem {
+                    height: 40
+                    Layout.fillWidth: true
+                    RowLayout {
+                        QIconItem {
+                            icon: decoration
+                            width: 32
+                            height: width
+                        }
+                        Label {
+                            text: display
+                            Layout.fillWidth: true
+                            wrapMode: Text.WordWrap
+
+                            maximumLineCount: 2
+                        }
+                    }
+                    onClicked: Navigation.openCategory(category)
+                }
+            }
     }
 }
diff --git a/discover/qml/CategoryView.qml b/discover/qml/CategoryView.qml
index f172697..d15c32a 100644
--- a/discover/qml/CategoryView.qml
+++ b/discover/qml/CategoryView.qml
@@ -26,7 +26,7 @@ import "navigation.js" as Navigation
 
 GridItem
 {
-    property alias category: categoryModel.displayedCategory
+    property alias model: grid.model
     readonly property alias count: grid.count
     hoverEnabled: false
 
@@ -43,32 +43,22 @@ GridItem
             cellHeight: app.isCompact ? 35 : 60
             boundsBehavior: Flickable.StopAtBounds
 
-            model: CategoryModel {
-                id: categoryModel
-                displayedCategory: null
-            }
-
             delegate: MouseArea {
                 id: categoryItem
-                property bool horizontal: app.isCompact
                 enabled: true
 
                 width: grid.cellWidth
                 height: grid.cellHeight-2
 
-                GridLayout {
+                ColumnLayout {
                     id: layout
-                    rows: categoryItem.horizontal ? 1 : 2
-                    columns: categoryItem.horizontal ? 2 : 1
 
                     anchors.top: parent.top
                     width: parent.width
-                    columnSpacing: 10
-                    rowSpacing: 5
+                    spacing: 5
                     Item {
-                        Layout.fillWidth: !categoryItem.horizontal
-                        Layout.fillHeight: categoryItem.horizontal
-                        Layout.preferredWidth: categoryItem.horizontal ? nameLabel.paintedHeight*2 : 32
+                        Layout.fillWidth: true
+                        Layout.preferredWidth: 32
                         Layout.preferredHeight: Layout.preferredWidth
 
                         QIconItem {
@@ -82,11 +72,10 @@ GridItem
                         id: nameLabel
                         text: display
                         Layout.fillWidth: true
-                        horizontalAlignment: !categoryItem.horizontal ? Text.AlignHCenter : Text.AlignLeft
+                        horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
                         wrapMode: Text.WordWrap
 
-                        renderType: Text.QtRendering
                         maximumLineCount: 2
                     }
                 }