Port CategoryItem to use Kirigami's new leading/trailing properties on the BasicListItem

sidebar/package/contents/ui/CategoriesPage.qml

@@ -134,7 +134,7 @@ Kirigami.ScrollablePage {
             }
         }
 
-        delegate: Kirigami.AbstractListItem {
+        delegate: CategoryItem {
             id: delegate
 
             Accessible.role: Accessible.ListItem
@@ -174,18 +174,15 @@ Kirigami.ScrollablePage {
             highlighted: categoryView.currentIndex == index
             Keys.onEnterPressed: clicked();
             Keys.onReturnPressed: clicked();
-            contentItem: CategoryItem {
-                showArrow: {
-                    if (!model.IsCategoryRole) {
-                        return false;
-                    }
-                    const modelIndex = delegate.ListView.view.model.index(index, 0)
-                    return delegate.ListView.view.model.rowCount(modelIndex) > 1
+            showArrow: {
+                if (!model.IsCategoryRole) {
+                    return false;
                 }
-                selected: delegate.highlighted || delegate.pressed
-                // Only indent subcategory icons in the search view
-                isSearching: searchField.text.length > 0
+                const modelIndex = delegate.ListView.view.model.index(index, 0)
+                return delegate.ListView.view.model.rowCount(modelIndex) > 1
             }
+            // Only indent subcategory icons in the search view
+            isSearching: searchField.text.length > 0
         }
     }
 

sidebar/package/contents/ui/CategoryItem.qml

 import QtQuick 2.5
 import QtQuick.Controls 2.5 as QQC2
 import QtQuick.Layouts 1.1
-import org.kde.kirigami 2.10 as Kirigami
+import org.kde.kirigami 2.13 as Kirigami
 
-RowLayout {
-    id: layout
+Kirigami.BasicListItem {
+    id: delegate
 
     property bool showArrow: false
-    property bool selected: false
+    property bool selected: delegate.highlighted || delegate.pressed
     property bool isSearching: false
 
-    spacing: Kirigami.Settings.tabletMode ? Kirigami.Units.largeSpacing : Kirigami.Units.smallSpacing
-    Kirigami.Icon {
-        id: icon
-        source: model.decoration
-        Layout.preferredHeight: Layout.preferredWidth
-        Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
-        Layout.leftMargin: model.DepthRole > 1 && layout.isSearching ? (model.DepthRole - 1) * (Kirigami.Units.iconSizes.smallMedium + layout.spacing) : 0
-    }
-    QQC2.Label {
-        Layout.fillWidth: true
-        text: model.display
-        color: (delegate.highlighted || delegate.checked || (delegate.pressed && delegate.supportsMouseEvents)) ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
-        elide: Text.ElideRight
-    }
-
-    Rectangle {
-        id: defaultIndicator
-        radius: width * 0.5
-        implicitWidth: Kirigami.Units.largeSpacing
-        implicitHeight: Kirigami.Units.largeSpacing
-        visible: model.showDefaultIndicator && systemsettings.defaultsIndicatorsVisible
-        Kirigami.Theme.colorSet: Kirigami.Theme.View
-        color: Kirigami.Theme.neutralTextColor
+    text: model.display
+    leading: RowLayout {
+        id: row
+        Kirigami.Icon {
+            source: model.decoration
+            Layout.preferredWidth: row.height
+            Layout.preferredHeight: row.height
+            Layout.leftMargin: (model.DepthRole > 1 && delegate.isSearching) ? ( model.DepthRole - 1 ) * ( row.height * 1.5 ) : 0
+        }
     }
+    trailing: RowLayout {
+        Rectangle {
+            id: defaultIndicator
+            radius: width * 0.5
+            implicitWidth: Kirigami.Units.largeSpacing
+            implicitHeight: Kirigami.Units.largeSpacing
+            visible: model.showDefaultIndicator && systemsettings.defaultsIndicatorsVisible
+            Kirigami.Theme.colorSet: Kirigami.Theme.View
+            color: Kirigami.Theme.neutralTextColor
+        }
 
-    // Extra space to make the defaults indicators line up vertically for all items
-    Item {
-        visible: defaultIndicator.visible && !arrow.visible
-        implicitWidth: arrow.Layout.preferredWidth
-    }
+        // Extra space to make the defaults indicators line up vertically for all items
+        Item {
+            visible: defaultIndicator.visible && !arrow.visible
+            implicitWidth: arrow.Layout.preferredWidth
+        }
 
-    Kirigami.Icon {
-        id: arrow
-        Layout.alignment: Qt.AlignVCenter
-        Layout.preferredHeight: Kirigami.Units.iconSizes.small
-        opacity: 0.7
-        Layout.preferredWidth: Layout.preferredHeight
-        source: (LayoutMirroring.enabled ? "go-next-symbolic-rtl" : "go-next-symbolic")
-        visible: layout.showArrow
-        selected: layout.selected
+        Kirigami.Icon {
+            id: arrow
+            Layout.alignment: Qt.AlignVCenter
+            Layout.preferredHeight: Kirigami.Units.iconSizes.small
+            opacity: 0.7
+            Layout.preferredWidth: Layout.preferredHeight
+            source: (LayoutMirroring.enabled ? "go-next-symbolic-rtl" : "go-next-symbolic")
+            visible: delegate.showArrow
+            selected: delegate.selected
+        }
     }
 }

sidebar/package/contents/ui/SubCategoryPage.qml

@@ -138,8 +138,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-        delegate: Kirigami.AbstractListItem {
+        delegate: CategoryItem {
             id: delegate
+            leftPadding: Kirigami.Units.smallSpacing  + (Kirigami.Units.smallSpacing  + Kirigami.Units.iconSizes.smallMedium) * (model.DepthRole - 2)
             onClicked: {
                 systemsettings.loadModule(subCategoryView.model.index(index, 0));
             }
@@ -158,8 +159,6 @@ Kirigami.ScrollablePage {
             highlighted: systemsettings.activeSubCategoryRow == index
             Keys.onEnterPressed: clicked();
             Keys.onReturnPressed: clicked();
-            leftPadding: Kirigami.Units.smallSpacing  + (Kirigami.Units.smallSpacing  + Kirigami.Units.iconSizes.smallMedium) * (model.DepthRole - 2)
-            contentItem: CategoryItem {}
         }
     }