Improve CategoryDisplay

Make it possible to change the sizes from outside
Leave the same spacing between all items

3 files changed, 9 insertions, 7 deletions

diff --git a/discover/qml/ApplicationsListPage.qml b/discover/qml/ApplicationsListPage.qml
index 37a7bf2..f5ae915 100644
--- a/discover/qml/ApplicationsListPage.qml
+++ b/discover/qml/ApplicationsListPage.qml
@@ -170,6 +170,8 @@ Item {
             category: page.category
             width: app.actualWidth
             height: implicitHeight
+            spacing: 10
+            maxtopwidth: viewLoader.sourceComponent == listComponent ? 100 : viewLoader.item.cellWidth
             x: viewLoader.sourceComponent == listComponent ? page.proposedMargin : 0
         }
     }
diff --git a/discover/qml/ApplicationsTop.qml b/discover/qml/ApplicationsTop.qml
index a45ec03..614c1d2 100644
--- a/discover/qml/ApplicationsTop.qml
+++ b/discover/qml/ApplicationsTop.qml
@@ -34,8 +34,6 @@ ColumnLayout {
     property bool extended: false
     readonly property alias titleHeight: title.height
 
-    Layout.preferredWidth: 250
-
     Label {
         id: title
         text: topView.title
diff --git a/discover/qml/CategoryDisplay.qml b/discover/qml/CategoryDisplay.qml
index e4b91c6..cbdf052 100644
--- a/discover/qml/CategoryDisplay.qml
+++ b/discover/qml/CategoryDisplay.qml
@@ -28,6 +28,8 @@ ConditionalLoader
 {
     id: page
     property QtObject category: null
+    property real spacing: 3
+    property real maxtopwidth: 250
 
     CategoryModel {
         id: categoryModel
@@ -38,7 +40,7 @@ ConditionalLoader
     componentTrue: RowLayout {
             id: gridRow
             readonly property bool extended: !app.isCompact && view.count>5
-            spacing: 3
+            spacing: page.spacing
 
             ApplicationsTop {
                 id: top
@@ -57,9 +59,11 @@ ConditionalLoader
                         text: model.sortableRating.toFixed(2)
                     }
                 }
+                Layout.preferredWidth: page.maxtopwidth
             }
             ApplicationsTop {
                 id: top2
+                Layout.preferredWidth: page.maxtopwidth
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 sortRole: "ratingPoints"
@@ -73,10 +77,6 @@ ConditionalLoader
                 }
             }
 
-            Item {
-                width: 4
-            }
-
             ColumnLayout {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
@@ -90,10 +90,12 @@ ConditionalLoader
                     Layout.fillWidth: true
                     font.weight: Font.Bold
                     Layout.minimumHeight: paintedHeight*1.5
+                    visible: view.count>0
                 }
 
                 CategoryView {
                     id: view
+                    visible: view.count>0
                     model: categoryModel
                     Layout.fillWidth: true
                     Layout.fillHeight: true