Improve the initial page

Fix a rendering glitch in the category delegate where the icon and text
looked glitchy.
Align the titles to the left.
Introduce the scrollbar in the categories view.
Adopt some suggestions from the VDG forum.

3 files changed, 49 insertions, 31 deletions

diff --git a/discover/qml/ApplicationsTop.qml b/discover/qml/ApplicationsTop.qml
index 7c63681..5af6446 100644
--- a/discover/qml/ApplicationsTop.qml
+++ b/discover/qml/ApplicationsTop.qml
@@ -40,7 +40,6 @@ ColumnLayout {
         id: title
         text: topView.title
         Layout.fillWidth: true
-        horizontalAlignment: Text.AlignHCenter
         font.weight: Font.Bold
         Layout.minimumHeight: paintedHeight*1.5
     }
diff --git a/discover/qml/CategoryDelegate.qml b/discover/qml/CategoryDelegate.qml
index 6270593..6eca321 100644
--- a/discover/qml/CategoryDelegate.qml
+++ b/discover/qml/CategoryDelegate.qml
@@ -41,11 +41,12 @@ MouseArea {
         Item {
             Layout.fillWidth: !categoryItem.horizontal
             Layout.fillHeight: categoryItem.horizontal
-            Layout.preferredWidth: categoryItem.horizontal ? nameLabel.paintedHeight*2 : 40
+            Layout.preferredWidth: categoryItem.horizontal ? nameLabel.paintedHeight*2 : 32
             Layout.preferredHeight: Layout.preferredWidth
+
             QIconItem {
                 icon: decoration
-                width: Math.min(parent.width, parent.height)
+                width: 32
                 height: width
                 anchors.centerIn: parent
             }
@@ -54,9 +55,12 @@ MouseArea {
             id: nameLabel
             text: display
             Layout.fillWidth: true
-            horizontalAlignment: Text.AlignHCenter
+            horizontalAlignment: !categoryItem.horizontal ? Text.AlignHCenter : Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             wrapMode: Text.WordWrap
+
+            renderType: Text.QtRendering
+            maximumLineCount: 2
         }
     }
     onClicked: Navigation.openCategory(category)
diff --git a/discover/qml/CategoryDisplay.qml b/discover/qml/CategoryDisplay.qml
index 77ca95a..3becdb8 100644
--- a/discover/qml/CategoryDisplay.qml
+++ b/discover/qml/CategoryDisplay.qml
@@ -29,7 +29,7 @@ RowLayout
     property alias category: categoryModel.displayedCategory
     readonly property bool extended: !app.isCompact && grid.count>5
 
-    spacing: 7
+    spacing: 3
 
     ApplicationsTop {
         id: top
@@ -65,36 +65,51 @@ RowLayout
         }
     }
 
-    GridItem {
+    Item {
+        width: 4
+    }
+
+    ColumnLayout {
         Layout.fillWidth: true
-        clip: true
-        anchors {
-            top: parent.top
-            topMargin: top.titleHeight-2
-            bottom: top.bottom
-            bottomMargin: -1
-        }
+        Layout.fillHeight: true
         Layout.preferredWidth: page.width/2
-        hoverEnabled: false
-        GridView {
-            id: grid
-            anchors {
-                fill: parent
-                margins: 5
-            }
-            cellWidth: app.isCompact ? width : width/Math.floor(width/100)
-            cellHeight: app.isCompact ? 30 : 60
-            boundsBehavior: Flickable.StopAtBounds
+        Layout.maximumHeight: top.height
 
-            model: CategoryModel {
-                id: categoryModel
-                displayedCategory: null
-            }
+        spacing: -2
+
+        Label {
+            text: i18n("Categories")
+            Layout.fillWidth: true
+            font.weight: Font.Bold
+            Layout.minimumHeight: paintedHeight*1.5
+        }
+
+        GridItem {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            hoverEnabled: false
+
+            ScrollView {
+                anchors.fill: parent
+
+                GridView {
+                    id: grid
+
+                    cellWidth: app.isCompact ? width : width/Math.floor(width/100)
+                    cellHeight: app.isCompact ? 35 : 60
+                    boundsBehavior: Flickable.StopAtBounds
+
+                    model: CategoryModel {
+                        id: categoryModel
+                        displayedCategory: null
+                    }
 
-            delegate: CategoryDelegate {
-                horizontal: app.isCompact
-                width: grid.cellWidth
-                height: grid.cellHeight
+                    delegate: CategoryDelegate {
+                        horizontal: app.isCompact
+                        width: grid.cellWidth
+                        height: grid.cellHeight-2
+                    }
+                }
             }
         }
     }