Improve the CategoryDisplay look, better match vdg mockups

5 files changed, 70 insertions, 90 deletions

diff --git a/discover/qml/ApplicationsTop.qml b/discover/qml/ApplicationsTop.qml
index a30dea0..d8eca3d 100644
--- a/discover/qml/ApplicationsTop.qml
+++ b/discover/qml/ApplicationsTop.qml
@@ -25,25 +25,24 @@ import org.kde.muon.discover 1.0
 import org.kde.kquickcontrolsaddons 2.0
 import "navigation.js" as Navigation
 
-Column {
+ColumnLayout {
     id: topView
     property alias sortRole: appsModel.stringSortRole
     property alias filteredCategory: appsModel.filteredCategory
     property Component roleDelegate: null
     property string title: ""
-    readonly property var delegateHeight: title.paintedHeight*2.5
+    property bool extended: false
     readonly property alias titleHeight: title.height
 
-    Layout.preferredHeight: (rep.count*(topView.spacing+topView.delegateHeight) + title.paintedHeight)
     Layout.preferredWidth: 250
 
     Label {
         id: title
         text: topView.title
-        width: parent.width
+        Layout.fillWidth: true
         horizontalAlignment: Text.AlignHCenter
         font.weight: Font.Bold
-        height: paintedHeight*1.5
+        Layout.minimumHeight: paintedHeight*1.5
     }
     spacing: -2 //GridItem.border.width
     Repeater {
@@ -57,21 +56,34 @@ Column {
             }
         }
         delegate: GridItem {
-                    width: topView.width
-                    height: topView.delegateHeight
+                    Layout.fillWidth: true
+                    Layout.minimumHeight: title.paintedHeight*(topView.extended ? 3.5 : 2.5)
 
                     RowLayout {
+                        id: layo
                         anchors.fill: parent
                         QIconItem {
                             Layout.fillHeight: true
                             Layout.minimumWidth: height
                             icon: model.icon
                         }
-                        Label {
+                        ColumnLayout {
                             Layout.fillHeight: true
-                            text: name
-                            elide: Text.ElideRight
-                            verticalAlignment: Text.AlignVCenter
+                            Label {
+                                id: nameItem
+                                Layout.fillHeight: true
+                                text: name
+                                elide: Text.ElideRight
+                                verticalAlignment: Text.AlignVCenter
+                            }
+                            Label {
+                                Layout.preferredWidth: nameItem.Layout.preferredWidth
+                                visible: topView.extended
+                                text: category
+                                elide: Text.ElideRight
+                                verticalAlignment: Text.AlignVCenter
+                                opacity: 0.6
+                            }
                         }
                         Item {
                             Layout.fillWidth: true
diff --git a/discover/qml/CategoryDelegate.qml b/discover/qml/CategoryDelegate.qml
index 2e8a252..6270593 100644
--- a/discover/qml/CategoryDelegate.qml
+++ b/discover/qml/CategoryDelegate.qml
@@ -27,7 +27,6 @@ import "navigation.js" as Navigation
 MouseArea {
     id: categoryItem
     property bool horizontal: false
-    height: horizontal ? nameLabel.paintedHeight*2.5 : layout.height+10
     enabled: true
 
     GridLayout {
diff --git a/discover/qml/CategoryDisplay.qml b/discover/qml/CategoryDisplay.qml
index ad3b0be..d158ae9 100644
--- a/discover/qml/CategoryDisplay.qml
+++ b/discover/qml/CategoryDisplay.qml
@@ -1,5 +1,5 @@
 /*
- *   Copyright (C) 2015 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
+ *   Copyright (C) 2012-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
@@ -23,38 +23,65 @@ import QtQuick.Layouts 1.1
 import org.kde.muon 1.0
 import org.kde.kquickcontrolsaddons 2.0
 
-Item
+RowLayout
 {
-    implicitHeight: categories.height
-
+    id: page
     property alias category: categoryModel.displayedCategory
-    CategoryTop {
-        id: categories
-        category: parent.category
-        anchors {
-            top: parent.top
-            right: parent.horizontalCenter
-            bottom: parent.bottom
-            left: parent.left
-            rightMargin: 5
+    readonly property bool extended: !app.isCompact && grid.count>5
+
+    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: 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
         }
     }
 
     GridItem {
+        Layout.fillWidth: true
         clip: true
         anchors {
             top: parent.top
-            left: parent.horizontalCenter
-            bottom: parent.bottom
-            right: parent.right
-            topMargin: categories.titleHeight-2
+            topMargin: top.titleHeight-2
+            bottom: top.bottom
         }
+        Layout.preferredWidth: page.width/2
         hoverEnabled: false
         GridView {
             id: grid
-            anchors.fill: parent
-            cellWidth: app.isCompact ? width : 100
+            anchors {
+                fill: parent
+                margins: 5
+            }
+            cellWidth: app.isCompact ? width : width/Math.floor(width/100)
             cellHeight: app.isCompact ? 30 : 60
+            boundsBehavior: Flickable.StopAtBounds
 
             model: CategoryModel {
                 id: categoryModel
@@ -64,6 +91,7 @@ Item
             delegate: CategoryDelegate {
                 horizontal: app.isCompact
                 width: grid.cellWidth
+                height: grid.cellHeight
             }
         }
     }
diff --git a/discover/qml/CategoryTop.qml b/discover/qml/CategoryTop.qml
deleted file mode 100644
index 468f91c..0000000
--- a/discover/qml/CategoryTop.qml
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- *   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
-    readonly property alias titleHeight: top.titleHeight
-    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/resources.qrc b/discover/resources.qrc
index 9184cee..1de5ffb 100644
--- a/discover/resources.qrc
+++ b/discover/resources.qrc
@@ -4,7 +4,6 @@
     <file>qml/TopLevelPageData.qml</file>
     <file>qml/CategoryPage.qml</file>
     <file>qml/CategoryDelegate.qml</file>
-    <file>qml/CategoryTop.qml</file>
     <file>qml/CategoryDisplay.qml</file>
     <file>qml/ApplicationsTop.qml</file>
     <file>qml/FeaturedBanner.qml</file>